Click here to Skip to main content
15,890,717 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
Hello to all experts. I want to fire commandevent of gridview, which is loaded dynamically. Dynamically means on scroll of grid div, i am binding data in gridview. For this i am following this article http://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx[^]

But now suppose i want to add button in gridview, and on click of that button i want to fire commandevent of gridview. I am able to do it with use of jquery. but i want to fire command event of gridview.

Is it possible to do so? Again i can do it with jquery, but i want to do it with use of gridview rowcommand. Is it possible to do so?

Hope best answers will come out.

Thanks,
Harshil
Posted
Comments
[no name] 30-Sep-13 2:46am    
Grid View template field...?
Harshil_Raval 30-Sep-13 2:52am    
but i am loading data dynamically, so how to set commandname and commandargument to dynamically loaded button?
I guess you are populating data dynamically and not the controls.
So, if you can specify a TemplateField and inside that one LinkButton, then easily you can fire the Events, right? These will be declared static inside GridView.

If you can't get what I am talking, then feel free to ask.
Harshil_Raval 30-Sep-13 5:53am    
Hi, tadish see my gridview html,
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
OnRowCommand="gvCustomers_RowCommand" Width="600">
<columns> <asp:BoundField DataField="ContactName" HeaderText="Customer Name" ItemStyle-CssClass="name"
ItemStyle-Width="200" HeaderStyle-Width="200" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-CssClass="city" ItemStyle-Width="100"
HeaderStyle-Width="100" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="country"
ItemStyle-Width="100" HeaderStyle-Width="100" />
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code" ItemStyle-CssClass="postal"
ItemStyle-Width="100" HeaderStyle-Width="100" />
<asp:TemplateField>
<itemtemplate>
<asp:Button ID="btn" runat="server" ClientIDMode="Static" CommandName="click" Text="Click" CommandArgument='<%# Bind("ContactID") %>' />




Now on scroll i am binding data dynamically. Now problem is i am not able to fire button event as gridview command event.
As you have a Button, so it should fire the RowCommand Event. What is the problem?

Solution

I downloaded the code at - LOAD ON DEMAND DATA IN GRIDVIEW ON SCROLL USING ASP.NET AND JQUERY AJAX[^].

Then added one LinkButton to the GridView, so modified GridView is as follows...
XML
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
            Width="500" OnRowCommand="gvCustomers_RowCommand">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Customer Name" ItemStyle-CssClass="name"
            ItemStyle-Width="200" HeaderStyle-Width="200" />
        <asp:BoundField DataField="City" HeaderText="City" ItemStyle-CssClass="city" ItemStyle-Width="100"
            HeaderStyle-Width="100" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="country"
            ItemStyle-Width="100" HeaderStyle-Width="100" />
        <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" ItemStyle-CssClass="postal"
            ItemStyle-Width="100" HeaderStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btn" runat="server" ClientIDMode="Static" CommandName="click"
                    CommandArgument='<%# Bind("ContactName") %>'>Click</asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

Now added the RowCommand Event in Code Behind and put a Break Point inside the function as follows.
C#
protected void gvCustomers_RowCommand(Object sender, GridViewCommandEventArgs e)
{
    // If multiple buttons are used in a GridView control, use the
    // CommandName property to determine which button was clicked.
    if (e.CommandName == "click")
    {
        // Your codes...
    }
}


Now, it's hitting the RowCommand Event for all the rows created dynamically by jQuery.


Modified Demo

GridView OnDemand Row OnScrolling[^]


Update

As the href attribute were same for all the dynamically created rows by jQuery, so the OnSuccess Method is modified to make it unique.
JavaScript
function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
    var customers = xml.find("Customers");
    $("[id$=gvCustomers] .loader").remove();
    customers.each(function () {
        var customer = $(this);
        var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
        $(".name", row).html(customer.find("ContactName").text());
        $(".city", row).html(customer.find("City").text());
        $(".postal", row).html(customer.find("PostalCode").text());
        $(".country", row).html(customer.find("Country").text());
        
        // Find the Last Row Number.
        var lastRowNumber = parseInt($("[id$=gvCustomers] tr").eq($("[id$=gvCustomers] tr").length - 1).index()) + 2;
        
        // Append this number inside href attribute of newly created row.
        $("#btn", row).attr("href", "javascript:__doPostBack('gvCustomers$ctl" + (lastRowNumber + 1) + "$btn','')");
        
        $("[id$=gvCustomers]").append(row);
    });

    //Hide Loader
    $("#loader").hide();
}
 
Share this answer
 
v3
Comments
Harshil_Raval 1-Oct-13 4:33am    
Hi, it's great.. I give you +5 for your effort. It is calling gridview rowcommand event for dynamically generated linkbuttons too..
But, it is having one problem, as you are getting clone of first row in javascript and replacing value. But, see on gridview's row command event of dynamicaaly generated row, it's commandargument's value is same as first row of gridview's command argument. I hope you get me. Except this every thing is fine.
But still, very good try, i appreciate your work.
Harshil_Raval 1-Oct-13 5:21am    
Hi tadit, have you found any solution for this problem?
Yes, I am working on it right now. Just returned from Lunch. :)
Answer updated. Please check now.
Harshil_Raval 1-Oct-13 7:29am    
I have updated onsuccess function in code with your modified function. But after implementing this, click event is not going in gridview's oncommand event.
Visit Using GridView And RowCommand Events[^]


[Edit member="Tadit"]
Link text added to reflect the Article/QA title.
[/Edit]
 
Share this answer
 
v2
Comments
Harshil_Raval 1-Oct-13 8:00am    
Hi, rakesh thanks for your help. But if you have read my question carefully, then my requirements are completely different.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900