Search code examples
javascriptaspxgridview

How can I add a button column to datagrid object


I want to add a button column to data grid object. I fill the data table in aspx.cs file. Our frame work is .Net Webform structure. How can I do this? My grid is as follows:

        <div id="divSGKTecrube" runat="server">
            <iskurControls:IskurGridView runat="server"
                ID="ctlGridSgkTecrube"
                AutoGenerateColumns="False"
                EmptyDataText="Tecrübe Bilginiz Bulunmamaktadır."
                EnableViewState="true"
                CssClass="table table-bordered table-condensed text-small">
                <Columns>
                    <asp:BoundField DataField="ISYERISICILNO" HeaderText="İşyeri Sicil No">
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ISYERIADI" HeaderText="İşyeri Adı">
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:BoundField>
                    <asp:BoundField DataField="MESLEKKODU" HeaderText="Meslek Kodu">
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:BoundField>
                    <asp:BoundField DataField="MESLEK" HeaderText="Meslek">
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:BoundField>
                    <asp:BoundField DataField="SURE" HeaderText="Süre">
                        <HeaderStyle HorizontalAlign="Right" />
                    </asp:BoundField>
                    <asp:BoundField DataField="BASLANGICTARIHI" HeaderText="Baş Tar">
                        <HeaderStyle HorizontalAlign="Right" />
                    </asp:BoundField>
                    <asp:BoundField DataField="BITISTARIHI" HeaderText="Bit Tar">
                        <HeaderStyle HorizontalAlign="Right" />
                    </asp:BoundField>
                </Columns>
                <PagerStyle CssClass="grid-PagerStyle"></PagerStyle>
                <SelectedRowStyle CssClass="grid-SelectedRowStyle"></SelectedRowStyle>
                <HeaderStyle CssClass="grid-HeaderStyle"></HeaderStyle>
                <EditRowStyle CssClass="grid-EditRowStyle"></EditRowStyle>
                <AlternatingRowStyle CssClass="grid-AlternatingRowStyle"></AlternatingRowStyle>
                <FooterStyle CssClass="grid-FooterStyle"></FooterStyle>
                <RowStyle CssClass="grid-RowStyle"></RowStyle>
                <EmptyDataRowStyle CssClass="grid-EmptyRow" />
            </iskurControls:IskurGridView>
            <div style="text-align: center">
                <kaleCustomControls:DataPager ID="DataPager1" runat="server" VisibleIfNoNeed="False" PagerButtons="NextPrevious" />
            </div>
        </div>

Solution

  • How you can add a button column to your grid:

    <Columns>
        <asp:TemplateField HeaderText="Actions">
            <ItemTemplate>
                <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="EditRow" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    

    In your aspx.cs file, you'll need to handle the commands. You can use the RowCommand event of the IskurGridView to do this:

    protected void ctlGridSgkTecrube_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "EditRow")
        {
            // Handle edit logic
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            // Access data for the selected row
        }
        else if (e.CommandName == "DeleteRow")
        {
            // Handle delete logic
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            // Delete data for the selected row
        }
    }
    

    Remember to add the RowCommand event handler to your IskurGridView:

    <iskurControls:IskurGridView runat="server"
        ID="ctlGridSgkTecrube"
        AutoGenerateColumns="False"
        OnRowCommand="ctlGridSgkTecrube_RowCommand"
        <!-- ... -->
    >
        <!-- Columns definition -->
    </iskurControls:IskurGridView>