All posts

What will come with RadGrid for ASP.NET AJAX Q2 2008?

Wednesday, July 02, 2008

In a series of posts I will walk through some of the new features for RadGrid for ASP.NET AJAX Q2 2008. Here is the first part:

- global cancelable client-side Command event which will be raised for all grid post-back commands (paging, sorting, filtering, group/ungroup, etc.). Example:

<script type="text/javascript"> 
function RadGrid1_Command(sender, args) 
{ 
  alert(String.format("CommandName:{0}, CommandArgument: {1}", args.get_commandName(), args.get_commandArgument())); 
  args.set_cancel(true); 
} 
</script> 
 
<telerik:RadGrid ID="RadGrid1" PageSize="2" Skin="Sunset" runat="server" AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="true" GridLines="None"> 
 <MasterTableView AllowMultiColumnSorting="true" /> 
 <PagerStyle Mode="NextPrevAndNumeric" /> 
 <ClientSettings> 
   <ClientEvents OnCommand="RadGrid1_Command" /> 
 </ClientSettings> 
</telerik:RadGrid> 

 

 - client-side sort expressions. Example:

function RadGrid1_Command(sender, args) 
{ 
    args.set_cancel(true); 
 
    // collection of Telerik.Web.UI.GridSortExpression 
    var sortExpressions = sender.get_masterTableView().get_sortExpressions();  
 
    // GridSortExpression properties: 
    if(sortExpressions.length > 0) 
    { 
        var expression = sortExpressions[0]; 
        var fieldName = expression.get_fieldName(); 
 
        var sortOrder = expression.get_sortOrder(); 
        // Telerik.Web.UI.GridSortOrder (enum): 
        //      Telerik.Web.UI.GridSortOrder.None 
        //      Telerik.Web.UI.GridSortOrder.Ascending 
        //      Telerik.Web.UI.GridSortOrder.Descending 
    } 
     
    // toString() will create coma separated string of all expressions  
 
    alert(sortExpressions.toString());  
} 

 
 - client-side filter expressions. Example:

function RadGrid1_Command(sender, args) 
{ 
    args.set_cancel(true); 
 
    // collection of Telerik.Web.UI.GridFilterExpression 
    var filterExpressions = sender.get_masterTableView().get_filterExpressions();  
     
    // GridFilterExpression properties: 
    if(filterExpressions.length > 0) 
    { 
        var expression = filterExpressions[0]; 
        var fieldName = expression.get_fieldName(); 
        var fieldValue = expression.get_fieldValue(); 
        var columnUniqueName = expression.get_columnUniqueName(); 
 
        // enum Telerik.Web.UI.GridFilterFunction 
        var filterFunction = expression.get_filterFunction();  
 
        /*
        Telerik.Web.UI.GridFilterFunction.prototype = 
        {
            NoFilter                : 0,
            Contains                : 1,
            DoesNotContain          : 2,
            StartsWith              : 3,
            EndsWith                : 4,
            EqualTo                 : 5,
            NotEqualTo              : 6,
            GreaterThan             : 7,
            LessThan                : 8,
            GreaterThanOrEqualTo    : 9,
            LessThanOrEqualTo       : 10,
            Between                 : 11,
            NotBetween              : 12,
            IsEmpty                 : 13,
            NotIsEmpty              : 14,
            IsNull                  : 15,
            NotIsNull               : 16,
            Custom                  : 17
        };
        */ 
 
      // toString() will create SQL syntax representing this expression: 
      var asString = expression.toString();  
    } 
 
    // toString() will create string of all expressions with AND 
    alert(filterExpressions.toString());  
} 
 

 

- client-side properties for current page index, virtual items count and multi column sorting. Example:

 
  // get MasterTableView 
  var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
 
  // get/set current page index 
  tableView.set_currentPageIndex(1); 
  var currentPageIndex = tableView.get_currentPageIndex(); 
 
  // get/set virtual item count 
  tableView.set_virtualItemCount(100); 
  var virtualItemCount = tableView.get_virtualItemCount(); 
 
  // toggle multi column sorting 
  tableView.set_allowMultiColumnSorting(!tableView.get_allowMultiColumnSorting()); 
 

 

- client-side property for grid data source and dataBind() method. Example:

// get MasterTableView 
var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
 
// set data source 
tableView.set_dataSource(myDataSource); 
 
// data bind 
tableView.dataBind(); 
 

Enjoy!

Posted by: Vladimir Enchev

Facebook DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Furl it!

Comments  4

  • 3 Jul, 06:12 AM

    Interesting post. Could you be more explicit about grid data sources? In your sample what is the type/content of myDataSource. Is this an array of JavaScript objects or is this a Client Data Source as defined in ASP.NET AJAX Roadmap (http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=14924) ? Will it be possible to add a single row to the table or will we need to rebind the grid everytime we add a new entry in myDataSource? BR, Laurent

    Laurent

  • 3 Jul, 07:50 AM

    Hi Laurent, You can use any collection of objects serialized from ScriptManager PageMethod or WebService. I will post an example later today or tomorrow. Vlad

    Vlad

  • 6 May, 12:26 AM

    Hi Vlad, do you have an alternative pattern doing this using an object data source on the server side? I'm struggling to get this working with Linq and have not been able to find much on the subject

    Cino

  • 18 Jun, 01:42 PM

    how can i get the first ClientDataKeyNames inside masterTableView?

    I have a dinamic radgrid that create and loads columns in codebehind so the datakey name will change... i can't use eventArgs.getDataKeyValue("numRequestID") because numRequestID just work in first case...

    Can someone help.

    Thks

    mteodoro

Post a comment!
  4. Formatting options
       
     
    		 
    		 
     
       

  5. Security image