Ajax Binding and RowAction conflict.

5 posts, 1 answers
  1. Robert
    Robert avatar
    3 posts
    Member since:
    Jan 2013

    Posted 11 Jun 2013 Link to this post

    It would appear that attempting to use a RowAction (to highlight certain rows) is not working in a grid that uses Ajax binding.  I need to use Ajax binding because of the virtual scrolling.

    Code:
    @(Html.Kendo().Grid(Model.userMasterList)
        .Name("userMasterGrid")
        .Columns(col =>
        {
            col.Bound(c => c.userName);
            col.Bound(c => c.securityLevel);
            col.Bound(c => c.name);
            col.Bound(c => c.sifEmailInd).ClientTemplate("<input type='checkbox' #= sifEmailInd ? 'checked=checked': '' # disabled='disabled' ></input>");
            col.Bound(c => c.activeInd).ClientTemplate("<input type='checkbox' #= activeInd ? 'checked=checked': '' # disabled='disabled' ></input>");
            col.Bound(c => c.lastLoginDate);
            col.Bound(c => c.lastUpdatedDate);
            col.Bound(c => c.userId);
            col.Bound(c => c.leaNumber).Hidden(true);
        }
        )
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Sortable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .HtmlAttributes(new { style = "height:350px;" })
        .Events(events => events.Change("onChange"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("UserMaster", "Account"))
            .Model(model => model.Id(i => i.userId))
            )
        .RowAction(row =>
            {
                if (!row.DataItem.activeInd)
                {
                    row.HtmlAttributes["class"] = "inactiveUser";
                }
            }
            )
        )

    Any help would be appreciated

    Robert
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 13 Jun 2013 Link to this post

    Hi Robert,

     
    Please note that  the "RowAction" is available only for rows that are rendered on server side, that why when the records are loaded using Ajax request the action is not executed. In current scenario I would suggest to use the DataBound event and iterate over the current Grid rows to apply the needed changes using jQuery:

    • Add event handler for the DataBound event:  
      .Events(e => e.DataBound("onDataBound"))
    • DataBound event handler: 
      function onDataBound(e) {
          var grid = this;
          var currentRecords = grid.dataSource.view();
       
          for (var i = 0; i < currentRecords.length; i++) {
              //currentRecords[i] is the current dataItem
              if (!currentRecords[i].activeInd) {
                  grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("inactiveUser");
              }
          }
      }
    •  
    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jan Olsmar
    Jan Olsmar avatar
    35 posts
    Member since:
    Mar 2006

    Posted 01 Feb 2014 in reply to Vladimir Iliev Link to this post

    The example does not work if you using grouping.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Feb 2014 Link to this post

    Hi Jan,

    Please note that the previous solution is not supporting all possible cases and its intended to be used only for demonstration purpose (you can use it as a baseline to achieve the desired behavior). When the grid data is grouped, the collection returned by the "view" method contains only the current groups (the actual records can be found in the "items" collection of the groups). Please check the example below how to support grouped data as well:

    function onDataBound(e) {
        var grid = this;
        //check if grouping is enabled
        if (grid.dataSource.group().length) {
            var currentRecords = grid.dataSource.view();
            var temp = [];
            for (var i = 0; i < currentRecords.length; i++) {
                for (var y = 0; y < currentRecords[i].items.length; y++) {
                    temp.push(currentRecords[i].items[y]);
                }
            }
            currentRecords = temp;
        } else {
            var currentRecords = grid.dataSource.view();
        }


    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jan Olsmar
    Jan Olsmar avatar
    35 posts
    Member since:
    Mar 2006

    Posted 05 Feb 2014 in reply to Vladimir Iliev Link to this post

    OK thanks. I wrote the post just to inform other users. Took me a time to understand it didn't work for grouping. By the way I solved the problem by this code.
    function onDataBound()
      {
          var grid = this;
          grid.tbody.find('>tr').each(function(){
              var dataItem = grid.dataItem(this);
              if(dataItem.EkonOK)
              {
                  $(this).addClass('gul');
                   
                 
              }
              $(this).css('color',dataItem.AreaColor)
          })
      }
      

Back to Top
Kendo UI is VS 2017 Ready