jsgrid field "required" inside dialog doesn't work

Question

I want to set the field with name: "Name" as required and I inserted : validate: "required" according to the jsgrid documentation(http://js-grid.com/docs/#grid-fields) but it doesn't work.

When inserting validate: "required" in my below code for jsgrid field: Name jsgrid doesn't take the required limitation and inserting blocks!! I am almost sure that the fact that I enclose my grid inside a dialog creates the problem since validate is a parameter that can be defined both in dialog and jsgrid.

This is the code with dialog, in which I successfully display my grid inside a dialog but I cannot pass validate:"required". I also uploaded and a screenshotGrid inside dialog :

$( "#DataGrid" ).dialog({minWidth: 1000, minHeight: 500});
            $("#DataGrid").jsGrid({
                    height: "100%",
                    width: "70%",
                    filtering: true,
                    editing: true,
                    inserting: true,
                    sorting: true,
                    paging: true,
                    autoload: true,
                    pageSize: 15,
                    pageButtonCount: 5,
                    datatype: "json",
                    deleteConfirm: "Do you really want to delete the client?",
                    controller: db,
                    fields: [
                        { name: "Id", align: "center", width: 45 },
                        { name: "Name", validate:"required," align: "center", type: "text", width: 45 },
                        { name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
                        { name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
                        { name: "Initial Value", align: "center", type: "text", width: 40 },
                        { name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
                        { name: "Worklist Order", align: "center", type: "number", width: 20 },
                        { name: "DB Datatype", align: "center", type: "text", width: 25 },
                        { name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
                        { name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
                        { type: "control", width: 25 }
                    ]

            });

I tried the jsgrid code without dialog and it works but how will it work inside the dialog? This code without dialog works:

 $("#DataGrid").jsGrid({
                height: "100%",
                width: "70%",
                filtering: true,
                editing: true,
                inserting: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 15,
                pageButtonCount: 5,
                datatype: "json",
                deleteConfirm: "Do you really want to delete the client?",
                controller: db,
                fields: [
                    { name: "Id", align: "center", width: 45 },
                    { name: "Name", validate:"required", align: "center", type: "text", width: 45 },
                    { name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
                    { name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
                    { name: "Initial Value", align: "center", type: "text", width: 40 },
                    { name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
                    { name: "Worklist Order", align: "center", type: "number", width: 20 },
                    { name: "DB Datatype", align: "center", type: "text", width: 25 },
                    { name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
                    { name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
                    { type: "control", width: 25 }
                ]

        });

Any ideas please? It is a complex issue.

Answer 1

Ok thanks to @tabalin's help I solved the problem. I had one less jsgrid archive. Now it works like a charm!