Kendo Grid UI Required validation not working

4 posts, 0 answers
  1. ARJUN
    ARJUN avatar
    2 posts
    Member since:
    Dec 2017

    Posted 08 Dec 2017 Link to this post

    I am new to Kendo UI and trying to implement required field validation inside Kendo grid. All the functionalities like add/update/delete functionalities are working except required field validation.

     

    $(document).ready(function () {
     
     
        var dataSource1 = new kendo.data.DataSource({
            batch: true,
            transport: {
     
               // PUT /POST Codes
     
            },
            error: function(e){
                alert('Error code: ' + e.xhr.status + ' - The application encountered an issue please try again. If issue persist contact grh support team');
            },
            pageSize: 500,
            schema: {
                model: {  id:"Id", fields : { firstname : { editable : true , validation : { required : true }, type : "string" },createdby : { editable: false, defaultValue: "arjun.vadi"},createddate : { editable: false },modifiedby : { editable: false },modifieddate : { editable: false },tz : { editable: false, defaultValue: new Date().toString().substr(28,5) }} }
            },
        });
     
        var grid = $("#grid").kendoGrid({
            height: 620,
            dataSource: dataSource1,
            toolbar: ['create', 'save', 'excel'],
            excel: {
                fileName: "TestMandate" + "_Export.xlsx",
                allPages: true
            },
            pageable: {
                numeric: false,
                previousNext: false,
                messages: {
                    display: "Total: {2}"
                }
            },
            navigatable: true,
            sortable: true,
            filterable: true,
            resizable: true,
            scrollable: true,
            editable: true,
            columns: [
                { command: [{ name: "destroy", text: "", width: "60px" }], title: " ", width: "100px" },
                { field: "firstname",title:"FirstName",editor: JSHelper.stringEditor, width: 100 , filterable: { multi: true, search: true } },{ field: "createdby",title: "Created By", width: 100, filterable: { multi: true, search: true } },{ field: "createddate",title: "Created Date", width: 100, editor : JSHelper.dateAdminEditor, template: "#= kendo.toString(kendo.parseDate(createddate), 'dd MMM yyyy hh:mm') #", filterable: { multi: true, search: true } },{ field: "modifiedby", title: "Modified By", width: 100, filterable: { multi: true, search: true, search: true } },{ field: "modifieddate", title: "Modified Date", width: 100, editor : JSHelper.dateAdminEditor,  template: "#= kendo.toString(kendo.parseDate(modifieddate), 'dd MMM yyyy hh:mm') #", width:150, filterable: { multi: true, search: true } },
            ],
     
        });
    });

     

     

  2. Stefan
    Admin
    Stefan avatar
    1934 posts

    Posted 12 Dec 2017 Link to this post

    Hello, Arjun,

    Thank you for the provided code.

    After making an example based on it, the validation was correctly shown in the first name column after adding a new item and blurring before adding a value:

    http://dojo.telerik.com/afESo

    As I noticed that the field is originally using a custom editor, please try setting the required attribute directly to the input element used for initializing the editor. The same approach is used in our custom editor demo:

    https://demos.telerik.com/kendo-ui/grid/editing-custom

    $('<input required name="' + options.field + '"/>')

    If the issue still occurs, please modify the example to reproduce the issue and I will gladly assist further.

    Regards,
    Stefan
    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.
  3. ARJUN
    ARJUN avatar
    2 posts
    Member since:
    Dec 2017

    Posted 19 Dec 2017 Link to this post

    Thanks Stefan for the response. I have tried to iterate through each cell to make the validation working while SaveChanges.

    Attaching my solution for better understanding.

    Now I am stuck with alignment issue of Kendo Grid Validation Message for dropdown. For text-box, validation message shows correctly and for dropdown it shows partially as the next row overlaps the validation message as in the below image.
    I have tried many workarounds and couldn't fix this. Please help.(I am unable to create a new thread)

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2019 posts

    Posted 20 Dec 2017 Link to this post

    Hi Arjun,

    I ran the sample and noticed that the HTML for the Grid widget was hardcoded in a div element. Also, there were custom styles applied on the page. After removing the hardcoded HTML and the custom styles I added a dummy item in the DataSource in order to run the sample. 

    I noticed that the "dd" field was not marked as required in the DataSource model. Furthermore, the required attribute was not added to the input used for initializing the custom editor. 

    After adding the modifications the validation was displayed as expected on my end. 


    schema: {
        model: { 
            id:"Id",
            fields :
                {
                    tempvalue : { editable : true , validation : { required: false }, type : "string" },
                    firstname : { editable : true , validation : { required: true,CheckLength: function(input) { input.attr('data-CheckLength-msg', 'This is a mandatory field');return (input.val() != null && input.val() != ''); } }, type : "string" },
                    dd : { editable : true , type : "string", validation : { required: true } },
                    lastname : { editable : true , validation : { required: true, CheckLength: function(input) { debugger;input.attr('data-CheckLength-msg', 'This is a mandatory field'); return false; } }, type : "string" },createdby : { editable: false, defaultValue: "Arjun"},createddate : { editable: false },modifiedby : { editable: false },modifieddate : { editable: false },tz : { editable: false, defaultValue: new Date().toString().substr(28,5) }} }
    },


    The custom editor definition would look similar to this:

    function stringDropDownEditor(container, options) {
        var model = options.model;
        $('<input required name="' + options.field + '" />')
            .appendTo(container).kendoDropDownList({
                dataTextField: "DefaultValue",
                dataValueField: "DefaultValue",
                valuePrimitive: true,
                autoBind: false,
                dataSource: {
                    data: [{"DefaultValue": "DefaultValue1"}, {"DefaultValue": "DefaultValue2"}]
                },
            });
     
            $("<span class='k-invalid-msg' data-for='" + options.field + "'></span>").appendTo(container);
    }


    You will notice that there is an additional span added that will be used to hold the validation message.

    For your convenience I am attaching the modified sample. Give it a try and let me know how it works for you.


    Regards,
    Viktor Tachev
    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