POPUP Editing - Replace edit & delete links with toolbar buttons

[Vithiya]

I have a grid with popup editing turned on. Everything works well with the default settings. I wanted to replace the built-in commanditemstyle with a commanditemtemplate that has a toolbar. I added four toolbarbuttons, add,edit,delete and refresh. Add and refresh work as they did before, but delete and edit do not seem to work. I do not get any errors either. The grid just refreshes with no changes to it.

I think the issue is that the (e.Item.IsInEditMode) is always false no matter what, if I fire the edit command from the toolbarbutton. If I use the default edit link, isineditmode is true when needed.

Here is the code for it. Please let me know how I can get the edit and delete buttons on the toolbar to work instead of the default links.

<telerik:RadGrid ID="grdParameters" runat="server"
                                            GridLines="None" SkinID="StaticColumns"
                                            OnItemCommand="grdParameters_ItemCommand"
                                            OnItemDataBound="grdParameters_ItemDataBound"
                                            OnItemDeleted="grdParameters_ItemDeleted"
                                            OnItemInserted="grdParameters_ItemInserted"
                                            OnItemUpdated="grdParameters_ItemUpdated"
                                            OnNeedDataSource="grdParameters_NeedDataSource"
                                            OnPreRender="grdParameters_PreRender" ShowStatusBar="true" Height="300px"
                                            Width="650px" >                                            
                                            <MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Keyword"
                                                CommandItemDisplay="Top" EditMode="PopUp">
                                                <CommandItemTemplate>
                                                <telerik:RadToolBar runat="server" AutoPostBack="true">
                                                <Items>
                                                <telerik:RadToolBarButton Text="Add" CommandName="InitInsert" Value="Add" ImageUrl="~/Images/Add16.gif"></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton Text="Remove" CommandName="Delete" Value="Remove" ImageUrl="~/Images/Remove16.gif"></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton Text="Properties" CommandName="Edit" Value="Properties" ImageUrl="~/Images/edit_properties16.gif"></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton Text="Refresh" CommandName="RebindGrid" Value="Refresh" ImageUrl="~/Images/Refresh16.gif"></telerik:RadToolBarButton>
                                                </Items>
                                                </telerik:RadToolBar>
                                                </CommandItemTemplate>
                                                <RowIndicatorColumn>
                                                    <HeaderStyle Width="20px" />
                                                </RowIndicatorColumn>
                                                <ExpandCollapseColumn>
                                                    <HeaderStyle Width="20px" />
                                                </ExpandCollapseColumn>
                                                <Columns>                                                    
                                                    <telerik:GridBoundColumn DataField="Keyword" HeaderText="Parameter Name"
                                                        UniqueName="Keyword">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="KeyValue" HeaderText="Parameter Value"
                                                        UniqueName="KeyValue">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridEditCommandColumn ButtonType="LinkButton" EditText="Edit"
                                                        HeaderStyle-Width="40px" ItemStyle-Font-Underline="true"   
                                                        ItemStyle-ForeColor="Blue">
                                                        <HeaderStyle Width="40px" />
                                                        <ItemStyle Font-Underline="True" ForeColor="Blue" />
                                                    </telerik:GridEditCommandColumn>
                                                    <telerik:GridButtonColumn ButtonType="LinkButton" CommandName="Delete"
                                                        HeaderStyle-Width="60px" ItemStyle-Font-Underline="true"  
                                                        ItemStyle-ForeColor="Blue" Text="Delete" UniqueName="column">
                                                        <HeaderStyle Width="60px" />
                                                        <ItemStyle Font-Underline="True" ForeColor="Blue" />
                                                    </telerik:GridButtonColumn>
                                                </Columns>
                                                <EditFormSettings EditFormType="Template" CaptionFormatString="Parameter Details">
                                                <PopUpSettings Width="500px" ScrollBars="Vertical" />
                                                    <EditColumn UniqueName="EditCommandColumn1">
                                                    </EditColumn>
                                                    <FormTemplate>
                                                        <table>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="lblParmName" runat="server" Width="100px" Text="Parameter Name: *"></asp:Label>
                                                                </td>
                                                                <td>
                                                                    <telerik:RadTextBox ID="txtParmName" Runat="server"
                                                                        Text='<%# Bind( "Keyword") %>' Width="300px">
                                                                    </telerik:RadTextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    &nbsp;</td>
                                                                <td>
                                                                    <asp:RequiredFieldValidator ID="valParmName" runat="server"
                                                                        ControlToValidate="txtParmName" Display="Dynamic"
                                                                        ErrorMessage="Parameter name is a required field."
                                                                        EnableClientScript="False"></asp:RequiredFieldValidator>
                                                                        <asp:CustomValidator ID="valUniqueParmName" runat="server" Display="Dynamic"
                                                                        ErrorMessage="Parameter name must be unique."                                                                          
                                                                        ControlToValidate="txtParmName"
                                                                        OnServerValidate="valUniqueParmName_ServerValidate"
                                                                        EnableClientScript="False"></asp:CustomValidator>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="lblParmValue" runat="server" Width="100px" Text="Parameter Value: *"></asp:Label>
                                                                </td>
                                                                <td>
                                                                    <telerik:RadTextBox ID="txtParmValue" Runat="server"
                                                                        Text='<%# Bind( "KeyValue") %>' Width="300px" oncontextmenu="return ShowMenu(this, 'Parameter');"  
                                                                        Height="64px" TextMode="MultiLine">
                                                                    </telerik:RadTextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    &nbsp;</td>
                                                                <td>
                                                                    <asp:RequiredFieldValidator ID="valParmValue" runat="server"
                                                                        ControlToValidate="txtParmValue" Display="Dynamic" EnableClientScript="False"
                                                                        ErrorMessage="Parameter value is a required field."></asp:RequiredFieldValidator>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    &nbsp;</td>
                                                                <td>
                                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                    <asp:Button ID="btnUpdate" runat="server"
                                                                        CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                                                        Text='<%# (Container is GridEditFormInsertItem) ? "Apply" : "Apply" %>' />
                                                                    &nbsp;<asp:Button ID="btnCancel" runat="server" CommandName="Cancel"
                                                                        Text="Cancel"/>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                </td>
                                                                <td>
                                                                    &nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </FormTemplate>
                                                </EditFormSettings>
                                            </MasterTableView>  
                                            <ClientSettings>
                                            <Scrolling AllowScroll="true" />
                                            </ClientSettings>
                                          <ValidationSettings CommandsToValidate="PerformInsert,Update" />
                                            <FilterMenu EnableTheming="True">
                                                <CollapseAnimation Duration="200" Type="OutQuint" />
                                            </FilterMenu>
                                        </telerik:RadGrid>

