jQuery UI Widgets Forums General Discussions Row Background Color

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 3 days, 10 hours ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Row Background Color #114644

    geromelouie
    Participant

    Hi,

    I am using JQXGrid to render data to my web page. What needs to happen is when I go into cell edit mode in one cell, I need the whole row where that cell belongs to be highlighted with some color.

    How can I achieve this please?

    Thanks!

    Row Background Color #114661

    Hristo
    Participant

    Hello geromelouie,

    It will be better if you could provide us with more details (one code snippet).
    Because if you edit the whole row you will see the other cells selected by default.
    In case you use the editmode: "selectedrow" option you could use the .jqx-fill-state-pressed input selector to add custom CSS settings for this row.
    I look forward to hearing from you.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Row Background Color #114685

    geromelouie
    Participant

    Hi Hristo,

    Thank you for getting back to me on this. I am currently using editmode=”dblclick” to get a cell into edit mode. Now, what needs to happen is the whole row where the cell I am editing is in must be highlighted with some color for me to know that I am at that row currently in case I need to scroll left or right.

    I am thinking of doing it on the cellendedit event however, I cannot find a property for the jqxgrid to do that.

    Just to add, I am using Angular and not JQuery

    Thanks!

    Row Background Color #114686

    geromelouie
    Participant

    Sorry, just to add, I am using Angular and not JQuery

    Row Background Color #114691

    Hristo
    Participant

    Hello geromelouie,

    The simplest way is to use the selectionmode: "singlecell" option:
    https://stackblitz.com/edit/github-1nhgcx-jpcy2j?file=src/app/app.component.ts

    Also, you could try to use the cellbeginedit and the cellclassname callbacks to customize the appearance of the edited row.
    Please, take a look at this example:
    https://stackblitz.com/edit/github-1nhgcx-8ptjsz?file=src%2Fapp%2Fapp.component.ts
    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.