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

Adding rows to grid and prevent refresh?

4 Answers 259 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 29 Jan 2020, 03:45 PM

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?

4 Answers, 1 is accepted

Sort by
0
Alan
Top achievements
Rank 1
answered on 29 Jan 2020, 07:12 PM
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
0
Alan
Top achievements
Rank 1
answered on 29 Jan 2020, 07:12 PM
Sorry, forgot the link to How To article: https://docs.telerik.com/kendo-ui/knowledge-base/grid-datasource-insert-without-refresh
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 31 Jan 2020, 10:12 AM

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

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
Alan
Top achievements
Rank 1
answered on 31 Jan 2020, 08:51 PM
This is great, thank you!
Tags
Grid
Asked by
Alan
Top achievements
Rank 1
Answers by
Alan
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or