I have a Kendo grid that has a requirement for using a conditional dropdown in combination with batch editing.
For instance I need to allow an order enterer set the color of a product from a dropdown, but each product has a potentially different set of available colors.
I have done something similar with InLine editing without a problem and the ajax call to populate the dropdown is getting called correctly in batch mode. The problem appears to be that the #=productId# is not getting correctly parsed by Kendo.
@( Html.Kendo().Grid<Web.Models.StudentGradeView>()
.Name("Students")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.Price);
columns.Bound(c => c.Color); })
.ToolBar(toolbar =>
{
toolbar.Template( @"
<span class=""pull-left"">
<a class=""btn k-grid-save-changes"" href=""javascript:void(0)""><span class=""k-icon k-update""></span> Save</a>
<a class=""btn k-grid-cancel-changes"" href=""javascript:void(0)""><span class=""k-icon k-cancel""></span> Cancel</a>
</span>"
})
.Events(e => e.Edit("onEdit")) .Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(events =>
{
events.Error("error_handler");
})
.Model(model =>
{
model.Id(m => m.Id);
})
.Read(read => read.Action("Product_Read", "Home", new { id = orderId }))
.Update(update => update.Action("Product_Update", "Home"))
)
)
@model string
@(
Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Color")
.DataTextField("Color")
.DataValueField("Color")
.DataSource(dataSource =>
{
dataSource.Read("ColorsDropDown_Read", "DropDowns", new { Area = "", id = "#=ProductId#" });
})
)
public ActionResult ColorsDropDown_Read([DataSourceRequest] DataSourceRequest request, string id)
{
List<Grade> rVal = new List<Color>();
rVal = _SystemSettings.AllColors.Where(w => w.ProductId == id)..ToList();
return Json(rVal, JsonRequestBehavior.AllowGet);
}
Thanks!
@(Html.Kendo().Grid(Model.TimesheetDetails) .Name("TimesheetDetailGrid") .TableHtmlAttributes(new { style = "padding:0; margin:0;font-size:smaller;color:green" }) .Columns(columns => { columns.Bound(x => x.Id).Hidden(); columns.Bound(x => x.TimesheetId).Hidden(); columns.Bound(x => x.CompanyId).Hidden(); columns.ForeignKey(p => p.JobCodeId, (System.Collections.IEnumerable)ViewData["JobCodes"], "Id", "JobCodeName") .Title("Job Code") .Width(150) .HeaderHtmlAttributes(new { @class = "GridHeader" }); columns.Bound(x => x.Description) .Width(250) .Title("Description") .HeaderHtmlAttributes(new { @class = "GridHeader" }); columns.Bound(x => x.WorkDate) .Width(65) .Title("Date") .HeaderHtmlAttributes(new { @class = "GridHeader" }); columns.Bound(x => x.StartTime) .Width(55) .Title("Start") .Format("{0:hh:mm}") .HeaderHtmlAttributes(new { @class = "GridHeader" }) .HtmlAttributes(new { @class = "StartTime" }); columns.Bound(x => x.EndTime) .Width(55) .Title("End") .Format("{0:hh:mm}") .HeaderHtmlAttributes(new { @class = "GridHeader" }) .HtmlAttributes(new { @class = "EndTime" }) .ClientFooterTemplate("Hours: "); columns.Bound(x => x.Duration) .Width(55) .Title("Hours") .HeaderHtmlAttributes(new { @class = "GridHeader" }) .ClientFooterTemplate("#=kendo.toString(sum, '0.00') #"); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(122); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable(x => x .PageSizes(true) .PageSizes(new int[] { 2, 3, 4, 5, 10, 25, 100 })) .Sortable() .Events(events => events.Edit("onEdit")) .Events(events => events.Save("onSave")) //.Events(events => events.DataBound("gridDataBound")) .DataSource(ds => ds .Ajax() .ServerOperation(true) .PageSize(10) .Model(m => { m.Id(vm => vm.Id); m.Field(vm => vm.Id).DefaultValue(Guid.NewGuid()).Editable(false); m.Field(vm => vm.TimesheetId).DefaultValue(Model.Id).Editable(false); m.Field(vm => vm.CompanyId).DefaultValue(Model.CompanyId).Editable(false); m.Field(vm => vm.JobCodeId).DefaultValue(Guid.Empty); m.Field(vm => vm.Duration); }) .Aggregates(aggregates => { aggregates.Add(p => p.Duration).Sum(); }) .Read(read => read.Action("TimesheetDetail_Json", "Timesheet", new { Id = Model.Id })) .Create(update => update.Action("AddDetailRow_Json", "Timesheet")) .Update(update => update.Action("EditDetailRow_Json", "Timesheet")) .Destroy(update => update.Action("DeleteDetailRow_Json", "Timesheet")) ))function onSave(e) { var dataSource = this.dataSource; e.model.one("change", function () { dataSource.one("change", function () { //alert(dataSource.aggregates().Amount.sum); }); dataSource.fetch(); }); e.model.set("Duration", $("#Duration").val());}