Tuesday, October 9, 2012

Telerik MVC Grid - Row and Column manipuation using Javascript

Draft Version: I will update the post later.

For telerik grid, we can manipulate the row and column hiding and manipulation in the following manner:

<script type="text/javascript">
//Processing a particular row and cell based on condition. Modify the html and add your own HTML.
 function onRowDataBound(e) {
var grid = $(this).data('tGrid');
var row = e.row;
var dataItem = e.dataItem;
var trId = dataItem.TransactionId;
var rdAmt = dataItem.RewardSalePrice;
//For reward amount = 0, means no detail, so remove the (+) sign.
 if (rdAmt == 0) {
     row.cells[0].innerHTML ="&nbsp;";
}

//For transaction id = 0 means no transaction associated with this point, so no link is required. 
if (trId == 0)
 row.cells[1].innerHTML ='<span>' + dataItem.TransactionDateString + '</span>';
else
 row.cells[1].innerHTML = "<a onclick = $.popup('Transaction/_TransactionDetailsPage?id=" + dataItem.TransactionId + "');>" + dataItem.TransactionDateString + "</a>"; // row.cells[1].innerHTML;
}


//Used for show/hide grid column.

 function onDataBound(e) {
//Hide first column if there is no  data.
var grid = $(this).data('tGrid');
var gridData = grid.data;
var hasData = false;
for (var i = 0; i < gridData.length; i++) {
if (gridData[i].RewardSalePrice > 0) {
 hasData = true;
break;
    }
}
//Show or hide column with index.
if (gridData.length > 0 && !hasData)
 grid.hideColumn(0);
else
 grid.showColumn(0);
}


//Used to pass parameters to the controller action
 function onDataBinding(e) {
        e.data = {
            EmailAddress: $('#EmailAddress').val(),
            PostalCode: $('#PostalCode').val(),
            PhoneNumber: $('#PhoneNumber').val(),
            CardNumber: $('#CardNumber').val(),
            CountryCode: $('#CountryCode').val(),
            LastName: $('#LastName').val(),
            FirstName: $('#FirstName').val()
        };
    }


 
</script>

On grid client event, add the following events:

.ClientEvents(events =>
{
events.OnRowDataBound(
"onRowDataBound");

 events.OnDataBound("onDataBound");
events.OnDataBinding("onDataBinding");
})


No comments:

Post a Comment