This is a migrated thread and some comments may be shown as answers.

Ajax Binding and RowAction conflict.

4 Answers 642 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 11 Jun 2013, 05:00 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 13 Jun 2013, 08:21 AM
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!
0
Jan Olsmar
Top achievements
Rank 1
answered on 01 Feb 2014, 10:00 AM
The example does not work if you using grouping.
0
Vladimir Iliev
Telerik team
answered on 05 Feb 2014, 09:02 AM
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!
0
Jan Olsmar
Top achievements
Rank 1
answered on 05 Feb 2014, 09:57 AM
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)
      })
  }
  

Tags
Grid
Asked by
Robert
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Jan Olsmar
Top achievements
Rank 1
Share this question
or