Angular: customizing grid

[Chris]

I'm implementing the grid using Angular, and I'm a little hazy how to do a few things. I've posted several question on Stack Overflow but they are not getting responses.

Some things I"m trying to solve:

Row customization: I want to add a class to the row, based on a value of the row (eg. itemIsHealthy=false show color the row red). I know I can completely write the row template, but that seem overkill. Also, how do I then include all my coulmns, with their widths and custom templates, etc.?
I want to have a row-click action. (click on row to open nested detail, or click on row to go to edit page)

Select / Select All / Save: I want to POST a list of slected rows (by Id). Where is the array of my items? Best as I can figure, I have to call vm.myGrid.dataSource.options.data(). This gets me an array of init objects, which contains my actual item data. There's got to be a better way.

[Chris]

After reading up a little on batch processing, I realize that the grid is really geared toward editing of grid data. i.e. changing items in the grid will trigger an update to the api of that data.

I am not editing the grid data so much as displaying it for selection. All I need to send back for the most part is a list of ids of rows that have been selected.

So I expect to have a button [ SEND SELECTED ITEMS ] that calls POST api/items and sends an array of itemIds.
The transport: update is likely overkill.

 

[Alex Hajigeorgieva]

Hi Dave,

Please accept my apology for the delay. One way to achieve the conditionally styled Kendo UI Grid rows is to utilise the dataBound event:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

You can loop over the Kendo UI Data Source view and assign the custom classes to the respective rows.

dataBound: function() {
  var dataView = this.dataSource.view();
  for(var i = 0; i < dataView.length; i++) {
    if(itemMeetsMyCondition){
      var uid = dataView[i].uid;
      this.tbody.find("tr[data-uid=" + uid + "]").addClass("myCustomClass");
    }
  }
},

The Kendo UI Grid Columns support the  width  and  template  configuration properties that can be used for more detailed customization:

- columns width: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.width
- columns template: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

Regarding the second requirement - collecting all the selected rows, there is no built-in way to collect multiple selected rows and their dataItems. However, it is easily achievable with some custom code with the steps below:

1) Configure the Kendo UI Grid as selectable: 'multiple, row'
2) Add the custom Kendo UI Grid toolbar command button 

I am not certain how you would like to send the selected items, so I am guessing it is possibly through a button on the Kendo UI Grid Toolbar. The documentation reference to toolbar customizations is available at:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar

3) Add an event handler function to the custom button
4) In the handler function, select all the rows which have "k-state-selected" class
5) Loop over the selected rows and utilise the Kendo UI Grid dataItem() method to retrieve the dataItem bound to each selected row

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem 

4) Perform the required 'POST' request.

For your convenience, I have prepared a demo which implements:
1) custom CSS classes applied at the dataBound event
2) extracting the selected dataItems IDs as described above.

http://dojo.telerik.com/alaXe

Regards,
Alex
Telerik by Progress