What is the method for including a button column within a datagrid object?

Question

What is the method for including a button column within a datagrid object?

I am looking to enhance my data grid object by adding a button column. The data table is filled in the aspx.cs file, and we are using the .Net Webform structure. Can anyone provide guidance on how to achieve this? Below is an example of my current grid setup:

        <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>
                    <asp:ButtonField Text="Example Button" CommandName="ExampleCommand" />
                </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>

javascript aspxgridview

Answer 1

Answer №1

If you want to include a button column in your grid, follow these steps:

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

To handle the commands in your aspx.cs file, make use of the RowCommand event of IskurGridView:

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

Don't forget to add the RowCommand event handler to your IskurGridView:

<iskurControls:IskurGridView runat="server"
    ID="ctlGridSgkTecrube"
    AutoGenerateColumns="False"
    OnRowCommand="ctlGridSgkTecrube_RowCommand"
    <!-- ... -->
>
    <!-- Define columns here -->
</iskurControls:IskurGridView>

Answer 2

If you want to include a button column in your grid, follow these steps:

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

To handle the commands in your aspx.cs file, make use of the RowCommand event of IskurGridView:

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

Don't forget to add the RowCommand event handler to your IskurGridView:

<iskurControls:IskurGridView runat="server"
    ID="ctlGridSgkTecrube"
    AutoGenerateColumns="False"
    OnRowCommand="ctlGridSgkTecrube_RowCommand"
    <!-- ... -->
>
    <!-- Define columns here -->
</iskurControls:IskurGridView>

What is the method for including a button column within a datagrid object?

Answer №1

Similar questions

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

Dealing with 404 errors encountered when making requests to external websites, utilizing either basic Javascript or JQuery

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

How do I initiate a custom button click event in React from an event handler in another component?

Identifying JavaScript Bugs during Selenium Test Execution

Tips for seamlessly integrating XHP and ReactJS for a component's implementation

Removing an item from an array using AngularJS with Underscore or another method

Using JavaScript in conjunction with IPFS to verify the 404 status from localhost:8080 and identify if the local IPFS node is active within a browser user script

Tips for removing or changing the X-Powered-By header in a Sails.js application

NextJS does not support the rendering of the map function

Troubleshooting the issue with utilizing the ng-repeat directive to loop through images in Angular JS

How can I convert the JSON array response from the API, which is of type string, back into an array?

Searching for dates within a range on DataTables using CodeIgniter

Obtaining a cloned HTML object using jQuery in C# the correct way

Trigger $q manually in AngularJS

Switching from module.exports in Javascript to Typescript format

Encountering issues with Office.context.document.getFileAsync function

Error message: Modal.dispose function not available in Bootstrap 5 Symfony 5.3 issue detected

`Using Twitter Bootstrap in mobile app development with javascript`

Top method for incorporating Ember.js with outside code (such as Android's WebView)