Thank you for purchasing Arthaus Custom Grid. If you have any questions that have not been answered below, or you didn't find the answer in our demo project, feel free to contact us via our CodeCanyon account.

Thanks again!

The purpose of this grid control is to help you with your data display in table view interface with paging, sorting and filtering. The grid control can be very useful tool for building admin report pages with huge number of data records. The component is using server side paging, sorting and filtering and any taken grid action is refreshing the page.

You will need previous ASP.NET MVC3 programming experience to be able to use this component.

System Requirements

• Microsoft Visual Studio 2010+
• ASP.NET MVC
• MSSQL server or another database server as optional component
• Newtonsoft.Json reference included in your bin
• jQuery 1.5+
• jQuery UI 1.8+
• jQuery ContextMenu script

Here is a list of features that this custom grid control has:

• Displaying data in table view, with easy css customization
• Data Pagination with two different pager types (scroll view and numbers view)
• Data Sorting
• Data Search/Filtering with different type of filter options for numbers, string or date fields
• Data formatting, by using the simple String.Format method
• Multi-language
• Custom html for each column, which allows you to add links, icons, javascript code in grid cells
• Highly customizable
• Compatible with all MVC versions

Adding Grid Reference

The image below shows how to add a reference to the Arthaus CustomGrid component in your project.

CustomGrid Folder

Create a folder with name "CustomGrid". The folder needs to have write permissions so that CustomGrid.js is generated. Once it is generated you can remove the write permissions.

For multiple languages add "Language" folder inside the "CustomGrid" folder. There you can add a .json file for each supported language named according to the predefined CultureInfo names and identifiers accepted and used by CultureInfo Class in the System.Globalization namespace.

You can see a sample .json file here.

Including CSS and JavaScript Files

This is example of adding a required JavaScript and CSS files in your master template:

<link href="Content/CustomGrid.css" rel="stylesheet" type="text/css" />
<link href="Content/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>    
<script src="Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>

Razor View - Code

@CustomGrid.CustomGrid.DrawGrid("cl", Model,
	CustomGrid.CustomGrid.columns(
		CustomGrid.CustomGrid.column("First Name", "{0}", new string[] { "FirstName", "ID" }, true, "left", "text"),
		CustomGrid.CustomGrid.column("Last Name", "LastName", true, "left", "text"),
		CustomGrid.CustomGrid.column("Date Created", "{0:yyyy-MM-dd}", new string[] { "DateCreated" }, true, "left", "date"),             
		CustomGrid.CustomGrid.column("Decimal Value", "{0:c}", new string[] { "DoubleValue" }, true, "right", "number")
	), Request.QueryString)
@CustomGrid.CustomGrid.PagingNumbers("cl", Request.QueryString, ViewBag.totalRecords, "20")

Action Processor - Sample Code

This is just a sample code how you can fill your data collection with proper data by using LINQ approach with DynamicQueryable component from Mircrosoft and QueryParams from Arthaus. You can use any other code that you want, but have in mind that the grid is expecting as input data parameter to receive collection of data objects.

//database LINQ connection object defined in User model
SampleSQLDB db = new SampleSQLDB();

//get paging values from the query string
int pageNum = CustomGrid.QueryParams.getPageNumber("cl", Request.QueryString);
int pageSize = CustomGrid.QueryParams.getPageSize("cl", Request.QueryString);

//get sorting values from query string
string sort = CustomGrid.QueryParams.getSortField("cl", Request.QueryString, new User(), "ID");
string stype = CustomGrid.QueryParams.getSortType("cl", Request.QueryString);

//get filter where conditions and values from the query string
List<object> whereValues = new List<object>();
string whereConditions = "";
whereConditions += CustomGrid.QueryParams.getLINQQueryParam("cl", "ID", Request.QueryString, whereValues);
whereConditions += CustomGrid.QueryParams.getLINQQueryParam("cl", "FirstName", Request.QueryString, whereValues);
//... other where conditios 

//get data from database            
var sampleUser = db.Users.Select(i => i);
sampleUser = sampleUser.AsQueryable().Where("1=1 " + whereConditions, whereValues.ToArray()).OrderBy(sort + " " + stype);

//count the total number of records
ViewBag.totalRecords = sampleUser.Count();

//get only required page data by skiping the other records
sampleUser = sampleUser.Skip(pageSize * (pageNum - 1)).Take(pageSize);

return View(sampleUser.ToList());
									

Follow this link to see the grid in action! DEMO

Click here for detailed documentation.