Hi all,
I have added checkbox input and sort feature on my igGrid, but after i click sort, all of my checkbox returns to original state. I think the reason is IgGrid re-render UI after sort and it makes our checkbox return to original state.
I created a sample base on the template IgNiteUI supporter has given from another thread, please take a look and give me some advice for my problem and feel free to ask me if you don't understand what I ask, thank you!
Best regards,
Trung NT
Checkboxes.zip
Hello Trung,
I was able to look at the sample you have provided and the cause of this behavior seem to be the lack of updated values in the dataSource of the igGrid itself.
It is exactly as you describe it. The igGrid re-renders the UI, but when re-rendering the cells it needs to read their values from somewhere. That place is the dataSource, that you have set initially . If these values are not updated, like in the sample remaining `true` even when unchecked, it will render the checkbox as their old values. Since the checkbox cells have a custom template, the igGrid is simply detached from anything that happen in these cells and won't know when the checkbox is checked to update the values in its dataSource.
There are two ways to update the values. One way is to update the row in the "products" array directly and rebind the grid, which will update the dataSource with the new data . This though would be quite expensive when the data gets bigger. The other way is to enable Updating, disable its UI and manually set the new values for the cells through the igGrid, which will update the dataSource and will be faster.
I have updated you sample with both possible scenarios so you can choose the one that suits you better. Hope they help and if you have any questions regarding them I would gladly answer them.
Regards,Svetoslav
Checkboxes-edit.zip
Hi Svetoslav,
Thanks for your solutions. I have tried the both, but only the first way works (use dataBind). However, this solution makes the grid automatically scroll to top if the grid has big rows. It seem not good for UX, UI and performance as well.
About the solution using updating, it always shown error "The specified record or property was not found. Check the search conditions and adjust as necessary." even I provided enough params for ".igGridUpdating( "setCellValue", rowId:object, colKey:string, value:object );". Maybe it happened due to the way I apply to my project.
Anyway, I appreciate your helps, thank you so much! I will try to discovery more about the updating way, I think it should work somehow.
Best regard,
Trung
Hi Trung,
Could you see if you have specified `primaryKey` for your grid. Usually this is the error thrown when the record cannot be found due to missing primaryKey or wrong parameters provided. In the case of the sample I set it to "id", but it would depend on your application.
Oh I see, it's working now, thanks you so much, you have saved my day!!
Great, glad to hear that it is working.