This is a migrated thread and some comments may be shown as answers.

Kendo grid with multi select dropdown and foreign key

1 Answer 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mittal
Top achievements
Rank 1
Mittal asked on 10 Feb 2021, 11:40 PM

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")))
)

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 12 Feb 2021, 12:21 PM

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/.

Tags
Grid
Asked by
Mittal
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or