This project is read-only.

Clientside sorting

Sep 15, 2011 at 4:51 PM
Edited Sep 15, 2011 at 4:52 PM

Hi,

I got this grid defnition and I would like some sorting on the 4 headers and if possible already do, client side a sort on the first column. How could I achieve this? (server side sorting is not possible because I retrieve all data dynamiccaly and need to sort on different pages on different variables).

            <table cellspacing="0">
                    <thead>
   
                        <tr>
                            <td class="t-header"><strong>@Global.NameSoftware</strong></td>
                            <td class="t-header"><strong>@Global.Vendor</strong></td>
                            <td class="t-header"><strong>@Global.Version</strong></td>
                            <td class="t-header"><strong>@Global.LicenceRequired</strong></td>
                            <td class="t-header"><strong></strong></td>
                        </tr>
                    </thead>
                    <tbody>
 
                        @Html.DataGridFor(x => x.Software, ItemContainerType.tr, "SoftwareItemEdit", "SoftwareItemDisplay", null, "SoftwareItemInsert", itemCss: "normalRow", altItemCss: "alternateRow")
                    </tbody>
                </table>


Patrick
Coordinator
Sep 15, 2011 at 5:38 PM

The DataGridFor helper has not client side support for paging, sorting or filtering, just server side, because all this operations are performed by creating lambrda expressions that are then

passed to the Action Method and can be used to issues queryes to the db. However, In a short time I will implement a grid powerfull as the DatagridFor completely client side ....and I will make it available as a plugin by using 

client side templates.  In the meantime you can use yourself Client Side templates to implement easily a grid with client side sorting. Client Side Templates are explained here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=Client-Side%20Templates 

In turn Client side templates rely on the concept of client side view model and client side bindings:  http://mvccontrolstoolkit.codeplex.com/wikipage?title=Client-Side%20ViewModel%20%26%20Bindings 

There are some tutorials about using client side templates to perform complex operations on lists on the client side:

Before you start reading all this, I can explain the basic idea:

1) You transfer part of your ViewModel to javascript, and works with this client side ViowModel on the Client side. When user has finished his operation and submits the form the client side ViewModel with its

updated information  is transformed into .Net datastructure and is inserted back in the original serverside ViewModel. This way it is available to the Action Method. All these operations are performed automatically by the Mvc Controls Toolkit.

Both client side and server side validation are performed on the ViewModel with the standard Mvc instructions.

2) Once you have the Client Side ViewModel on the client side you can "bind" some properties to html controls or also to some advanced Mvc Controls Toolkit Controls. All bindings are defined with Html helpers 

as everything were happening on the server side.

3) You can bind a list of records of the client side ViewModel to a client side template. This way all records are swown with that template, and you can implement a completely customizable grid. Client side templates are defined in a similar way to the templates of the datagridfor,

that is with Razor helpers, partial views, etc.

If you implement your grid this way, sorting is easy: You just sort the array in the client side ViewModel and automatically all rosw created with the template that is bound to this array...are sorted on the screen, because

of the binding between them and the array...easy. In order to trigger a sorting you just "bind" a normal Html button to the function that perform the sorting....and do this for all column of the grid.

Sep 16, 2011 at 9:28 AM

Ill try to figure this out this weekend...