Ajax Binding and RowAction conflict.

[Robert]

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

[Vladimir Iliev]

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

[Jan Olsmar]

The example does not work if you using grouping.

[Vladimir Iliev]

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

[Jan Olsmar]

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)
      })
  }