dynamically add button column in Asp.net GridView using Jquery

Question

I have populated Grid View Dynamically with json Data ..Button Column started to appears only in First Row ..But not in below rows ..

I have Tried Code to add column in server side code as well as in Mark Up ..I also search but could not able to find any thing relevant

this is my MarkUp :

  <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "List.aspx/GetData",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        $("#gvDetails").append("<tr><td>" + data.d[i].c1 + "</td><td>" + data.d[i].c2 + "</td><td>" + "</td></tr>");
                    }
                },
                error: function (result) {
                    alert(result.status + ' ' + result.statusText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvDetails" runat="server" ShowHeaderWhenEmpty="True">
            <Columns>
                <asp:ButtonField Text="Button" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>

this is code behind :

 protected void Page_Load(object sender, EventArgs e)
        {
            BindColumnToGridview();
        }

        private void BindColumnToGridview()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("c1");
            dt.Columns.Add("c2");

            dt.Rows.Add();
            gvDetails.DataSource = dt;

            gvDetails.DataBind();

        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static tbl1[] GetData()
        {

            try
            {
                using (var context = new TestDBContext())
                {
                    List<tbl1> lsTbl1 = new List<tbl1>();

                    lsTbl1 = (from c in context.tbl1 select c).ToList();
                    return lsTbl1.ToArray();

                }
            }
            catch (Exception)
            {

                throw;
            }

        }

I also tried to add column from code behind

gvDetails.Columns.Add(new ButtonField() { Text = "Button"  });

this is not working too

any sugestion will be helpful

Aditya Singh · Accepted Answer · 2014-08-07 11:17:58Z

1

Since gvDetails is a server side control you should use <%= gvDetails.ClientID %> in your JS snippet.

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "List.aspx/GetData",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        $("#<%= gvDetails.ClientID %>").append("<tr><td>" + data.d[i].c1 + "</td><td>" + data.d[i].c2 + "</td><td>" + "</td></tr>");
                    }
                },
                error: function (result) {
                    alert(result.status + ' ' + result.statusText);
                }
            });
        });
    </script>

EDIT:

enter image description here

edited Aug 7, 2014 at 11:17

answered Aug 7, 2014 at 9:33

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

neeraj Over a year ago

I did that ..But still button column not visible

Aditya Singh Over a year ago

@neeraj It is working at my end. Please try logging data.d in your console.

neeraj Over a year ago

No NO ..that also i am getting ..I want Button in each Row in first column..thats the problem

Collectives™ on Stack Overflow

dynamically add button column in Asp.net GridView using Jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related