CODEWITHSUNDEEP
jqueryasp.netgridview
elena akhmetova
elena akhmetova

Reputation: 11

using asp:gridview with add new row button in jquery modal dialog

I have a grid view with several template fields (for drop-downs) which is working fine if I place it outside of the DIV what I use as modal dialog. Grid has onrowdatabound and OnRowDeleting events and additionally a button to add a new row to the grid. When I tried to move this grid to the Modal dialog the Add button stopped working. The click event is coded in code behind and it does not fire. Can anyone help me to understand how I should handle it? Any help will be appreciated. Thank you in advance

<div id="dialog" >

<asp:GridView ID="grPlan" runat="server" 
            ShowFooter="True" 
            AutoGenerateColumns="False"
            CellPadding="4" ForeColor="#333333" 
            GridLines="None"
            onrowdatabound = "GridView_RowDataBound"
            OnRowDeleting = "GridView_RowDeleting" >
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="id" />
        <asp:TemplateField HeaderText="Program>">
            <ItemTemplate >
                <asp:DropDownList ID="ddlProgModal2" runat="server" AppendDataBoundItems="true" AutoPostBack="false" DataTextField="Prog" 
    DataValueField="ProgID" />
            </ItemTemplate >
        </asp:TemplateField>
        <asp:TemplateField HeaderText="EF">
            <ItemTemplate >
                <asp:DropDownList ID="ddlAnneeFiscaleModal2"  DataTextField="EtendueLong" DataValueField="EtendueLong" runat="server" 
                AppendDataBoundItems="true" AutoPostBack="false"/>
            </ItemTemplate >
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Approbations">
            <ItemTemplate >
                <asp:DropDownList ID="ddlApprobationModal2" runat="server" AppendDataBoundItems="true" AutoPostBack="false" 
    DataTextField="Approb" DataValueField="ApprobationID"/>
            </ItemTemplate >
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Fonds">
            <ItemTemplate >
                <asp:TextBox ID="txtFondsModal2" runat="server" AutoPostBack="false" MaxLength="15" Width = "120" onkeypress="return 
    validateFloatKeyPress(this,event);" />
            </ItemTemplate >
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
                <asp:Button ID="ButtonAdd" runat="server" Text="Add" OnClick="ButtonAdd_Click" />            
            </FooterTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True" />

    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="Black" />
    <AlternatingRowStyle BackColor="White" />

</asp:GridView>
</div>

$("#dialog").dialog({ autoOpen: false, modal: false, width: 600, height: 520, resizable: false, closeOnEscape: false, open: function (event, ui) { //debugger; $(".ui-dialog-titlebar-close").hide(); $('.ui-dialog').css("left", "400px"); $('.ui-dialog').css("top", "300px"); $('.ui-dialog').css("position", "absolute"); }, title: '', buttons: { Cancel: function () { $(this).dialog('close'); }, 'OK': function () { $(this).dialog('close'); return true; } } });

Upvotes: 1

Views: 758

Answers (1)

Mahesh
Mahesh

Reputation: 8892

There are three ways you can do what you want to do,

1) Wrap your gridview inside UpdatePanel and then set the PostbackTrigger to the your add button control.

2) You can use the gridview.RowCommand event. It handles all button related events inside a cell of a gridview.Here is more info on it

3) You can use the jquery to force the postback on the button click using the __dopostback()Here is more info on it.

Upvotes: 0

Related Questions