Populate columns of grid based on selection made in ForeignKey column control

[Wasim]

I have a grid in which the first column of the Grid is a drop down (ForeignKey column), while all other columns are readonly. Whenever user makes a selection, I want all the readonly columns be populated with relevant data against the selection made in the drop down column. For example: Drop down column is the Badge No of the employees, when user selects a badge #, I want first name, last name etc. populated for the selected badge # in other columns for that particular row only. How can I achieve this?

 

01.@(Html.Kendo().Grid<IMCC.TrainingTracker.Models.EmployeeMasterViewModel>()
02.    .Name("trainersGrid")
03.    .Columns(columns =>
04.    {
05.        columns.ForeignKey(c => c.emp_badge_no, (SelectList)(ViewBag.employees)).Width(90);
06.        columns.Bound(c => c.emp_first_name);
07.        columns.Bound(c => c.emp_last_name);
08.        columns.Bound(c => c.emp_company).Width(150);
09.        columns.Bound(c => c.emp_designation_text).Width(150);
10.        columns.Bound(c => c.emp_email_address).Width(120);
11.    })
12.    .Editable(editable => editable.Mode(GridEditMode.InCell))
13.    .ColumnMenu()
14.    .Pageable(p => p.Refresh(true).PageSizes(true))
15.    .Selectable(selectable =>
16.    {
17.        selectable.Mode(GridSelectionMode.Single);
18.            selectable.Type(GridSelectionType.Row);
19.    })
20.    .Sortable(sortable =>
21.    {
22.        sortable.SortMode(GridSortMode.MultipleColumn);
23.    })
24.    .Events(e => e.Edit("onEdit"))
25.    .Filterable()
26.    .Resizable(r => r.Columns(true))
27.    .Events(events =>
28.    {
29.        events.Change("onGridChange"); events.DataBound("onGridDataBound");
30.    })
31.        .DataSource(dataSource => dataSource
32.    .Ajax()
33.    .Model(model =>
34.    {
35.           model.Id(p => p.id);
36.        model.Field(p => p.emp_first_name).Editable(false);
37.        model.Field(p => p.emp_last_name).Editable(false);
38.        model.Field(p => p.emp_company).Editable(false);
39.        model.Field(p => p.emp_designation_text).Editable(false);
40.        model.Field(p => p.emp_email_address).Editable(false);
41.    })
42.    .Read(read => read.Action("CourseTrainers_Read", "CourseTrainer").Data("GetCurrentCourse"))
43.                    Update(update => update.Action("CourseMaster_Update", "CourseMaster"))
44.                    .Destroy(destroy => destroy.Action("CourseMaster_Destroy", "CourseMaster"))
45.            )
46.)

[Alex Hajigeorgieva]

Hello, Wasim,

To update another model field when the foreign key DropDownList selection changes, you need to make the following changes:

- Remove the Editable(false) setting from the fields that you wish to be able to change 

model.Field(p => p.emp_first_name).Editable(false);
model.Field(p => p.emp_last_name).Editable(false);
model.Field(p => p.emp_company).Editable(false);
model.Field(p => p.emp_designation_text).Editable(false);
model.Field(p => p.emp_email_address).Editable(false);

- Add an event handler to the foreign key editor 

select: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/select
change: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/change

@model object

@( Html.Kendo().DropDownListFor(m => m)
     .Events(e=>e.Change("onFKChange"))
     .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
     .Events(e=>e.Change("onChange"))
)

- in the change event handler, set the new values

function onChange(e) {
    var grid = $("#grid").data("kendoGrid");
    var editedDataItem = grid.dataItem(".k-grid-edit-row");
    editedDataItem.set("emp_last_name", "test");
}

- finally, so that the field appears non-editable, add this in the columns definition

.Columns(columns =>
{
   columns.Bound(c => c.emp_last_name).Editable("function(){return false;}");
})

Let me know in case you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Wasim]

Hi Alex,

Thanks for the response. I understand most part of your answer but I don't understand why you have added a Kendo().DropDownlistFor() manually? In my case, my first column of the grid is a ForeignKey column which is bound to emp_badge_no field of the model. Since this is a foreign key column, so it is automatically rendered as a DropDownList. Then why do I need to add a manuall DropDownList?

Is there any way, I can subscribe to change event of the foreignKey column that gets added automatically (instead of having to add a separate dropdown)?

[Alex Hajigeorgieva]

Hello, Wasim,

The Kendo UI Grid for ASP.NET MVC automatically generates a DropDownList because the template projects come with it.

It is located at:

~\Views\Shared\EditorTemplates\GridForeignKey.cshtml

My suggestion is to add the change event handler in this editor which generates the DropDownList.

Let me know if further assistance is required.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Wasim]

I removed the `Editable(false);` from the model as you suggested.

then I wired up with the `OnChange` event of the `DropDownList` in `EditorTemplates` as you suggested. Also, I added the `Editable("function(){return false;}");` in the columns definition. But this did not work. 

However, if I remove `Editable("function(){return false;}");` from the columns definition, then it works perfectly fine. But I want some of these columns to remain un editable. 

Can you suggest the solution please.

[Alex Hajigeorgieva]

Hi, Wasim,

This is the suggested approach and it works when tested with version 2018.3.1017. I am attaching a project for your reference which you may edit and send back to me to demonstrate the issue you are experiencing.

Can you confirm that the version you are testing with is the latest one?

Another option would be to add an edit handler function which checks which is the edited column and closes the cell in case it is not the foreign key column, for example:

.Events(e=>e.Edit("onEdit"))
function onEdit(e) {
    var grid = this;
    var fkColumn = e.container.find("[data-role='dropdownlist']").length;
    if (!fkColumn) {
        grid.closeCell();
    }
}

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/closecell

Kind Regards,
Alex Hajigeorgieva
Progress Telerik