[RESOLVED]how to bind Gridview by jquery using sqlquery

Hi,

in my application  i want to bind gridview by jquery .

problem iam facing is i don’t know the fieldnames because i want to execute a query.

how it is possible.following is a working code if we know the field names..

 i want to do like following query. any possibility

public class bdetails
    {
        public string bus_id { get; set; }
        public string bus_name { get; set; }
        public string model { get; set; }    
    
    }

—————————————————————————————————
[WebMethod]
    public static bdetails[] BindGrid()
    {
        string msg = "";
        DataTable dt = new DataTable();
        List<bdetails> details = new List<bdetails>();
        using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=baiju;User ID=baijuserver;Password=baiju123kl"))
        {
            string strquery = "select * from busmaster";
            using (SqlCommand cmd = new SqlCommand(strquery, con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    bdetails user = new bdetails();
                    user.bus_id = dtrow["bus_id"].ToString();
                    user.bus_name = dtrow["bus_name"].ToString();
                    user.model = dtrow["model"].ToString();
                    details.Add(user);
                }
                con.Close();
            }
        }
        return details.ToArray();

    }
———————————-
 private void BindColumnToGridview()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("bus_id");
        dt.Columns.Add("bus_name");
        dt.Columns.Add("model");       
        dt.Rows.Add();
        GridView1.DataSource = dt;
        GridView1.DataBind();
        GridView1.Rows[0].Visible = false;
    }
    
—————————————–
 if (!IsPostBack)
        {
            
           BindColumnToGridview();
        }

————————————————————–
 for (var i = 0; i < data.d.length; i++) {
                        $("#GridView1").append("<tr class=’gd1′><td>" + data.d[i].bus_id + "</td><td>" + data.d[i].bus_name + "</td><td>" + data.d[i].model + "</td><td>"</tr>");

                    }

Regards

Baiju

Wouldn’t a better solution be to user a JQuery grid? 

http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

Hi klbaiju,

Thanks for your post.

As known that the GridView is the server side code, we can only bind in the code behind.

We cannot bind data into gridview in the client side using javascript or jquery.

Id you want to display data with table layout, you can choose some jquery table plugin and use them display

data request from server side. Like :

Jquery DataTable:

https://datatables.net/examples/data_sources/js_array.html

Jquery Jtable: http://www.jtable.org/

Also Jqgrid: http://www.trirand.com/blog/jqgrid/jqgrid.html

There are document for you how to use them. Thanks.

Best Regards.

Fuxiang Zhang – MSFT

As known that the GridView is the server side code, we can only bind in the code behind.

We cannot bind data into gridview in the client side using javascript or jquery.

Wrong. We actually can. But it’s pointless to do so since it’s a server control. However, that doesn’t mean it’s not possible.

While I strongly suggest to use a simple HTML table to achieve this, if you still want to do that, you can have a look at the below post. 

http://www.aspdotnet-suresh.com/2012/03/bind-data-to-gridview-with-jquery-or.html

Leave a Reply