Author Topic: Gray-out cell in table  (Read 4125 times)

elearnster

  • Pro Economy
  • Newbie
  • *
  • Posts: 20
    • View Profile
Gray-out cell in table
« 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Gray-out cell in table
« Reply #1 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

elearnster

  • Pro Economy
  • Newbie
  • *
  • Posts: 20
    • View Profile
Re: Gray-out cell in table
« Reply #2 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Gray-out cell in table
« Reply #3 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;
}

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Gray-out cell in table
« Reply #4 on: August 13, 2014, 09:02:00 pm »
Please let me know if you need any further assistance on this.

elearnster

  • Pro Economy
  • Newbie
  • *
  • Posts: 20
    • View Profile
Re: Gray-out cell in table
« Reply #5 on: August 13, 2014, 10:48:02 pm »
 Your explaination was helpful and I was able to gray and ungray the cells.  Thanks.