Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml/json based data source using Ajax to load the content.
Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.
Many of the developers who are still confused how to use Flexigrid in ASP.NET may find this article very helpful. Flexigrid is basically a jQuery grid that has an extensive set of features. While using Flexigrid we usually retrieve data from the database via Web Services. It has features for performing searches and Add, Update and Delete operations on the data displayed in the grid. It has provision for column resizing.
Many of the examples that you find on internet are usually having SQL Server as the database but this demo is based on Oracle as the back end. I would also like to mention that there is no provision of client side paging on Flexigrid yeah I know it sucks but that’s how it is.
In order to better understand the functioning of the grid and how to use it create a table in the database whose data we wish to be displayed in the Flexigrid. I have created a table whose data I want to be displayed in the grid, I have also create a stored procedure by the name of “Flex” to get the data from that table.
I have an entity class by the name of Employee in my code which is as follows:
|
1 2 3 4 5 6 7 |
<span class="code-keyword">public</span> <span class="code-keyword">class</span> Employee{ <span class="code-keyword">public</span> <span class="code-keyword">int</span> id { <span class="code-keyword">get</span>; <span class="code-keyword">set</span>; } <span class="code-keyword">public</span> <span class="code-keyword">string</span> fName { <span class="code-keyword">get</span>; <span class="code-keyword">set</span>; } <span class="code-keyword">public</span> <span class="code-keyword">string</span> lName { <span class="code-keyword">get</span>; <span class="code-keyword">set</span>; } <span class="code-keyword">public</span> <span class="code-keyword">string</span> uRole { <span class="code-keyword">get</span>; <span class="code-keyword">set</span>; } <span class="code-keyword">public</span> <span class="code-keyword">string</span> sal { <span class="code-keyword">get</span>; <span class="code-keyword">set</span>; } } |
This method will establish connectivity with the database and return data in JSON format which we can feed to any jQuery table. This will serves as the input for our flexigrid.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] <span class="code-keyword">public</span> <span class="code-keyword">string</span> GetData() { List<Employee> lst = <span class="code-keyword">new</span> List<Employee>(); <span class="code-keyword">string</span> strConn = ConfigurationManager.ConnectionStrings[<span class="code-string">"</span><span class="code-string">FlexDb"</span>].ConnectionString; OleDbConnection cnx = <span class="code-keyword">new</span> OleDbConnection(strConn); OleDbCommand cmd = <span class="code-keyword">new</span> OleDbCommand(<span class="code-string">"</span><span class="code-string">Flex"</span>,cnx); cnx.Open(); cmd.CommandType = CommandType.StoredProcedure; OleDbDataReader dataReader = cmd.ExecuteReader(); <span class="code-keyword">while</span> (dataReader.Read()) { Employee e1 = <span class="code-keyword">new</span> Employee(); e1.id = Convert.ToInt32(dataReader[<span class="code-string">"</span><span class="code-string">USER_ID"</span>]); e1.fName = dataReader[<span class="code-string">"</span><span class="code-string">FIRST_NAME"</span>].ToString(); e1.lName = dataReader[<span class="code-string">"</span><span class="code-string">LAST_NAME"</span>].ToString(); e1.uRole = dataReader[<span class="code-string">"</span><span class="code-string">USER_ROLE"</span>].ToString(); e1.sal = dataReader[<span class="code-string">"</span><span class="code-string">SALARY"</span>].ToString(); lst.Add(e1); } <span class="code-keyword">var</span> jss = <span class="code-keyword">new</span> JavaScriptSerializer(); <span class="code-keyword">return</span> jss.Serialize(lst); } |
Calling the webservice method from our .aspx page
Create an ASPX page to the site. Include flexigrid.cs, flexigrid.js and jquery.js to the header section of the page. I have used HTML5 in my project, my webservice name is FlexService. I am calling the GetData method of my webservice and retrieving json from the method and feeding that to my flexigrid. I will emphasize on this, please make sure to add a jquery reference before the flexigrid.js reference.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<span class="code-keyword"><</span><span class="code-leadattribute">!DOCTYPE</span> <span class="code-attribute">html</span> <span class="code-keyword">/</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">html</span> <span class="code-attribute">lang</span><span class="code-keyword">="</span><span class="code-keyword">en"</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">head</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">meta</span> <span class="code-attribute">charset</span><span class="code-keyword">="</span><span class="code-keyword">UTF-8"</span> <span class="code-keyword">/</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">title</span><span class="code-keyword">></span>Flex Demo<span class="code-keyword"><</span><span class="code-leadattribute">/title</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">Scripts/jquery-1.2.6.min.js"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">></span><span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">link</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">Stylesheet"</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">Styles/FlexCSS/flexigrid.css"</span> <span class="code-keyword">/</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">link</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">Stylesheet"</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">Styles/FlexCSS/flexigrid.pack.css"</span> <span class="code-keyword">/</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"</span><span class="code-keyword">></span><span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"</span><span class="code-keyword">></span><span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">Scripts/FlexJS/flexigrid.js"</span><span class="code-keyword">></span><span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">Scripts/FlexJS/flexigrid.pack.js"</span><span class="code-keyword">></span><span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">link</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"</span> <span class="code-keyword">/</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/head</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">body</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">form</span> <span class="code-attribute">runat</span><span class="code-keyword">="</span><span class="code-keyword">server"</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">div</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">table</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">FlexTable"</span> <span class="code-attribute">runat</span><span class="code-keyword">="</span><span class="code-keyword">server"</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/table</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/div</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/form</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/body</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">script</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">></span> $(<span class="code-sdkkeyword">document</span>).ready(<span class="code-keyword">function</span> () { <span class="code-keyword">var</span> obj; $.ajax({ type: <span class="code-string">"</span><span class="code-string">post"</span>, contentType: <span class="code-string">"</span><span class="code-string">application/json"</span>, url: <span class="code-string">"</span><span class="code-string">FlexService.asmx/GetData"</span>, data: <span class="code-string">"</span><span class="code-string">{}"</span>, dataType: <span class="code-string">'</span><span class="code-string">json'</span>, success: <span class="code-keyword">function</span> (result) { obj = $.parseJSON(result.d); <span class="code-comment">//</span><span class="code-comment">add data</span> $(<span class="code-string">"</span><span class="code-string">#FlexTable"</span>).flexAddData(formatEmployeeResults(obj)); } }); <span class="code-comment">//</span><span class="code-comment"> init flexigrid</span> $(<span class="code-string">"</span><span class="code-string">#FlexTable"</span>).flexigrid({ dataType: <span class="code-string">'</span><span class="code-string">json'</span>, colModel: [{ display: <span class="code-string">'</span><span class="code-string">ID'</span>, name: <span class="code-string">'</span><span class="code-string">id'</span>, width: <span class="code-digit">90</span>, sortable: <span class="code-keyword">true</span>, align: <span class="code-string">'</span><span class="code-string">center'</span> }, { display: <span class="code-string">'</span><span class="code-string">First Name'</span>, name: <span class="code-string">'</span><span class="code-string">fName'</span>, width: <span class="code-digit">120</span>, sortable: <span class="code-keyword">true</span>, align: <span class="code-string">'</span><span class="code-string">left'</span> }, { display: <span class="code-string">'</span><span class="code-string">Last Name'</span>, name: <span class="code-string">'</span><span class="code-string">lName'</span>, width: <span class="code-digit">120</span>, sortable: <span class="code-keyword">true</span>, align: <span class="code-string">'</span><span class="code-string">left'</span> }, { display: <span class="code-string">'</span><span class="code-string">Role'</span>, name: <span class="code-string">'</span><span class="code-string">uRole'</span>, width: <span class="code-digit">120</span>, sortable: <span class="code-keyword">true</span>, align: <span class="code-string">'</span><span class="code-string">left'</span> }, { display: <span class="code-string">'</span><span class="code-string">Salary'</span>, name: <span class="code-string">'</span><span class="code-string">sal'</span>, width: <span class="code-digit">80</span>, sortable: <span class="code-keyword">true</span>, align: <span class="code-string">'</span><span class="code-string">left'</span> }], buttons: [{ name: <span class="code-string">'</span><span class="code-string">Add'</span>, bclass: <span class="code-string">'</span><span class="code-string">add'</span>, onpress: <span class="code-keyword">function</span> () { } }, { name: <span class="code-string">'</span><span class="code-string">Edit'</span>, bclass: <span class="code-string">'</span><span class="code-string">edit'</span>, onpress: <span class="code-keyword">function</span> () { } }, { name: <span class="code-string">'</span><span class="code-string">Delete'</span>, bclass: <span class="code-string">'</span><span class="code-string">delete'</span>, onpress: <span class="code-keyword">function</span> () { } }, { separator: <span class="code-keyword">true</span> } ], searchitems: [{ display: <span class="code-string">'</span><span class="code-string">ID'</span>, name: <span class="code-string">'</span><span class="code-string">id'</span> }, { display: <span class="code-string">'</span><span class="code-string">First Name'</span>, name: <span class="code-string">'</span><span class="code-string">fName'</span>, isdefault: <span class="code-keyword">true</span> }], sortname: <span class="code-string">"</span><span class="code-string">id"</span>, sortorder: <span class="code-string">"</span><span class="code-string">asc"</span>, usepager: <span class="code-keyword">true</span>, title: <span class="code-string">'</span><span class="code-string">Employee'</span>, useRp: <span class="code-keyword">true</span>, rp: <span class="code-digit">5</span>, showTableToggleBtn: <span class="code-keyword">true</span>, width: <span class="code-digit">590</span>, height: <span class="code-digit">200</span> }); <span class="code-keyword">function</span> formatEmployeeResults(Employee) { <span class="code-keyword">var</span> rows = <span class="code-sdkkeyword">Array</span>(); <span class="code-keyword">for</span> (i = <span class="code-digit">0</span>; i < Employee.length; i++) { <span class="code-keyword">var</span> item = Employee[i]; rows.push({ cell: [item.id, item.fName, item.lName, item.uRole, item.sal] }); } <span class="code-keyword">return</span> { total: Employee.length, page: <span class="code-digit">1</span>, rows: rows } } }); <span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">script</span><span class="code-keyword">></span> <span class="code-keyword"><</span><span class="code-leadattribute">/html</span><span class="code-keyword">></span> |
No #1 Recommended ASP.NET Core Hosting
ASPHostPortal.com
ASPHostPortal.com is the leading provider of Windows hosting and affordable ASP.NET MVC Hosting. ASPHostPortal proudly working to help grow the backbone of the Internet, the millions of individuals, families, micro-businesses, small business, and fledgling online businesses. ASPHostPortal has ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2015, .NET 5/ASP.NET 4.5.2, ASP.NET MVC 6.0/5.2, Silverlight 6 and Visual Studio Lightswitch, ASPHostPortal guarantees the highest quality product, top security, and unshakeable reliability, carefully chose high-quality servers, networking, and infrastructure equipment to ensure the utmost reliability.
HostForLIFE.eu
HostForLIFE.eu guarantees 99.9% uptime for their professional ASP.NET MVC hosting and actually implements the guarantee in practice. HostForLIFE.eu is the service are excellent and the features of the web hosting plan are even greater than many hosting. HostForLIFE.eu offer IT professionals more advanced features and the latest technology. Relibility, Stability and Performance of servers remain and TOP priority. Even basic service plans are equipped with standard service level agreements for 99.99% uptime. Advanced options raise the bar to 99.99%. HostForLIFE.eu revolutionized hosting with Plesk Control Panel, a Web-based interface that provides customers with 24×7 access to their server and site configuration tools.
DiscountService.com.au
DiscountService.com.au is The Best and Cheap ASP.NET MVC Hosting. DiscountService.com.au was established to cater to an under served market in the hosting industry web hosting for customers who want excellent service. DiscountService.com.au guarantees the highest quality product, top security, and unshakeable reliability, carefully chose high-quality servers, networking, and infrastructure equipment to ensure the utmost reliability. DiscountService.com.au has ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2015, .NET 5/ASP.NET 4.5.2, ASP.NET MVC 6.0/5.2, Silverlight 6 and Visual Studio Lightswitch. DiscountService.com.au is devoted to offering the best Windows hosting solution for you.