Depending on whether you will have all data on the client before binding the Grid, or you will perform data operations like sorting, filtering, and paging, on the server, the most straight-forward approaches differ.
1) Automatic binding
1.a) Built-in Grid data binding directive - when all the data is available as an array, you can bind the
Grid using this directive and all operations will be handled automatically:
1.b) Custom data binding directive - when data is coming from a custom service, you can create
custom data binding directive, similar to the one above to handle data operations
2) Handling events and manipulating the data
The most straightforward approach would be to handle the dataStateChange event
and process the
data in accordance with the incoming state (sorting, paging, filtering and grouping configuration),
regardless of whether the data is coming from a remote service, or is available on the client. The Data
Query helper function process()
can be used to process the whole data in accordance with the passed
Please inspect the described approaches and the respective runnable online demos, and let us know which approach would best suit your needs and if you have any further questions about adjusting it to your scenario.
The buttons in the Grid need to be part of Grid cell templates
, designed to provide any custom content to the Grid cells of the respective column. In this template, you have access to the data item, associated with this row, and can pass it to the button click handler function, e.g.:
I hope this helps.