Scrolling resets dropdown data

[kkovacsParticipant]

Hi,
I’ve got a nested grid (rowdetails expaned), which has a 270px height, and approx 80 lines in it, so there is a scrollbar. That’s fine so far, works well.
In each line, I’ve got a dropdown element in one column. I’ve got a button, that sets all these dropdowns to the fifth element. Works fine too.
But when I start scrolling, all these dropdowns resets to the 0th (default) value.
I’ve called savestate. No luck. Why does scrolling resets my settings?

[adminKeymaster]

Hi kkovacs,

If the dropdown is created by using the createwidget method, you will need to implement the initwidget to keep the state as well.

For example:

` columns: [
{
text: ‘Picture’, datafield: ‘firstname’, width: 100,
createwidget: function (row, column, value, htmlElement) {
var datarecord = value;
var imgurl = ‘../../images/’ + value.toLowerCase() + ‘.png’;
var img = ‘‘;
var button = $(“

” + img + “

” + value + “

“);
$(htmlElement).append(button);
button.jqxButton({ template: “success”, height: ‘100%’, width: ‘100%’ });
button.click(function (event) {
var clickedButton = button.find(“.buttonValue”)[0].innerHTML;
alert(clickedButton);
});
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘../../images/’ + value.toLowerCase() + ‘.png’;
$(htmlElement).find(‘.buttonValue’)[0].innerHTML = value;
$(htmlElement).find(‘img’)[0].src = imgurl;
}
},
{ text: ‘Name’, datafield: ‘name’, width: 200 },
{ text: ‘Title’, datafield: ‘title’, width: 200 },
{ text: ‘Country’, datafield: ‘country’ }
]`

Best regards,
Peter Stoev

[kkovacsParticipant]

Hello,
thanks for the reply. The symptom applies to other post-runtime modifications too, like coloring a button in a grid cell. That resets too.
I’ve created a function for that columns “cellsrenderer” which returns an HTML like:
…
{ text: ‘Column with dropdown’, datafield:’mydatafield’, width: 200, cellsalign: ‘center’, align:’center’, cellsrenderer: dropdownCR},
…

const dropdownCR = function (index, parentElement, gridElement, record, props, rowdata) {
let resultHTML = …
…
…
resultHTML += “<select id=”mydropdown” + myId><option value=’0′>val1</option><option value=’1′>val2</option><option value=’2′>val3</option></select>”;
return resultHTML;
}
This whole is in a rowdetails grid. In a nested grid.
This is how I could implement my willing. The problem is if I change the selected option, it will reset with scrolling immediately.
This implementation seemed the easiest to me, the solution I’m familiar with.
Is there a solution for my approach perhaps (that would be the best!) or do I have to try that createWidget which is a thing that I’ve never met with?
Or if I use a jqxDropDownList instead of simple HTML element? Would that save the choosen selection?

Appreciate your answer,
Thank You Peter,
Karoly

[adminKeymaster]

Hi kkovacs,

I think that here even if you want to use the standard select html element, it will be better to use createwidget and initwidget combination due to the reason that in that way you will be able to update the cell depending on the scroll position. cellsrenderer is called on each re-render of the cell which happen with scrolling, editing, sorting, filtering, etc. It is still ok to use it, but you will need to implement some custom logic which keeps the selection state and according to me, with createwidget which is called just once and initwidget which is called dynamically, it would be easier to keep the selection state. It is OK to use jqxDropDownList, but it would not make any difference for the selection.

Best regards,
Peter Stoev

[Author]

Posts