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());
}