How to give custom Headertext name and validation in ChildData Vue Grid?

[Shivani]

Hello, 

SyncFusion Team,

How to give our own HeaderText Name in Child Data Grid in Vue?  

How to give validation in ChildGrid in Vue?
Please share with an example.

[Balaji Sekar]

Hi Shivani, 

Greetings from the Syncfusion support. 

Query #1: How to give our own HeaderText Name in Child Data Grid in Vue? 

Based on your query we have bound the custom HeaderText into the Child Grid component. Please refer the below code example for more information . 

[App.Vue] 

childGrid: { 

        dataSource: orderDatas, 

        queryString: "EmployeeID", 

        toolbar: ["Add", "Edit", "Delete", "Cancel"], 

        editSettings: { 

          allowAdding: true, 

          allowEditing: true, 

          allowDeleting: true, 

        }, 

        allowPaging: true, 

        pageSettings: { pageSize: 6, pageCount: 5 }, 

        columns: [ 

          { 

            field: "OrderID", 

            headerText: localizeArray.Lbl.period, 

            textAlign: "Right", 

            width: 120, 

          }, 

          { field: "ShipCity", headerText: localizeArray.Lbl.shipcity,validationRules:{required:true}, width: 120 }, 

          { field: "Freight", headerText: localizeArray.Lbl.freight, width: 120 }, 

          { field: "ShipName", headerText: localizeArray.Lbl.shipName, width: 150 }, 

        ], 

      }, 

    }; 

  }, 

Query #2: How to give validation in ChildGrid in Vue? 

We can achieve the validation in the childGrid component using column validation feature. Please refer the below code example and documentation for more information. 

[App.Vue] 

childGrid: { 

        .    .   .   .  

         columns: [ 

           

          { field: "ShipCity", headerText: localizeArray.Lbl.shipcity,validationRules:{required:true}, width: 120 }, 

          { field: "Freight", headerText: localizeArray.Lbl.freight, width: 120 }, 

          { field: "ShipName", headerText: localizeArray.Lbl.shipName, width: 150 }, 

        ], 

      }, 

    }; 

  }, 

Help Documentation of Column Validation: https://ej2.syncfusion.com/documentation/grid/edit/#column-validation  

We have created a sample with above query so please refer the below sample for more information. 

Sample link: https://codesandbox.io/s/vue-template-forked-eik0r?file=/src/App.vue  

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar