Update an EditorFor value in a popup editor template using JavaScript

[Adam Anderson]

I have a grid that is bound to some data that includes a ProjectID and a Project_Name column. The Project_Name column is a lookup into another database table based on ProjectID, but I return it as part of the result set for simpler display and binding in the grid. The grid's edit mode is PopUp and I have created an EditorTemplate with a Kendo ComboBox that is bound to ProjectID for value and Project_Name for display. When you change the ProjectID and click Update, the new ProjectID is persisted in the DB, but the Project_Name value doesn't change unless I refresh the page or the grid. I have all the information that I need to be able to assign the new Project_Name to the row, so I do not want to have to rebind the grid or refresh the page just to do this.

Now, I know that controls in the templated pop-up that are bound to the model will automatically update the grid's dataItem when they change. If I add an Html.TextBoxFor(o => o.Project_Name) to the editor and type a new value into it, I can see it change in the grid at the same time. I was planning to hide this textbox and update its value in JavaScript when the ProjectID's combobox value changes in order to update the grid's dataItem, but after some experimentation, I have found that changing the Project_Name textbox's value with JavaScript does not update the grid's dataItem; only typing into it does. I have tried updating the textbox's value both by using the JQuery val() method and by accessing the HTML input's value property directly. I cannot see any event handlers attached to the textbox, so I don't understand the mechanism by which the value that I type in is sent back to the grid, while a value assigned in JavaScript is not sent back.

So, a few questions:
1. Why does the bound textbox update the grid's dataItem when I type a value in, but not when I assign a value via JavaScript?
2. Is there a way for me to trigger the bound checkbox to update the grid's dataItem after I update the value in JavaScript?
3. Is this the best way for me to update Project_Name in the edited row in the grid, or is there a better way to do so without having to rebind the grid or refresh the page? 

[Adam Anderson]

After posting this question publicly, I also submitted a support ticket and received this reply:

1. Why does the bound textbox update the grid's dataItem when I type a value in, but not when I assign a value via JavaScript?  Internally the grid editing uses MVVM to update the underlying DataSource data. Changing the value of a input via JavaScript does not trigger the change event of the element which is the reason for the behaviour you described.
2. Is there a way for me to trigger the bound checkbox to update the grid's dataItem after I update the value in JavaScript?  Yes, but you should modify the model value through the set method (in the same way as you do if you operate with MVVM ViewModel), not the input element value. I am not sure at what point you would like to perform the data changes, but in my opinion the most suitable place is at the save event of the grid where could retrieve the model from event parameter. Alternatively you can get the model uid from editor window data and use the getByUid method of the DataSource.

var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid"),

model = $("#grid").data("kendoGrid").dataSource.getByUid(uid);

model.set("fieldName", newValue);

1. Is this the best way for me to update Project_Name in the edited row in the grid, or is there a better way to do so without having to rebind the grid or refresh the page?  In order to avoid grid rebind you can use the aforementioned approach.

[Andrew]

This is great information. I think this needs to get into the documentation ASAP for the GRID.

[Pradeep]

Thank you for Sharing. This made my day!

[Viktor Tachev]

Hello,

There is a code-library that illustrates how you can use a custom PopUp editor with the Grid HtmlHelper. Check it out in the link below:

• http://www.telerik.com/support/code-library/custom-popup-editor-52debd2ced8d

Regards,
Viktor Tachev
Telerik