Update an EditorFor value in a popup editor template using JavaScript

5 posts, 0 answers
  1. Adam Anderson
    Adam Anderson avatar
    7 posts
    Member since:
    Aug 2006

    Posted 13 Sep 2012 Link to this post

    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? 
  2. Adam Anderson
    Adam Anderson avatar
    7 posts
    Member since:
    Aug 2006

    Posted 14 Sep 2012 Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andrew
    Andrew avatar
    7 posts
    Member since:
    Jul 2015

    Posted 22 Aug 2015 in reply to Adam Anderson Link to this post

    This is great information. I think this needs to get into the documentation ASAP for the GRID.
  5. Pradeep
    Pradeep avatar
    1 posts
    Member since:
    Aug 2014

    Posted 20 May Link to this post

    Thank you for Sharing. This made my day!
  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 25 May Link to this post

    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:



    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready