Batch Editing Extensions - Related RadComboBoxes and Batch Validation

5 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 15 Feb 2015 Link to this post

    Requirements

    Telerik Product and Version

    Q3 2014 (2014.3 1209) or above

    Supported Browsers and Platforms

    All supported browsers 

    Components/Widgets used (JS frameworks, etc.)

    jQuery
    PROJECT DESCRIPTION

    This Code Library provides an extension for the RadGrid Batch Editing functionality, which allows you to implement related RadComboBoxes functionality between column and to set Batch Validation. Each of the functionalities is easily integrated with RadGrid in Batch edit mode through separate managers.

    Batch Extensions


    Related RadComboBoxesManager 


    Due to the way that Batch Editing is implemented, having related drop down controls with enabled LoadOnDemand functionality is almost impossible to be achieved or will require a ton of custom JavaScript. In the attached BatchExtensions object in this Code Library, the RelatedComboBoxesManager simulates such functionality by displaying a RadToolTip with RadComboBox control over the currently edited cell. The only thing that you need to do to enable the related RadComboBox functionality is to set the grid object, specify the RadToolTip containing the RadComboBox control, set the columns relationships and handle the server-side OnItemsRequested event of the RadComboBox to provided the data. Everything else will be handled by the manager.


    Integration

    Before you start the integration of the RelatedComboBoxesManager, you need to include the batchManagerExtensions.js and batchManagerExtensions.css files in your project. After including those files, you will have to follow the steps below:

    1) Copy and paste the following RadToolTip within the same container as the RadGrid (especially when you are using RadAjax):
    <telerik:RadToolTip runat="server" ID="RelatedComboBoxesToolTip" OffsetY="0" RenderInPageRoot="false"
        HideEvent="FromCode" AutoCloseDelay="0" RelativeTo="Element" CssClass="RelatedCombosToolTip"
        ShowEvent="FromCode" Position="Center" Skin="Default">
        <telerik:RadComboBox runat="server" Width="100%" EnableLoadOnDemand="true" OnItemsRequested="RadComboBox1_ItemsRequested">
        </telerik:RadComboBox>
        <telerik:RadToolTip runat="server" Skin="Metro" OffsetY="0" EnableShadow="false" ShowEvent="FromCode" Position="TopCenter"></telerik:RadToolTip>
    </telerik:RadToolTip>


     2) Add the server-side handler for the OnItemsRequested event of the RadComboBox. Within that event you will have access to the column name and the related cell value, which should be enough for getting the items that should be displayed in a particular cell:
    protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        RadComboBox comboBox = sender as RadComboBox;
        string columnName = e.Context["ColumnName"].ToString();
        string relatedValue = e.Context["RelatedValue"] != null ? e.Context["RelatedValue"].ToString() : "";
         
        // Get the data and create Items for the RadComboBox
        ...


     3) The next step is to attach event handler for the client-side OnGridCreated event, where we will initialize the RelatedComboBoxesManager:
    function gridCreated(sender, args) {
        var relatedComboBoxesManager = new BatchExtensions.RelatedComboBoxesManager().init({
            grid: sender,
            toolTipID: "<%=RelatedComboBoxesToolTip.ClientID%>",
            relations: [
                {
                    columnName: "Continent"
                },
                {
                    columnName: "Country",
                    relatedTo: "Continent"
                },
                {
                    columnName: "City",
                    relatedTo: "Country"
                }
            ]
        });
    }


    Important Note

    The RelatedComboBoxesManagers will work with bound columns and GridTemplateColumn with the following ItemTemplate:
    <ItemTemplate>
        <%# Eval("City") %>
    </ItemTemplate>

    You should also have in mind that RelatedComboBoxesManager will work only with Cell edit mode.



    Batch Validation - ValidationManager

    Although that Batch Editing supports standard Validatiors, they do not provide a great user experience in the context of Batch Editing, because the user will not be able to leave the cell until the values is valid. Furthermore, the error messages will be displayed besides the editor, which could lead to distorted layout of the grid. The ValidationManager from the BatchExtensions is created to handle the validation with Batch Editing in very user-friendly manner, where the error messages is displayed in the cells (in normal mode) and the user will still be able to perform other operations, even if there is failed validation. 

    Integration

    Before you start the integration of the ValidationManager, you need to include the batchManagerExtensions.js and batchManagerExtensions.css files in your project. After including those files, you will have to follow the steps below:

    1) Attach event handler for the client-side OnGridCreated event of your RadGrid:
    <ClientSettings>
        <ClientEvents OnGridCreated="gridCreated" />
    </ClientSettings>

    2) Within the handler for the OnGridCreated event, initialize a new ValidationManager for the grid and set your validators for the column that you need to validate:
    function gridCreated(sender, args) {
        grid1Validator = new BatchExtensions.ValidationManager().init({
            grid: sender,
            validators: [
                {
                    columnName: "Continent",
                    errorMessage: "- Required -"
                },
                {
                    columnName: "Country",
                    errorMessage: "- Required -"
                },
                {
                    columnName: "City",
                    errorMessage: "- Required -"
                },
                {
                    columnName: "Numeric",
                    errorMessage: "",
                    toolTipMessage: "Select a positive number",
                    validationFunction: function (value) {
                        return value >= 0;
                    }
                },
                {
                    columnName: "Date",
                    errorMessage: "Select a future date",
                    validationFunction: function (value) {
                        return !(Date.parseInvariant(value) < new Date().setHours(0, 0, 0, 0));
                    }
                }
            ]
        });
    }

    As you can notice, each validator accepts the columnName (required) and the following optional properties:
    • errorMessage - The message that will be displayed within the cell on failed validation;
    • toolTipMessage - The message that will be displayed on hovering over a cell with failed validation;
    • validationFunction - Custom validation function that has the current value as an argument and defines on what conditions the value is valid.


    ValidationManager Methods 

    • add_validator({...}) - adds new validator to the ValidationManager:
    grid1Validator.add_validator(
            {
                columnName: "Continent",
                errorMessage: "- Required -"
            }
    );

    • add_elementToDisable(element) - adds an element that will be disabled when RadGrid is invalid and has cells with failed validation. By default, the Save Changes button of RadGrid is included in this collection of elements and the user will not be able to save the changes, unless all cells are valid:
    grid1Validator.add_elementToDisable(document.getElementById("<%= Button1.ClientID %>"));

    • isValid() - this method will return true if all the cells in the grid are valid (this method could be useful within the client-side OnUserAction event of the grid, where you can prevent paging, sorting, filtering, etc., if there is failed validation): 
    function userAction(sender, args) {
        if (!grid1Validator.isValid()) {
            args.set_cancel(true);
        }
    }



  2. IMF
    IMF avatar
    12 posts
    Member since:
    Jun 2012

    Posted 28 Apr 2015 in reply to Telerik Admin Link to this post

    How can i include the libraries into the project?
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 30 Apr 2015 Link to this post

    Hi,

    As mentioned in the description (and as could be seen in the attached page), you need to include the batchManagerExtensions.js and batchManagerExtensions.css files in your project:
        <link href="batchManagerExtensions.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                    <asp:ScriptReference Path="batchManagerExtentions.js" />
                </Scripts>
            </telerik:RadScriptManager>


    Regards,
    Konstantin Dikov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  4. Jesús
    Jesús avatar
    53 posts
    Member since:
    Oct 2007

    Posted 14 Apr in reply to Konstantin Dikov Link to this post

    I'm using this sample as a starting for a screen behaviour we want.

    I "copied" the sample to study how it works and, then, make the corrections we need.

    For my surprise, when I change the value of a combo and then I click the "tab" to go to next field, the next "editable" field will be the navigation bar, not the next combo.

    Is there any way to avoid this?

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 18 Jul Link to this post

    Hello,

    The attached files are updated and the extension for the related RadComboBoxes now handles correctly the TAB key.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top