Angular: customizing grid

3 posts, 0 answers
  1. Dave
    Dave avatar
    5 posts
    Member since:
    Aug 2010

    Posted 18 Aug Link to this post

    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.

  2. Dave
    Dave avatar
    5 posts
    Member since:
    Aug 2010

    Posted 18 Aug in reply to Dave Link to this post

    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.

     

  3. Kendo UI is VS 2017 Ready
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    117 posts

    Posted 22 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top