[Solved] Multiply edit form popups

[Aleks A]

Hello,

I have a rad grid that need to have diffirent edit popup windows. This example:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx
has everything I need except how to specify different edit po pups. Like when  a user tries to edit one row it shows only 3 options for editing, when he tries another row 5 e.t.c.

[Aleks A]

I had an idea about a way that this could work:
I have multiply rows that are diffirent in element type:
         - one can be textField
         - and another image
Now when the user selects edit that row, a popup can appear with a comboBox with selection for element type. If the user changes the element type in the combo box the edit form popup should change the way it looks. Can you give me an example of how i can do this on client side with a combo box. Thank you.

[Veli]

Hi Aleks,

It seems you will need to define a custom FormTemplate or UserControl for your edit form. You can then have various client-side functionality in your edit form. using PopUp edit mode will allow you to show the edit form in a RadWindow, regardless of the edit form's contents. For more information on custom edit forms, refer to the following link:

Custom edit forms

All the best,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Aleks A]

Thank you for the link it pointed me in the right direction, and i have succesfully created a custom made edit form popup. Now i need to catch the elements of the edit form in codebehind and disable them depending on a value from one bound field. How do i do that?

      <telerik:RadGrid runat="server" ID="RadGridCardDetails" EnableViewState="true" AutoGenerateColumns="False"
                ShowStatusBar="true" Skin="Vista" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
                AllowAutomaticUpdates="True" OnNeedDataSource="RadGridCardDetails_NeedDataSource"
                AllowPaging="True" AllowSorting="True" HorizontalAlign="NotSet" GridLines="None" OnPreRender="RadGridCardDetails_ItemPreRender"
                OnItemCommand="RadGridCardDetails_ItemCommand" OnUpdateCommand="RadGridCardDetails_UpdateCommand"
                OnInsertCommand="RadGridCardDetails_InsertCommand" OnDeleteCommand="RadGridCardDetails_DeleteCommand" OnItemDataBound="RadGridCardDetails_ItemDataBound" >
                <PagerStyle Mode="NextPrevAndNumeric" />
                <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="CardDetailID" EditMode="PopUp">
                    <Columns>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn DataField="CardDetailID" HeaderText="CardDetailsID" ReadOnly="true"
                            ForceExtractValue="Always" ConvertEmptyStringToNull="true" Visible="false" />
                        <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="<%$ Resources:BackEndSiteResources, Title %>" />
                        <telerik:GridBoundColumn DataField="Caption" UniqueName="Caption" HeaderText="<%$ Resources:BackEndSiteResources, Caption %>" />
                        <telerik:GridBoundColumn DataField="PositionX" UniqueName="PositionX" HeaderText="<%$ Resources:BackEndSiteResources, PositionX %>" />
                        <telerik:GridBoundColumn DataField="PositionY" UniqueName="PositionY" HeaderText="<%$ Resources:BackEndSiteResources, PositionY %>" />
                        <telerik:GridBoundColumn DataField="Width" UniqueName="Width" HeaderText="<%$ Resources:BackEndSiteResources, Width %>" />
                        <telerik:GridBoundColumn DataField="Height" UniqueName="Height" HeaderText="<%$ Resources:BackEndSiteResources, Height %>" />
                        <telerik:GridBoundColumn DataField="WritingDirection" UniqueName="WritingDirection"
                            HeaderText="<%$ Resources:BackEndSiteResources, WritingDirection %>" />
                        <telerik:GridBoundColumn DataField="Angle" UniqueName="Angle" HeaderText="<%$ Resources:BackEndSiteResources, Angle %>" />
                        <telerik:GridBoundColumn DataField="InitialTextNumber" UniqueName="InitialTextNumber"
                            HeaderText="<%$ Resources:BackEndSiteResources, InitialTextNumber %>" />
                        <telerik:GridDropDownColumn DataField="FieldType" UniqueName="FieldType" HeaderText="<%$ Resources:BackEndSiteResources, FieldType %>"
                            DataSourceID="ObjectDataSource1" DropDownControlType="RadComboBox" ListTextField="Name"
                            ListValueField="Value">
                        </telerik:GridDropDownColumn>
                        <telerik:GridBoundColumn DataField="TextAllignment" UniqueName="TextAllignment" HeaderText="<%$ Resources:BackEndSiteResources, TextAllignment %>" />
                        <telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="ImageButton" CommandName="Delete" />
                    </Columns>
                    <EditFormSettings EditFormType="Template">
                        <EditColumn UniqueName="EditCommandColumn1">
                        </EditColumn>
                        <FormTemplate>
                            You can use traditional data binding<br />
                            Which require you to handle the updates yourself<br />
                            <table>
                                <tr>
                                    <td>
                                        Name:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtName" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Name" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Field Type:
                                    </td>
                                    <td>
                                        <telerik:RadComboBox ID="comboFieldType" SelectedValue='<%# DataBinder.Eval( Container, "DataItem.FieldType" ) %>'
                                            runat="server" DataSourceID="ObjectDataSource1" DataTextField="Name" DataValueField="Value"
                                            Skin="Vista">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Caption:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtCaption" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Caption" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Width(cm):
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtWidth" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Width" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Height(cm):
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtHeight" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Height" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Position X:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtPositionX" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.PositionX" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Position Y:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtPositionY" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.PositionY" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Angle:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtAngle" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Angle" ) %>'>
                                        </asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Writing Direction:
                                    </td>
                                    <td>
                                        <telerik:RadComboBox ID="comboWritingDirection" SelectedValue='<%# DataBinder.Eval( Container, "DataItem.WritingDirection" ) %>'
                                            runat="server" DataSourceID="ObjectDataSource2" DataTextField="Name" DataValueField="Value"
                                            Skin="Vista">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Image:
                                    </td>
                                    <td>
                                        <input type="file" runat="server" id="inputFile" />
                                        <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" Skin="Vista" />
                                        <telerik:RadProgressArea ID="RadProgressArea1" runat="server" Skin="Vista" />
                                        <asp:Button runat="server" ID="ButtonCancel" Text="Cancel" CommandName="Cancel" />
                                        <asp:Button runat="server" ID="ButtonUpload" Text="Upload" CommandName="Update" />
                                        <asp:Image ID="PreviewImage" ImageUrl="" runat="server" Visible="false" />
                                    </td>
                                </tr>
                            </table>
                            <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                            </asp:Button>
                        </FormTemplate>
                        <PopUpSettings ScrollBars="None" />
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>

In which event can i catch the elements in the edit form and disable them accordingly so only some of them will show and others will not.  I am getting their values in update events with this code:

  if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
                {
                    GridEditFormItem editFormItem = e.Item as GridEditFormItem;
                    GridDataItem parentItem = editFormItem.ParentItem;
TextBox box = editFormItem.FindControl("txtWidth") as TextBox;

But this is too late, i need to get a reference to them before they are shown to the user and disable them accordingly.

[Princy]

Hello Aleks,

You can try the same code in the ItemDataBound event, as the EditForm elements can be accessed in this event, prior to the page being rendered.
c#:

protected void RadGridCardDetails_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editFormItem = e.Item as GridEditFormItem;
            GridDataItem parentItem = editFormItem.ParentItem;
            TextBox box = editFormItem.FindControl("txtWidth") as TextBox;
        }
   }

Thanks
Princy.

[Aleks A]

Thanks mate, that works perfectly.