Editable Combo in Grid ClientTemplate not updating with added value

[Scott]

I posted this in another thread (https://www.telerik.com/forums/how-to-disable-a-dropdownlist-in-a-row-when-another-dropdownlist-chooses-a-value) if you need more background but this is a new issue I've encountered so it deserves it's own thread in case someone else runs into it.

I have a grid very similar to the one in this example where I am using 3 different client templates to populate and bind 3 drop downs in my grid:
https://demos.telerik.com/aspnet-core/grid/editing-custom

My dropdowns are:
Category
Department
Configuration

I got this all working perfectly but then the client wanted to make Department an editable dropdown (either choose an option, or add a new one on the fly) so I converted the Department dropdownlist to a combobox

I then wrote an ajax call to add the new item to the database:

//e is the Department combobox
function addDepartment(e) {
       var dept = new Object();
       dept.DepartmentID = 0;
       dept.DepartmentName = e.text();

       $.ajax(
       {
           url: '@Url.Action("AddDepartment", "Wizard")',
           type: 'GET',
           dataType: "json",
           data: dept,
           contentType: 'application/json; charset=utf-8',
           success: function (result) {
               console.log("success");
               //re-fetch the datasource so the combo has the newly added item in it with its new PK
               this.dataSource.read();
               //I tried forcing its selection like this but it didn't help
                  e.value(result.DepartmentID);
           }
           })
         console.log("dept added");
   }

 

Everything work the way it should, the record is saved to the db, the combobox has the newly added item selected but when you go to save the row, that newly added Department is not actually selected (you get an empty object posted to Controller). HOWEVER, if you first select another option from the Department combo then re-select the newly added item it 'sets' the state correctly to the new object and it gets posted to the Controller correctly. You can see in my script above I'm trying to force it to set the combo but that didn't work. Any ideas how to work around this?

 

 

 

[Nikolay]

Hello Scott,

Thank you for explaining this scenario in details.

What I can suggest here is after selecting the new value from the ComboBox to trigger its Change event. The reason for this behaviour is the fact that changing the value via JavaScript code does not trigger the change event of the widget.

success: function (result) {
               this.dataSource.read();
               e.value(result.DepartmentID);
               e.trigger("change"); 
           }
           })

Please try the above and let mek now if it roselves the situation.

Regards,
Nikolay
Progress Telerik

[Scott]

Thank you Nikolay that was quite helpful in getting this solved as I did not know that it would not trigger the change event. What happened when I added that though was that it got into an endless loop of adding items because i wasn't distinguishing between the add-new item and the change event for selecting an item. Plus that call to set the combo's value was not succeeding so it was thinking every time that change() fired that it was a new item. 

What I discovered is that if I looped thru the combo's dataSource and logged each to the console, that the new item was not there so it was failing to set the selected item. What wound up working for me was to manually add the new item to the datasource before setting the value and calling change. I also added a check at the beginning to determine if it was a new item being added or just an existing item chosen, here's how it ended up working for me, hopefully this helps someone else:

//I modified the event handler on the combobox to just do the default like this:
//.Events(e => e.Change("onDeptChange"))
function onDeptChange(e) {
    var di = e.sender.dataItem();
    var cmb = $("#Department").data("kendoComboBox");
    var ds = cmb.dataSource;
        console.log("di " + (di == null ? di : JSON.stringify(di)));

        if (!di) {
          var dept = new Object();
          dept.DepartmentID = 0;
          dept.DepartmentName = cmb.text();

           $.ajax(
           {
           url: '@Url.Action("AddDepartment", "Wizard")',
           type: 'GET',
           dataType: "json",
           data: dept,
           contentType: 'application/json; charset=utf-8',
           success: function (result) {
               console.log("success " + JSON.stringify(result));
               ds.add(result);
               cmb.value(result.DepartmentID);
               cmb.trigger("change");
           }
           })
        }
    }
}

[Nikolay]

Hi Scott,

I am happy to hear this helped you move forward with the project and thank you for sharing the resolution with the community. This will surely help others facing the same scenario.

Feel free to contact us again in case anything else pops up.

Regards,
Nikolay
Progress Telerik