We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.



1 Reply 1 reply marked as answer

BS Balaji Sekar Syncfusion Team October 28, 2020 03:40 PM UTC


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


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


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

Regards, 
Balaji Sekar 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon