Adding Confirm/Cancel buttons to Custom Command buttons

[Sean]

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!

[Vasko]

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

[Sean]

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]

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]

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]

Thank you! This works and I have exactly what I need.