ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: elearnster on August 08, 2014, 10:10:18 pm

Title: Gray-out cell in table
Post by: elearnster on August 08, 2014, 10:10:18 pm

I would like to be able to gray-out cells until certain other cells in the table have been completed.  Could you provide me with the API?
Thanks you.

Title: Re: Gray-out cell in table
Post by: paramvir on August 08, 2014, 11:10:54 pm

Please follow these steps:

1) Add some class e.g., gray_cls to the cells which you want to be grayed out.

Example: http://paramquery.com/pro/demos/row_styles

2) use cellSave event to determine when other cells are completed and remove the class gray_cls from cells when your condition is met.

http://paramquery.com/pro/api#event-cellSave

3) Use column.editable callback to make the cells with class gray_cls uneditable.

http://paramquery.com/pro/api#method-hasClass
http://paramquery.com/pro/api#option-column-editable

Title: Re: Gray-out cell in table
Post by: elearnster on August 09, 2014, 10:52:15 am

I reviewed the sample program, but was unable to apply any color to a specific cell in my program.  It is not clear to me how to add a class and activate it.  Could you provide me an example of the code that creates a class and applies a color to a specific cell and then changes it back?  Any help would be appreciated.

Title: Re: Gray-out cell in table
Post by: paramvir on August 11, 2014, 11:05:04 am

It's assumed you have basic know how of css.

In this demo

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

Data for row 4 is:

Code: [Select]

{ rank: 4, company: 'BP', revenues: '267,600.0', profits: '22,341.0', pq_rowcls: "red", pq_cellcls: { "company": "green"} }

whereby you add green class to cell with dataIndx = 'company' using JSON notation. Classes can also be dynamically added with addClass method (line 60 ) and removed with removeClass method (line 67).

To change the color of cell, you have to write css rule. Please refer to css tab in the same demo.

Code: [Select]

tr td.green
{
    background:lightgreen;
    color:Red;
}


Title: Re: Gray-out cell in table
Post by: paramvir on August 13, 2014, 09:02:00 pm

Please let me know if you need any further assistance on this.

Title: Re: Gray-out cell in table
Post by: elearnster on August 13, 2014, 10:48:02 pm

 Your explaination was helpful and I was able to gray and ungray the cells.  Thanks.