Telerik Forums / UI for ASP.NET AJAX

Adding Confirm/Cancel buttons to Custom Command buttons

1 Answer 19 Views
Button Grid
Sean
Top achievements
Rank 1
Sean asked on 10 Jun 2024, 07:12 PM

I have a RadGrid that required two separate Edit Buttons used for InPlace EditMode. I have created two GridButtonColumns each with a unique CommandName. I am capturing these button presses in the RadGrid.ItemCommand method. What I need, however, is some way of displaying a Confirm and a Cancel button while in Edit Mode for each of these edit buttons.  How can I achieve this?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Vasko
Telerik team
answered on 12 Jun 2024, 09:57 AM

Hello Sean,

If I understand correctly, you want to achieve something like in the below code snippet: 

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" 
    OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridButtonColumn CommandName="Command1" />
            <telerik:GridButtonColumn CommandName="Command2" />
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <asp:Button ID="Button1" runat="server" Text="Confirm" CommandName="Confirm1" />
                <asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel1" />
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Command1" || e.CommandName == "Command2")
    {
        // Handle Edit1 button click
        RadGrid1.EditIndexes.Clear();
        e.Item.Edit = true;
        RadGrid1.Rebind();
    }
    else if (e.CommandName == "Confirm1")
    {
        // Handle Confirm1 button click
        // Example: Save changes to database
    }
    else if (e.CommandName == "Cancel1")
    {
        // Handle Cancel button click
        e.Item.Edit = false;
        RadGrid1.Rebind();
    }
}


protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable(); 
}
private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 10; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

If that is not what you want, can you try to modify it so that it represents the code you currently have and then send it back to me so I can take a closer look and try to find a suitable way of achieving said behavior.

Kind regards,
Vasko
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
Sean
Top achievements
Rank 1
commented on 12 Jun 2024, 01:38 PM

I added your EditFormSettings as you have above, but nothing happens when I enter Edit Mode. Those Confirm and Cancel Buttons do not appear for the row that is being edited.  Everything else you have is exactly as I have in my code as well.

Here's my RadGrid code:


        <telerik:RadGrid ID="rgBlankOrders" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                         Width="800px" AllowFilteringByColumn="False" AllowSorting="True" PageSize="20">

            <MasterTableView DataKeyNames="BlankOrderKey" CommandItemDisplay="Top" EditMode="InPlace" Name="BlankOrders">
                <CommandItemSettings ShowRefreshButton="true" ShowAddNewRecordButton="false"/> 
                <ColumnGroups>
                    <telerik:GridColumnGroup Name="Requested" HeaderText="Requested" HeaderStyle-HorizontalAlign="Center"/>
                    <telerik:GridColumnGroup Name="Shelf" HeaderText="Shelf" HeaderStyle-HorizontalAlign="Center"/>
                    <telerik:GridColumnGroup Name="LotSize" HeaderText="Lot Size" HeaderStyle-HorizontalAlign="Center"/>
                </ColumnGroups>
                <Columns>
                    <telerik:GridBoundColumn DataField="BlankNumber" HeaderText="Blank Number" ReadOnly="true"/>
                    <telerik:GridBoundColumn DataField="OrderQuantity" HeaderText="Quantity" ColumnGroupName="Requested" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn DataField="ShiftDate" HeaderText="Date" ColumnGroupName="Requested" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn DataField="ShiftID" HeaderText="Shift" ColumnGroupName="Requested" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn DataField="BlanksPerStack" HeaderText="Blanks Per Stack" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                    
                    <telerik:GridButtonColumn UniqueName="EditShelf" CommandName="EditShelf" HeaderText="Edit" ColumnGroupName="Shelf" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ButtonType="ImageButton" ImageUrl="~/images/edit_pencil.png" ItemStyle-Width="25px" />
                    <telerik:GridBoundColumn UniqueName="ShelfQuantity" DataField="ShelfQuantity" HeaderText="Quantity" ColumnGroupName="Shelf" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                    <telerik:GridButtonColumn UniqueName="EditLotSize" CommandName="EditLot" HeaderText="Edit" ColumnGroupName="LotSize" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ButtonType="ImageButton" ImageUrl="~/images/edit_pencil.png" ItemStyle-Width="25px" />
                    <telerik:GridBoundColumn UniqueName="LotSize" DataField="LotSize" HeaderText="Lot Size" ColumnGroupName="LotSize" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                    <telerik:GridDropDownColumn UniqueName="ChangeReason" DataField="ChangeReason" HeaderText="Change Reason" ColumnGroupName="LotSize" />
                    <telerik:GridButtonColumn UniqueName="ScheduleColumn" HeaderText="Schedule Job" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" Text="Schedule" CommandName="Schedule" ButtonType="ImageButton" ImageUrl="~/images/schedule.png" />
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Confirm" CommandName="Confirm1" />
                        <asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel1" />
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>

