Query: Grid - Clientside sorting, paging, grouping and Filtering?

[Nimish Bhonsale]

Hi,

I liked the grid and its features so far as I evaluate your product.

However, I have couple of questions as mentioned below:

Question 1:
-------------
I wanted to know if the Grid allows me to use sorting, paging and grouping on client side only.

OR

I do not want to hit the database and call the GetData() method below? Instead I want to provide the users with "Refresh" button to load the grid with the latest data. Could you suggest the way to go about this? Do I have to provide the data each time the user needs to Sort a column using Syncfusion MVC Grid?

///

/// Sorting Request is mapped to this method
/// This method invokes the HtmlActionResult from the Grid.
/// Required response is generated.
///

/// HtmlActionResult which returns Grid
AcceptVerbs(HttpVerbs.Post)]
public ActionResult SortPageAction()
{
IEnumerable data = GetData();
return data.GridActions();
}

Question 2:
-------------
Does the grid have data filtering capabilities like a dropdown on top of each column or something?


Regards,
Nimish

[Muthukumar L]

Hi Nimish,

Thank you for evaluating Syncfusion products.

Essential studio Volume 3 RC is available for download from the following location.
We request you to use our latest version. It is more stable with many new features.

http://www.syncfusion.com/support/forums/general/86322/essential-studio-2009-vol3-rc-v73018-available-for-download


Paging

Paging can be performed in the clientside using the following API
set_currentIndex(pageNumber);

Note: AllowPaging Server side property should be enabled to make this work.

Please refer the following code snippet for Paging:

Controller
[C#]
GridPropertiesModel gridModel= new GridPropertiesModel();
gridModel.DataSource = new StudentDataContext().Student;
gridModel.AllowPaging = true;
gridModel.PrimaryKeyColumns.Add("CourseID");

View
[JavaScript]
/// find the clientside object with the Grid Id “Grid1“
var gridObject= $find("Grid1");
/// page number 10 is provided as parameter.
gridObject.set_currentIndex(10);

Sorting

Sorting can be performed in the clientside using the following API
• DoSorting(ColumnName, Direction)
• Set_AllowSorting(true\false)
Please refer the following code snippet for Sorting

Controller
[C#]
GridPropertiesModel gridModel= new GridPropertiesModel();
gridModel.DataSource = new StudentDataContext().Student;
gridModel.PrimaryKeyColumns.Add("CourseID");

View
[JavaScript]
/// find the clientside object with the Grid Id “Grid1“
var gridObject = $find("Grid1");
gridObject.set_AllowSorting(true);
/// Title column is sorted in Descending Order
element.DoSorting(“Title”,”Descending”);

Grouping

Grouping can be performed in the clientside using the following API

set_AllowGrouping(true/false)
GroupBy(columnName)
UnGroupBy(columnName)

Please Refer the following Code snippet for Grouping

Controller
[C#]
GridPropertiesModel gridModel= new GridPropertiesModel();
gridModel.DataSource = new StudentDataContext().Student;
gridModel.PrimaryKeyColumns.Add("CourseID");

View
[Jscript]
/// find the clientside object with the Grid Id “Grid1“
var gridObject = $find("Grid1");
///Enable Grouping
gridObject.set_AllowGrouping(true);
/// Grid is grouped by CGPA column.
gridObject.GroupBy(CGPA);
/// Used for un grouping the grouped column
gridObject.UnGroupBy(CGPA);

Note: Group Drop Area will not be created when grouping enabled is from the client side. A column grouped by code wont be added in Group Drop area.
Binding Datasource for Each Time

As per the MVC Architecture, we are not persisting the data source. So it should be binded every time.

Filtering

we regret to let you know that currently we don’t support filtering. This feature can be expected in our Volume 4 release.

Please let us know if this helps you.

Thanks,
Muthukumar.L

[Nimish]

Thank you for your reply.

How do I associate a Javascript function with the grid (Page click, Column click or Group drag and drop) action?

[Muthukumar L]

Hi Nimish,

Thanks for your interest in Syncfusion products.

Page Click:

Page click can be associated by using “onPagerClick” Java script event

Please refer the following code snippet To associate page click

[JScript]

/// Grid1 – ID of the Grid

///$find(id) -> returns the object of the matched id

/// get_Pager() Used to Get the Pager object

var pager = $find("Grid1").get_Pager();

pager.add_onPagerClick(Function.createDelegate(pager, function(sender, args) {

/// args.getRequiredPageNumber - Number of the Page in being requested from server.

var page = args.getRequiredPageNumber();

// args.getFrom() - Start index of the page.

var startIndex = args.getFrom();

}));


Group Drag Drop:


Group Drag Drop can be associated by using “groupDrop” Java script event.


This event is triggered when the dragged column is dropped on the group drop area.


Please refer the following code snippet for Group Drag Drop Event

[JScript]

// get_ColumnDragAndDropManager() – Used to Get the Column Drag Drop manager object which is having the groupDrop event

var grid = $find("Grid1").get_ColumnDragAndDropManager();

grid.add_groupDrop(Function.createDelegate(grid, function(sender, args) {

// cellIndex - Zero based Index of the column is being dragged

var cellIndex = args.getColumnIndex();

// groupedCell - Object of the Headercell of the column is being grouped

var groupedCell = args.getCurrentCell();

}));



Please let us know if this helps you.



Thanks,

Muthukumar.L