protected void grdParameters_ItemCommand(object source, GridCommandEventArgs e)
        {
            GridEditCommandColumn editColumn = (GridEditCommandColumn)grdParameters.MasterTableView.GetColumn("EditCommandColumn");
            GridEditableItem editItem;
            switch (e.CommandName)
            {
                case (RadGrid.InitInsertCommandName): //"Add new" button clicked.            
                    editColumn.Visible = false;
                    break;
                case (RadGrid.RebindGridCommandName):   // Refresh button clicked.    
                    if (e.Item.OwnerTableView.IsItemInserted)
                    {
                        e.Canceled = true;
                    }
                    break;
                case (RadGrid.PerformInsertCommandName):   //Insert button clicked.         
                    editColumn.Visible = true;
                    editItem = e.Item as GridEditableItem;
                    ExecuteInsertParm(editItem);
                    break;
                case (RadGrid.EditCommandName):         //Edit button clicked.
                    if (grdParameters.SelectedItems.Count == 0)
                    {
                       ShowAlert("Please select an item.");
                    }
                    else
                    {
                        editColumn.Visible = false;
                    }
                    break;
                case (RadGrid.UpdateCommandName):     //Update button clicked.
                    editColumn.Visible = true;
                    editItem = e.Item as GridEditableItem;
                    //editItem = grdParameters.SelectedItems[0] as GridEditableItem;
                    ExecuteUpdateParm(editItem);
                    break;
                case (RadGrid.DeleteCommandName):    //delete button clicked.  
                    if (grdParameters.SelectedItems.Count == 0)
                    {
                        ShowAlert("Please select an item.");
                    }
                    else
                    {
                        editItem = e.Item as GridEditableItem;
                        //editItem = grdParameters.SelectedItems[0] as GridEditableItem;
                        DeleteRecord(editItem);
                    }
                    break;
                default:
                    if (!editColumn.Visible) { editColumn.Visible = true; }
                    break;
            }
        }

/// <summary>
        ///
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void grdParameters_ItemDataBound(object sender, GridItemEventArgs e)
        {
            //if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))
            if ((e.Item is GridEditFormItem) && (e.Item.IsInEditMode))
            {
                GridEditableItem editItem = (GridEditableItem)e.Item;
                RadTextBox rdBox1 = (RadTextBox)editItem.FindControl("txtParmName");
                RadTextBox rdBox2 = (RadTextBox)editItem.FindControl("txtParmValue");
                if (rdBox2 != null)
                {
                    //grdParameters.Controls.Add(new LiteralControl("<script type='text/javascript'> window['radTextID'] = '" + rdBox.ClientID + "';</script>"));
                    radTextID.Value = rdBox2.ClientID;
                }
                EventSubscriptionInfo eventInfo = new EventSubscriptionInfo();
                rdBox1.MaxLength = ValidationHelper.GetMaxLength(eventInfo, "Keyword");
                rdBox2.MaxLength = ValidationHelper.GetMaxLength(eventInfo, "KeyValue");
            }
        }

[Iana Tsolova]

Hi Vithiya,

Which Items do you want the Delete and Edit buttons to delete/edit respectively?
You can set the buttons' CommandName properties to DeleteSelected and EditSelected. In this case, you need to enable grid row selection as in this online demo.

Check it out and let me know if this helps.

Best wishes,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Vithiya]

Hi Lana,

 

Thank you for the prompt response. I found that demo and was able to get my grid editing working after I changed the commands to 'EditSelected' and 'DeleteSelected.' Thanks again.

 

Vithiya