Highlight the inline edit cells by default

[Sunny]

Hi,

Instead of calling addClass on the editable columns(or cells),  is there a way to highlight them by default if the cell is marked for inline edit ?

Thanks.

[paramvir]

They are not highlighted by default and left to the user for performance and flexibility reasons. There are couple of ways to highlight editable cells.

1. addClass can be used if style is changed via classes.
2. attr can be used if style is changed via inline css.

The above methods can be called from column.render callback or rowInit callback.

[Sunny]

I retrieve the column model in the form of Json data from database, the columns are configurable to editable or not in the database.

As the column model of my grid is dynamic,I don't think I could use the callback functions you mentioned above.

Is there any other way to find out the editable columns in the grid, like the columns which has the property editable:"true"  and highlight those columns with some color.

FYI: The grid I am working contains around 60 columns and 800 rows with out pagination. So the user wants to highlight the columns that can be editable.

[paramvir]

Thanks for describing your scenario.

1. you can add render callback to columnTemplate which would automatically add render to all columns upon grid initialization.
http://paramquery.com/pro/api#option-columnTemplate

2. But if you need to highlight the whole columns ( instead of individual cells ) that is more simple than in case of cells. you can do that by adding cls property to the columns either on the server side or when Json data is loaded from database.

for (var i =0; i < colModel.length; i++ ){
  var column = colModel [ i ];
  if ( column.editable !== false ){
    column.cls = "some class here";
  }
}

Notice how the class cls: 'beige' is added to the Country column in this demo.

http://paramquery.com/pro/demos/readonly_cells

[Sunny]

Thank you for prompt reply.

Adding 'cls' property to the editable column on server side helped to highlight the columns. But the column header has also been highlighted, which looks weird. Looking deeply, noticed in the example you provided has the column header with '<th>' tags but the columns in the grid I used as <td> tags in the header row. I am not sure, why <td> tags are rendered in the header row instead of <th>, do you know why?

Thanks.

[paramvir]

version 3.0.0 has <th> while v2.x has <td> in the header.

you can combine the body cell class with your class to apply the class rules to body cells only.

.pq-grid-cell.your_class{
  color: red;
}

[Sunny]

thank you, it worked!