Binding json with flexigrid in ASP.NET

Question

I am using a flexigrid in ASP.NET, I am having trouble binding the JSON data with the flexigrid I get the JSOn response from the web service but it doesn't bind with the grid and doesn't display the grid, Where am I wrong. I am using a webservice to return the JSON data , Here is the code which I am using.Thanks.

My js function to get data from the webservice and bind the json with flexigrid

$(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'}],

   searchitems: [{display: 'ID', name: 'id'}, 
                 {display: 'First Name', name: 'fName', isdefault: true}],
   sortname: "ID",
   sortorder: "asc",
   usepager: true,
   title: 'Employees',
   useRp: true,
   rp: 15,
   showTableToggleBtn: true,
   width: 750,
   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}
            }
        });

My web service code :

  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);
  }

Answer 1

I tried your example, and it works perfectly. The only thing is that you might have forgotten to add the CSS file link in your head tag. For example:

<link href="Content/flexigrid/flexigrid.css" rel="stylesheet" />