How to close RadGrid FormTemplate client side

[jlj30]

Hi,

I have an Update and Cancel button on my form template.

It seems unnecessary to incur a server call just to close the form when the user clicks on Cancel.

Ideally I want to call some client side code that will cause the form to be closed.

Here's the FormTemplate declaration:

<EditFormSettings InsertCaption="New Input" CaptionFormatString="Editing Input" CaptionDataField="BriefName" PopUpSettings-Modal="true" EditFormType="Template" PopUpSettings-ShowCaptionInEditForm="false">
    <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
    <FormTemplate>
        <div class="container-fluid">
            <div class="row row-margin-bottom">
                <div class="col-xs-12">
                    <asp:Label ID="lblReadOnly" runat="server" Text="** READ ONLY **" class="readOnly" Visible='<%# !(bool) Session["EditProcess"] %>'></asp:Label>
                    <div class="form-group">
                        <label>Name</label>
                        <span id="lblReqName" runat="server" class="requiredField" visible='<%# (bool) Session["EditProcess"] %>'></span>
                        <asp:RequiredFieldValidator runat="server" ID="valName" ControlToValidate="txtName" CssClass="bg-danger text-danger _validator" ErrorMessage="ooops... a name is required" Enabled='<%# (bool) Session["EditProcess"] %>'></asp:RequiredFieldValidator><br />
                        <telerik:RadTextBox ID="txtName" MaxLength='<%# (int) Session["MaxSingleLineSize"] %>' runat="server" Text='<%# Bind("Name") %>' Width="50%" InputType="Text" ToolTip="Provide a brief and meaningful name for this Input" Enabled='<%# (bool) Session["EditProcess"] %>' TabIndex="0">
                        </telerik:RadTextBox>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <span id="lblReqDesc" runat="server" class="requiredField" visible='<%# (bool) Session["EditProcess"] %>'></span>
                        <asp:RequiredFieldValidator runat="server" ID="valDesc" ControlToValidate="txtDesc" CssClass="bg-danger text-danger _validator" ErrorMessage="ooops.. a description is required" Enabled='<%# (bool) Session["EditProcess"] %>'> </asp:RequiredFieldValidator><br />
                        <telerik:RadTextBox ID="txtDesc" MaxLength='<%# (int) Session["MaxMultiLineSize"] %>' runat="server" Text='<%# Bind("Description") %>' Width="100%" Rows="4" InputType="Text" TextMode="MultiLine" Resize="Both" Wrap="True" data-toggle="tooltip" data-placement="top" title="Provide a detailed description for this Input" Enabled='<%# (bool) Session["EditProcess"] %>' TabIndex="1">
                        </telerik:RadTextBox>
                    </div>
                    <div class="form-group">
                        <label>Supplier</label><br />
                        <telerik:RadTextBox ID="txtSupplier" MaxLength='<%# (int) Session["MaxMultiLineSize"] %>' runat="server" Text='<%# Bind("Supplier") %>' Width="100%" InputType="Text" Rows="2" TextMode="MultiLine" Resize="Both" Wrap="True" ToolTip="Identify one or more sources for this particular Input" Enabled='<%# (bool) Session["EditProcess"] %>' TabIndex="2">
                        </telerik:RadTextBox>
                    </div>
                    <div class="checkbox">
                        <label>
                            <asp:CheckBox ID="chkTrigger" runat="server" AutoPostBack="false" Checked='<%# Bind("IsTrigger") %>' ToolTip="Check if this Input acts as a trigger to initiate a task within the process" Enabled='<%# (bool) Session["EditProcess"] %>' TabIndex="3"></asp:CheckBox>
                            <span data-toggle="tooltip" data-placement="right" title="Check if this Input acts as a trigger to initiate a task within the process">Trigger</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <asp:CheckBox ID="chkCommon" runat="server" AutoPostBack="false" Checked='<%# Bind("Common_Flag") %>' ToolTip="Check if this Input is suitable for use in other processes" Enabled='<%# (bool) Session["EditProcess"] %>' TabIndex="4"></asp:CheckBox>
                            <span data-toggle="tooltip" data-placement="right" title="Check if this Input is suitable for use in other processes">Common</span>
                        </label>
                    </div>
                    <div class="form-group">
                        <telerik:RadNumericTextBox ID="numListOrder" runat="server" Text='<%# Bind("ListOrder") %>'
                            Visible="false">
                        </telerik:RadNumericTextBox>
                    </div>
                </div>
            </div>
            <div class="row row-margin-bottom">
                <div class="col-xs-12">
                    <telerik:RadButton ID="btnAddUpdate" runat="server" Text='<%# ((bool) DataBinder.Eval(Container, "OwnerTableView.IsItemInserted")) ? "Create" : "Update" %>' Visible='<%# (bool) Session["EditProcess"] %>' CommandName='<%# ((bool) DataBinder.Eval(Container, "OwnerTableView.IsItemInserted")) ? "PerformInsert" : "Update" %>'>
                    </telerik:RadButton>
                    <telerik:RadButton ID="btnCancel" runat="server" Text='<%# ((bool) Session["EditProcess"]) ? "Cancel" : "Close" %>' CausesValidation="False" CommandName="Cancel">
                    </telerik:RadButton>
                </div>
            </div>
        </div>
    </FormTemplate>
    <PopUpSettings Width="90%" KeepInScreenBounds="True" Modal="True" ScrollBars="Auto"></PopUpSettings>
</EditFormSettings>

 

Thanks for any suggestions.

Jim

[Marin Bratanov]

Hi Jim,

This is the way the grid is designed to work. By default, the operations invoke a postback so they can change the control collection accordingly, so the client-side and server-side are kept in sync.

If you want this to be faster, I can offer a few suggestions:

• Consider hiding the form template with JS by traversing the DOM. I cannot guarantee this will not cause side effects, though, it has not been tested or supported.
• Consider using the Batch Edit mode or the InPlace edit mode if you need faster operations.
• Consider editing with an external popup like in this demo: http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window.

Regards,

Marin Bratanov
Progress Telerik