Adding rows to grid and prevent refresh?

[Alan]

I am trying a scenario where I want to move rows from one grid to another. I have used this link as a starter: https://onabai.wordpress.com/2013/01/28/kendoui-move-rows-between-grids/

The method in the above link works fine, but I am looking to add a dropdownlist in the target grid when a row is added. I am providing a dojo link to illustrate:

https://dojo.telerik.com/@alanwhurt/IsAqOVug/2

The dropdownlist is being added and what I would like to do is to be able to select a value in the list and have it persist when a new row is added. For example, if I select the first user in the left grid and move it to the target grid on the right and then select a role, all is well. If I add another user to the target grid, any previous dropdownlist selection is reset. I assume this is happening due to the grid being refreshed when a new item is added to its datasource. Is there a way to prevent this from happening, or another way I can try to accomplish this scenario?

[Alan]

I found this 'How to' link which describes adding items to datasource without refreshing grid, but after trying what is suggested, I still had the problem of my dropdownlist losing selected values any time a new row added to the grid. Just wanted to provide this as a reference in the event it is applicable to my scenario

[Alan]

Sorry, forgot the link to How To article: https://docs.telerik.com/kendo-ui/knowledge-base/grid-datasource-insert-without-refresh

[Veselin Tsvetanov]

Hello Alan,

In order to preserve the selection within the Grid items, you will need to save the change in question in the Grid dataItem. To do that, you should handle the DropDownList change event:

function onChange(ev) {
  var dropDown = ev.sender;
  var newValue = dropDown.value();
  var element = dropDown.element;
  var row = element.closest('tr');
  var grid = $("#grid2").data("kendoGrid");
  var dataItem = grid.dataItem(row);

  dataItem.set('DropDown', newValue);
  
  initializeDropDOwns();
}

Also, you should slightly alter the DropDown column template function:

function columnTemplateFunction(dataItem) {
  var input = '<input class="dropDownTemplate" name="DropDown" value="' + dataItem.DropDown + '"/>'

  return input
}

Here you will find a modified version of the Dojo sample:

https://dojo.telerik.com/axeQUjaG/6

Regards,
Veselin Tsvetanov
Progress Telerik

[Alan]

This is great, thank you!