How to close RadGrid FormTemplate client side

2 posts, 0 answers
  1. jlj30
    jlj30 avatar
    102 posts
    Member since:
    Jan 2011

    Posted 10 Oct 2017 Link to this post

    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

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4811 posts

    Posted 13 Oct 2017 Link to this post

    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:


    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top