Edit layout of selected row

[Klaus HParticipant]

Hello,

I want to achieve the following situation:
I have an editable grid, and once a row is selected, I want to highlight the mandatory fields.

My first step would be to identify the selected row, which is a piece of cake with the rowselect event.

Now, from there it gets tricky for me, because in the API I don’t find any clue how to access a cell of a selected row and change the layout (with a css class, or a cell renderer just for this cell). I thought I read something about changing a css class of a cell in a posting here, but I can’t find it anymore. And so I am not sure if this was about changing the css class of a single cell or a whole column.

So, is there a way to achieve this, e.g. add a css class that overrides the border information of the cell and removing that class in the rowunselect event?

Kind Regards
Klaus

[Peter StoevKeymaster]

Hi Klaus,

I am afraid that it is not possible to edit the Grid’s CSS through the API when you select/unselect a row. If you want to modify the Grid’s CSS selection states, I suggest you to edit the CSS properties in jqx.base.css and the other CSS Theme file that you use.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Klaus HParticipant]

Hello Peter,

thank you for the feedback, I don’t think a simple css solution would work, because it would need to be conditionial (if the cell has the classes jqx-grid-cell-selected and a class mandatory via the cellclassname property).

The closest I came to a solution was using two classes. One dummy class, I set to the column via cellclassname. Then, in the rowselect event I would trigger a setTimeout function because when the event is fired, the class is not yet selected and the columns don’t have the jqx-grid-cell-selected class. In the timeout function I would loop through all elements with the class jqx-grid-cell-selected and check if they have the dummy class and add the mandatory class. That worked well – but once I scroll in the grid, there is some kind of rendering going on and my change is gone.

Kind Regards
Klaus

Edit: My mistake, CSS can handle a rule when an element has two classes:

div.jqx-grid-cell-selected.mandatory
{
	border-color: 1px solid red;
}

I did not know that and never needed that before. So problem solved, Thank you again!

[Peter StoevKeymaster]

Hi Klaus,

Dynamically applying CSS classes or dynamically inserting HTML content via jQuery selection is something which is not supported in our Grid. That is because of the Virtualization where all HTML Elements in the widget are Reused. For custom HTML content or custom CSS classes you should use either the column’s “cellsrenderer” or the “cellclassname”. Please note that “cellclassname” can be a function, too and can dynamically return a Cell Class Name since ver. 2.8.3.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Klaus HParticipant]

Hello Peter,

thank you for the additional information, I will keep that in mind.

[Author]

Posts