CODEWITHSUNDEEP
javascriptjqueryasp.net.netajax
Indranil.Bharambe
Indranil.Bharambe

Reputation: 1498

Populating Gridview Using Ajax

i have two gridview. on click of one row of one grid i have to populate another gridview. so onClientclick javascript function i called ajax which returns datatable for populating another grid. Now i am stuck how to bind grid view using javascript.

here is code

<asp:gridview id="gridview1"> .....</asp:gridview>
<asp:gridview id="gridview2"> .....</asp:gridview>

codebehind

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
             LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];

        db.OnClientClick = "FunPopulateSecondGrid(" + CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Label).text + ");"
            }
}

javascript

function FunPopulateSecondGrid(productid)
{
   $.ajax({
            url : '...',
            data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
            method : 'GET',
            dataType : 'json',
            contentType: "application/json; charset=utf-8",
            success : function(data) {
// i am stuck here how to bind it
//gridview2.datasource= data
//gridview2.databind()              
            },
            error : function(xhr, status) {
                alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
            }
        });
}

Upvotes: 0

Views: 15121

Answers (2)

Sain Pradeep
Sain Pradeep

Reputation: 3125

You need to append the data to gridview in success section like this

If you have gridview with Id "gridview2"

function FunPopulateSecondGrid(productid)
    {
       $.ajax({
                url : '...',
                data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
                method : 'GET',
                dataType : 'json',
                contentType: "application/json; charset=utf-8",
                 success: function (data) { //you need to append the data to gridview
             for (var i = 0; i < data.d.length; i++) {
                    $("#gridview2").append("<tr><td>" + data.d[i].ProductName + 
                                                "</td><td>" + data.d[i].Price + "</td></tr>");
                 },
                error : function(xhr, status) {
                    alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
                }
            });
    }

Please find complete solution here :Bind GridView with Jquery

Upvotes: 4

Jignesh Suvariya
Jignesh Suvariya

Reputation: 424

Here Scott Guthrei blog "Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios", this is exact sample for which you are looking.

http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx

Note: Here he use asp.net ajax with script manager but you can replace that portion with jQuery ajax.

Upvotes: 1

Related Questions