How do I Hide the PrimaryKey column and specify template

[Samuel]

I am using Javascript with webapi. the webapi is not that important here. its the Javascript, 

How do i hide the primary key column ? In another scenario, I want to specify the tem[plate for each row to use, how can i do that?

Thanks

[Pavithra Subramaniyam]

Hi Samuel, 

 

Thanks for contacting Syncfusion support.  

 

Query #1: How do i hide the primary key column ? 

 

You can hide any column by disabling the “column.visible” property. Please refer to the below code example and Documentation link. 

 

[index.cshtml]  

      var grid = new ej.grids.Grid({ 

        dataSource: data, 

        allowPaging: true, 

        columns: [ 

            { field: 'OrderID', headerText: 'ID', visible:false, textAlign: 'Right', width: 120, isPrimaryKey: true }, 

            { field: 'CustomerID', headerText: 'Custome ID', textAlign: 'Right', width: 120 }, 

            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right' } 

        ] 

    }); 

 

    grid.appendTo('#Grid'); 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#visible  

 

Query #2: In another scenario, I want to specify the template for each row to use, how can i do that? 

 

You can achieve your requirement by using the “column.template” which is used to render custom elements in grid cells of each row. Please refer to the below Documentation link and demo link for more information. 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#template  

                              https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-template  

 

Demo                  : https://ej2.syncfusion.com/javascript/demos/#/material/grid/column-template.html  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Samuel]

Thank you so much, it worked as i integrated in your sample perfectly!

[Thavasianand Sankaranarayanan]

Hi Samuel, 

 

We are happy that the problem has been solved. 

 

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

                          

Regards, 

Thavasianand S.