Validation Messages not showing on custom editors in grid

2 posts, 0 answers
  1. Neil
    Neil avatar
    1 posts
    Member since:
    Nov 2012

    Posted 22 Jan 2014 Link to this post

    When using a custom editor on  a grid field, validation messages are being hidden by the grid. 
    I have set up an example here: http://plnkr.co/edit/YpH6GfYJnllVntC1fx7r?p=preview 
    1. Click on a row in the Category column to activate the editor
    2. Delete the text in the combo box.
    3. Click elsewhere in the grid.

    The Category Column field remains active but there is no validation message.  The UI now appears broken as you can no longer edit other fields.

    Note that the validation message is being activated but it is not visible as it is hidden by the grid.  This can be shown by adding the css rule below.

    .k-grid td{
      padding-bottom:2em;!important
    }
    Is there a way to have Custom Editors with validation in a grid?

    Thanks,

    Neil

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 24 Jan 2014 Link to this post

    Hi Neil,

    As you may know when using widgets such as Kendo UI Combobox, AutoComplete, etc. you will need to set custom position for the validator's message via a custom placeholder. Also note that the element to be validated should have a name attribute set. Here is how the editor function from your sample should look like:

    function categoryDropDownEditor(container, options) {
        $('<input name="CategoryName" required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoComboBox({
                autoBind: false,
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                    }
                }
            });
            $('<span class="k-invalid-msg" data-for="CategoryName"></span>').appendTo(container);
    }


    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top