Sean
Top achievements
Rank 1
commented on 12 Jun 2024, 07:02 PM

I just tested your code and it doesn't work either. While the Confirm/Cancel buttons appear when one of the Edit buttons are pressed, the row itself is not editable.  Once I add the tab EditMode="In Place" to the MasterTableView, the row is editable, but the Confirm/Cancel buttons are not available.
Vasko
Telerik team
commented on 13 Jun 2024, 08:16 AM

Hi Sean,

Apologies for the misguidance regarding the original code.

An approach that seems suitable in this case would be to use a GridTemplateColumn with multiple buttons in the EditItemTemplate: 

 <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
     OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
     <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" EditMode="InPlace" CommandItemDisplay="Top">
         <Columns>
             <telerik:GridTemplateColumn HeaderText="Template button column1">
                 <ItemTemplate>
                     <telerik:RadButton ID="TemplateButtonColumn1Button1" runat="server" Text="Click to edit" CommandName="Command1" />
                 </ItemTemplate>
                 <EditItemTemplate>
                     <telerik:RadButton ID="TemplateButtonColumn1EditButton1" runat="server" Text="Click to cancel editing" CommandName="Cancel1" />
                     <telerik:RadButton ID="TemplateButtonColumn1EditButton2" runat="server" Text="Click for something" CommandName="CustomCommand1" />
                     <telerik:RadButton ID="TemplateButtonColumn1EditButton3" runat="server" Text="Click for something else" CommandName="CustomCommand2" />
                 </EditItemTemplate>
             </telerik:GridTemplateColumn>
             <telerik:GridTemplateColumn HeaderText="Template button column2">
                 <ItemTemplate>
                     <telerik:RadButton ID="TemplateButtonColumn2Button1" runat="server" Text="Click to edit" CommandName="Command1" />
                 </ItemTemplate>
                 <EditItemTemplate>
                     <telerik:RadButton ID="TemplateButtonColumn2EditButton1" runat="server" Text="Click to cancel editing" CommandName="Cancel1" />
                     <telerik:RadButton ID="TemplateButtonColumn2EditButton2" runat="server" Text="Click for something" CommandName="CustomCommand1" />
                     <telerik:RadButton ID="TemplateButtonColumn2EditButton3" runat="server" Text="Click for something else" CommandName="CustomCommand2" />
                 </EditItemTemplate>
             </telerik:GridTemplateColumn>
             <telerik:GridBoundColumn DataField="ShipName"
                 FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                 SortExpression="ShipName" UniqueName="ShipName">
             </telerik:GridBoundColumn>
         </Columns>
     </MasterTableView>
 </telerik:RadGrid>

Try this approach and see if it will be of use to your case.

Regards,
Author nickname
Progress Telerik

Sean
Top achievements
Rank 1
commented on 17 Jun 2024, 02:12 PM

Thank you! This works and I have exactly what I need.
Tags
Button Grid
Asked by
Sean
Top achievements
Rank 1
Answers by
Vasko
Telerik team
Share this question
or