Geeks With Blogs
Josh Tenenbaum Errant ramblings

 

I read a blog post a few months back about client binding your Asp.Net GridView. It was Called Bind Gridview using Jquery. I took it to heart and now I'm using it, except it doesn't handle client sorting (paging is another story). Granted this has some room for improvement and my js isn't the best…

 

Base Page method with the grid view:

 

            protected void SetHeaderAttribs(GridView grid)

            {

                  for (int i = 0; i < grid.Columns.Count; i++)

                  {

                        TableCell cell = grid.HeaderRow.Cells[i];

                        DataControlField field = grid.Columns[i];

 

                        if (!string.IsNullOrEmpty(field.SortExpression))

                        {

                              cell.Attributes.Add("sort", field.SortExpression);

                        }

                  }

            }

 

 

On the Aspx page:

 

                  <asp:GridView ID="aGrid" runat="server" AutoGenerateColumns="false" AllowPaging="false" UseAccessibleHeader="true" ShowHeaderWhenEmpty="True">

                        <Columns>

                              <asp:TemplateField HeaderText="Milestone" SortExpression="Name">

                                    <ItemTemplate>

<asp:HyperLink ID="lnkMilestoneId" runat="server" Text='<%# Eval("Name") %>' NavigateUrl='#' onclick='<%# "Edit(" + Eval("Id") + "); return false;" %>'/>

                                    </ItemTemplate>

                              </asp:TemplateField>

 

                              <asp:BoundField DataField="DateStart" HeaderText="Start Date" SortExpression="DateStart"/>

                              <asp:BoundField DataField="DateEnd" HeaderText="End Date" SortExpression="DateEnd" />

 

 

 

In my global js include file:

 

function SortJSON(data) {

 

      if ("" == currentSortField)

            return;

 

      data.d.sort(sort_by(currentSortField, currentSortAsc, function (a) { if (null != a) return a.toUpperCase(); else return null; }));

}

 

var sort_by = function (field, reverse, primer) {

      reverse = (reverse) ? -1 : 1;

 

      return function (a, b) {

 

 

        //Note my json is an IList<X>, and the property can be something like "User.Name"

            a = eval("a." + currentSortField); //a[field];

            b = eval("b." + currentSortField); //b[field];

 

            if (typeof (primer) != 'undefined') {

                  a = primer(a);

                  b = primer(b);

            }

 

            if (a < b) return reverse * -1;

            if (a > b) return reverse * 1;

            return 0;

      }

}

 

In my ajax call:

 

function Bind (data) {

 

    //This removes older results

      $("#aGrid .dataItem").remove();

 

      //Sorting call

      SortJSON(data);

 

    //Add the columns (give it a class dataItem so I can remove them cleanly with jquery above.

      for (var i = 0; i < data.d.length; i++) {

            $("#aGrid").append(

                  "<tr class='" + OddEven(i) + " dataItem'>"

 

                  + "<td><a href='#' onclick='Edit (" + data.d[i].Id + ");return false;'>" + data.d[i].Name + "</a></td>"

                  + "<td>" + data.d[i].StrDateStart + "</td>"

                  + "<td>" + data.d[i].StrDateEnd + "</td>"

 

                  + "</tr>"

            );

      }

}

 

 

Posted on Wednesday, January 19, 2011 5:49 PM | Back to top


Comments on this post: ASP.Net GridView, Client Binding, and Sorting

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Josh Tenenbaum | Powered by: GeeksWithBlogs.net