Kendo grid with multi select dropdown and foreign key

2 posts, 0 answers
  1. Mittal
    Mittal avatar
    2 posts
    Member since:
    Jun 2012

    Posted 10 Feb Link to this post

    My requirement is to have multi select dropdown and foreign key in the kendo grid. It's working fine when i update records one at time, but if i want to do it with batch update, how can i do that? 

       @(Html.Kendo().Grid<Rostering.Models.ViewModels.RosterShiftAllocationViewModel>()
                    .Name("rgAllocation")
                    //.Events(e => e.Change("rgAllocation_Save"))
                    .Editable(editable => editable.Mode(GridEditMode.Incell))
                    .ToolBar(toolbar =>
                    {
                        toolbar.Save().HtmlAttributes(new { @class = "no-print" });
                    })
                    .Columns(c =>
                    {
                        c.Bound(e => e.Id).Visible(false);
                        c.Bound(e => e.StartEndDetail).Title("Start and End").EditorTemplateName("").HtmlAttributes(new { @class = "cellBorder", @style= "color: red" });
                        c.Bound(e => e.RollNumber).Title("Payroll Number").HtmlAttributes(new { @class = "cellBorder" });
                        c.Bound(e => e.StaffMember).Title("Staff Member").HtmlAttributes(new { @class = "cellBorder" });
                        c.Bound(e => e.Grade).Title("Grade").HtmlAttributes(new { @class = "cellBorder" });
                        c.Bound(e => e.ShiftBeds).ClientTemplate("#=bedsTemplate(RosterShiftBeds)#").Title("Allocation").HtmlAttributes(new { @class = "cellBorder" });
                        c.Bound(e => e.AllocationComments).Title("Comments").HtmlAttributes(new { @class = "cellBorder" });
                        c.Bound(e => e.ShiftType).Title("Shift Type").HtmlAttributes(new { @class = "cellBorder" });
                        c.ForeignKey(p => p.AllocationSpecialId, (System.Collections.IEnumerable)ViewData["AllocationSpecial"], "AllocationAlertTypeId", "Description")
                            .EditorTemplateName("AllocationSpecialEditor")
                            .ClientTemplate("#=AllocationSpecialDescription#")
                            .Title("Special")
                            .HtmlAttributes(new { @class = "cellBorder" });
                         c.Command(command => { command.Edit(); }).Width(100).HtmlAttributes(new { @class = "no-print"});
                    })
                    .Events(events => events.Save("on_rgAllocation_Save"))
                    .DataSource(d =>
                        d.Ajax()
                        .Batch(true)
                        .Model(model =>
                        {
                            model.Id(e => e.Id);
                            model.Field(e => e.ShiftStartEndDetail).Editable(false);
                            model.Field(e => e.RollNumber).Editable(false);
                            model.Field(e => e.StaffMember).Editable(false);
                            model.Field(e => e.Grade).Editable(false);
                            model.Field(e => e.ShiftType).Editable(false);
                            model.Field(e => e.ShiftBeds).DefaultValue(new List<ShiftBedViewModel>());
                        })
                        .Read(r => r.Action("GetShiftDetailByDateId", "Home").Data("getAllocationParams"))
                        .Update(update => update.Action("UpdateShiftAllocationDetails", "Home"))
                       )
                    )

     

     

     

      function on_rgAllocation_Save(e) {
                console.log("i m called _ on rg Allocation");
                if (!e.model.AllocationSpecialId) {
                    //change the model value
                    e.model.AllocationSpecialId = 0;
                    //get the currently selected value from the DDL
                    var currentlySelectedValue = $(e.container.find('[data-role=dropdownlist]')[0]).data().kendoDropDownList.value();
                    //set the value to the model
                    e.model.set('AllocationSpecialId', currentlySelectedValue);
                    if (e.model.RosterShiftBeds.count > 0) {
                        $.each();
                    }
                }
            }

     

    and this is my multiselect  editor template

     

    @model IEnumerable<Rostering.Models.ViewModels.ShiftBedViewModel>
    @(
        Html.Kendo().MultiSelectFor(m => m)
            .DataTextField("BedName")
            .DataValueField("BedId")
            .Placeholder("Select")
            .DataSource(d => d.Read(r => r.Action("OrgUnitBeds", "List").Data("getUnit")))
    )

  2. Neli
    Admin
    Neli avatar
    432 posts

    Posted 12 Feb Link to this post

    Hello Mittal,

    I would suggest you take a look at the Batch editing Demo and Documentation linked below.

    - https://demos.telerik.com/aspnet-mvc/grid/editing

    - https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/editing/batch

    Please note, that when batch editing is used, the respective controller should expect a list of objects, but not a single one. Please find an example below:

     public ActionResult Products_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products){...}

    As you are using MultiSelect as a custom editor, when the value of the editor is sent to the server, it will be a list with selected values. 

    Take a look at the provided information and let me know in case you have any other questions regarding the issue. 

    Regards,
    Neli
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top