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

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

5 Answers 744 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Wasim
Top achievements
Rank 1
Wasim asked on 26 Dec 2018, 10:00 AM

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

5 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 27 Dec 2018, 01:07 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Wasim
Top achievements
Rank 1
answered on 30 Dec 2018, 07:51 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 31 Dec 2018, 09:10 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Wasim
Top achievements
Rank 1
answered on 31 Dec 2018, 10:32 AM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 02 Jan 2019, 10:01 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Wasim
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Wasim
Top achievements
Rank 1
Share this question
or