Click here to Skip to main content
Click here to Skip to main content

Using Flexigrid in ASP.NET

, 16 Dec 2013
Rate this:
Please Sign up or sign in to vote.
This article gives a detailed explanation of how to use Flexigrid in ASP.NET

Introduction

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.

Background 

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.

Using the code 

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: 

public class Employee{
    public int id { get; set; }
    public string fName { get; set; }
    public string lName { get; set; }
    public string uRole { get; set; }
    public string sal { get; set; }
}

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.

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetData()
{
    List<Employee> lst = new List<Employee>();
    string strConn = ConfigurationManager.ConnectionStrings["FlexDb"].ConnectionString;
    OleDbConnection cnx = new OleDbConnection(strConn);
    OleDbCommand cmd = new OleDbCommand("Flex",cnx);
    cnx.Open();
    cmd.CommandType = CommandType.StoredProcedure;
    OleDbDataReader dataReader = cmd.ExecuteReader();
    while (dataReader.Read())
    {
        Employee e1 = new Employee();
        e1.id = Convert.ToInt32(dataReader["USER_ID"]);
        e1.fName = dataReader["FIRST_NAME"].ToString();
        e1.lName = dataReader["LAST_NAME"].ToString();
        e1.uRole = dataReader["USER_ROLE"].ToString();
        e1.sal = dataReader["SALARY"].ToString();
        lst.Add(e1);
    }

    var jss = new JavaScriptSerializer();
    return 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.

<!DOCTYPE html />
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Flex Demo</title>
        <script src="Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
        <link rel="Stylesheet" href="Styles/FlexCSS/flexigrid.css" />
        <link rel="Stylesheet" href="Styles/FlexCSS/flexigrid.pack.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="Scripts/FlexJS/flexigrid.js"></script>
        <script type="text/javascript" src="Scripts/FlexJS/flexigrid.pack.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
    </head>
    <body>
    <form runat="server">
    <div>
        <table id="FlexTable" runat="server">
        </table>
    </div>
    </form>
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
                var obj;
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "FlexService.asmx/GetData",
                    data: "{}",
                    dataType: 'json',
                    success: function (result) {
                        obj = $.parseJSON(result.d);
                        //add data
                        $("#FlexTable").flexAddData(formatEmployeeResults(obj));
                    }
                });

                // init flexigrid
              
                            $("#FlexTable").flexigrid({
                               
                                dataType: 'json',
                                colModel: [{
                                    display: 'ID',
                                    name: 'id',
                                    width: 90,
                                    sortable: true,
                                    align: 'center'
                                }, {
                                    display: 'First Name',
                                    name: 'fName',
                                    width: 120,
                                    sortable: true,
                                    align: 'left'
                                }, {
                                    display: 'Last Name',
                                    name: 'lName',
                                    width: 120,
                                    sortable: true,
                                    align: 'left'
                                }, {
                                    display: 'Role',
                                    name: 'uRole',
                                    width: 120,
                                    sortable: true,
                                    align: 'left'
                                },

                            {
                                display: 'Salary',
                                name: 'sal',
                                width: 80,
                                sortable: true,
                                align: 'left'
                            }], 
                            
                            buttons: [{ name: 'Add', bclass: 'add', onpress: function () { } },
                              { name: 'Edit', bclass: 'edit', onpress: function () { } },
                              { name: 'Delete', bclass: 'delete', onpress: function () { } },
                              { separator: true }
                              ],

                                searchitems: [{
                                    display: 'ID',
                                    name: 'id'
                                }, {
                                    display: 'First Name',
                                    name: 'fName',
                                    isdefault: true
                                }],
                                sortname: "id",
                                sortorder: "asc",
                                usepager: true,
                                title: 'Employee',
                                useRp: true,
                                rp: 5,
                                showTableToggleBtn: true,
                                width: 590,
                                height: 200

                            });

                function formatEmployeeResults(Employee) {

                    var rows = Array();

                    for (i = 0; i < Employee.length; i++) {
                        var item = Employee[i];
                        rows.push({ cell: [item.id,
                                           item.fName,
                                           item.lName,
                                           item.uRole,
                                           item.sal]

                        });
                    }
                    return {
                        total: Employee.length,
                        page: 1,
                        rows: rows
                    }
                }
            });
       
    </script>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Shahid Bhat
Software Developer (Senior) White Page International
India India
No Biography provided
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionThanks Pinmemberidreeskhan17-May-14 3:34 
GeneralMy vote of 5 Pinmemberjerome dela cruz23-Apr-14 19:42 
Suggestionprovide source code Pinmembersrinivaskumar pasumarthi18-Dec-13 20:37 
Questionnice PinmemberKilla_BRE14-Dec-13 23:27 
QuestionCode sample download Pinmemberbommezijn9-Dec-13 6:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 16 Dec 2013
Article Copyright 2013 by Shahid Bhat
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid