I need custom grid behavior on client side: on press Add button, grid create new row in InLine mode, and on press Add2 button, grid create new row in InForm mode, with additional functionality. I add new custom command in toolbar and call javascript function Add2, where try change grid edit mode. But edit mode not changed, new row created in InLine mode. What I do wrong, and in general, is it possible?
<script type="text/javascript">
function Add2() {
var grid = $('#Property').data('tGrid');
grid.editing.mode = 'InForm';
grid.addRow();
}
</script>
Html.Telerik().Grid<Models.PropertyTypeModel>().Name("Property")
// skip
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_PropertySelect", "Options", new { oid = "<#= OptionTypeID #>" })
// skip
})
.ToolBar(commands =>
{
commands.Insert().ButtonType(GridButtonType.ImageAndText);
commands.Custom().Text("Add2").Url("javascript:void(0)").HtmlAttributes(new { onclick = "Add2()" });
})
.Editable(editing => editing
.Mode(GridEditMode.InLine)
)
)
Thanks in advance for your reply.
This is not currently supported.
Related
I have got a grid and a custom command button inside the grid.
My goal is to open a Telerik popup window and pass the column values to this popup window.
So far I created a grid with the custom command which opens a Telerik window. But I am not sure how to pass the values from the grid to the popup window.
The Grid
#(Html.Kendo().Grid<Lagerbase.Models.Artikel>()
.Name("CompanyGrid")
.Columns(columns =>
{
....
columns.Bound(o => o.Id);
columns.Command(command => command.Custom("Buchen").Click("Buchen"));
}
...
)
The popup window
(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(#<text>
<h4>Id: (this is where I want to display the Id from the grid)</h4>
</text>)
.Resizable()
.Width(600)
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
The JavaScript function
<script>
function Buchen(e) {
e.preventDefault();
$("#window").data("kendoWindow").center().open();
}
</script>
In the popup window I marked the area where I want to pass the column value, based on which button was pressed. Thanks in advance!
You can get current data item in javascript and then get the id property from it.
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#lblMyValue").text(dataItem.Id);
I need some help with a Asp.net Gridview. My users need to click a button and have an Ajax Modal Popup window display with a Gridview that has Fixed Headers. I have tried this many times but no success. I have been able to use Java to make the headers fixed in a Gridview, but it does not work when displaying in a Ajax modal popup window. The header row duplicates on the Gridview. Again, thank everyone for the help.
Can anyone post some code using Asp.net/C#/Ajax.
function BindControlEvents() {
/*Code to copy the gridview header with style*/
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
/*Code to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
/* Here Set Width of each th from gridview to new table th */
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
$("#controlHead").append(gridHeader);
$('#controlHead').css('position', 'absolute');
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
};
Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?
I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.
I'm an intern that has never done any web development just so you know where I'm coming from. I'm currently trying to learn asp.NET MVC 3 using devexpress 12.1 tools. I started with a template that had a devexpress gridview in the content area that is linked up to the Northwind db. It works by itself, but when I create a devexpress tab strip and place the gridview inside the second tab I get the column headings, but no data is displayed. When I click on a column heading to sort the data shows up. I'm wanting the gridview to load after I click the tab and not when the page loads. Maybe my callbacks are the problem. My tab strip is using an ajax callback and the gridview is as well for the paging. I have added the model to the TabControlPartial page and passed in the model in the controller for the TabControlPartial action. I've tried looking at the demos at mvc.devexpress.com, but there is nothing that puts the two together. I don't 100% understand passing the model into the view I guess. I know this is simple, but I don't know what to do. Thanks for your help.
Controller (this may be my issue):
public ActionResult LookUp()
{
return View(NorthwindDataProvider.GetCustomers());
}
public ActionResult _TabControlPartial()
{
return PartialView("_TabControlPartial", NorthwindDataProvider.GetCustomers());
}
public ActionResult _GridViewPartial()
{
return PartialView("_GridViewPartial", NorthwindDataProvider.GetCustomers());
}
LookUp View (Index):
#model System.Collections.IEnumerable
#Html.Partial("_TabControlPartial", Model)
Tab Partial:
#model System.Collections.IEnumerable
#Html.DevExpress().PageControl(
settings =>
{
settings.Name = "TabControl";
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Height = System.Web.UI.WebControls.Unit.Percentage(100);
settings.CallbackRouteValues = new { Controller = "Customers", Action =
"_TabControlPartial" };
settings.TabPages.Add(
tabOne =>
{
tabOne.Name = "TabOne";
tabOne.Text = "Start";
tabOne.SetContent(() =>
{
ViewContext.Writer.Write("Start");
});
});
settings.TabPages.Add(
tabTwo =>
{
tabTwo.Name = "TabTwo";
tabTwo.Text = "Customer List";
tabTwo.SetContent(() =>
{
Html.RenderPartial("_GridViewPartial", Model);
});
});
}).GetHtml()
GridView Partial:
#Html.DevExpress().GridView(
settings =>
{
settings.Name = "GridView";
settings.CallbackRouteValues = new { Controller = "Customers", Action =
"_GridViewPartial" };
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Height = System.Web.UI.WebControls.Unit.Percentage(100);
settings.SettingsPager.Visible = true;
settings.SettingsPager.PageSize = 15;
settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
settings.ControlStyle.BorderBottom.BorderWidth =
System.Web.UI.WebControls.Unit.Pixel(1);
//Configure grid's columns in accordance with data model fields
settings.Columns.Add("ContactName");
settings.Columns.Add("Address");
settings.Columns.Add("City");
settings.Columns.Add("PostalCode");
settings.Columns.Add("Phone");
}).Bind(Model).GetHtml()
You're missing the data in the GridView when the tab is opened. When you open the page, the data for the GridView needs to be loaded in the Model that is returned. right now you load the page (in LookUp), but you aren't pushing the data for the grid. whenever any callback occurs, only at that point is the data getting pulled from the database and returned to the screen (notice you only return data in the Callback methods _TabControlPartial and _GridViewPartial). When you sort a column, or filter, etc, then the callback is fired and the data is returned from the server.
The code you have looks correct, but somewhere in the process the Model is losing it's value. the best option is to put a breakpoint in the tab control, the Grid Binding, and the controller and make sure the data you expect is in place when it's bound.
You could "cheat" by putting in a callback when the tab is activated such as:
#Html.DevExpress().PageControl(
settings =>
{
settings.Name = "TabControl";
settings.ClientSideEvents.Init = "TabControl_Init";
...
}).GetHtml()
and in JavaScript have:
function TabControl_Init(s, e) {
GridView.PerformCallback();
}
this way, after the tabs are initialized, the GridView will run a callback, and grab the data correctly. But it would be better to figure out why the data isn't being sent down in the first place by stepping through the code.
Is it possible to have a dropdown control with functionality that if there is no element in the dropdown im interested in I can just type it in myself ?
thanks for any help
Disclaimer: I know this question hasn't been tagged jQuery, but for future users searching i'll provide a start for a jquery solution.
Here's a relly simple start to a jQuery plugin to handle allowing dynamic options into a select box. An extra textbox and button is added to the DOM for each select element. Also an option is added to the bottom of the select list with text such as "add item...". Selected this option allows the user to type a new item in and add it to the select box.
Live example here: http://jsfiddle.net/8G6z3/1/
(function($) {
$.fn.freeEntry= function(options){
var settings = $.extend(
{},
{ //defaults
addItemText: 'add item...'
},
options
);
return this.each(function(){
var $this = $(this);
var $addItemOption = $('<option>' + settings.addItemText + '</option>');
$this.append($addItemOption);
var $addItemControl = $('<input type=text>').hide();
$addItemControl.insertAfter($this);
var $addItemButton = $('<input type=button value="add">').hide();
$addItemButton.insertAfter($addItemControl);
$addItemButton.click(function(){
if($addItemControl.val().length){
var $newOption = $('<option>' + $addItemControl.val() + '</option>');
$newOption.insertBefore('option:last',$this)
$this.val($addItemControl.val());
$addItemControl.val('');
}
$addItemControl.hide();
$addItemButton.hide();
});
$this.change(function(){
var $this = $(this);
if($this.val() == settings.addItemText){
$addItemControl.show().focus();
$addItemButton.show();
}
});
});
}
})(jQuery);
Usage: $('#mySelectBox').freeEntry( { addItemText: "Add a new item yo!"} );
This is not possible with the standard HTML select control, however you could use an HTML input textbox, which uses AJAX autocomplete to display a dropdown:
http://www.devbridge.com/projects/autocomplete/jquery/
Alternatively, you could have an "Other" option in the HTML select dropdown, which when selected, will display a TextBox control
You could have a text box near the drop down list with a submit button which appends html to the list section?