Kendo Grid UI Required validation not working

[ARJUN]

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 } },
        ],

    });
});

 

 

[Stefan]

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

[ARJUN]

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)

[Viktor Tachev]

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