cellclassname on button

[PietervkParticipant]

Hi,
I have added a button in a cell, and would like to give it a custom class:

{
            text: 'Word Rapport',
            dataField: 'word',
            width: 150,
            columntype: 'button',
                 cellsrenderer: function () {
                return 'Open in Word';

            },
            buttonclick: function (row) {
              //do somthing
            }
        }

Is it possible to add a class to that button, or override one of the existing classes (without applying the effect to all buttons)?

[StanislavParticipant]

Hello Pietervk,

Take a look at this forum post: Link

Best Regards,
Stanislav

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

[PietervkParticipant]

Hi Stanislav,
in that post you say you cant change the button itself, but you can change it’s css. What class should I change with css, so it changes the button, but not other buttons?

<input type="button" style="opacity: 0.99; position: absolute; top: 0%; left: 0%; padding: 0px; margin-top: 2px; margin-left: 2px; height: 24px; width: 146px;" value="Open in Word" hidefocus="true" id="jqxWidget4a0396b9580d" role="button" class="jqx-rc-all jqx-rc-all-energyblue jqx-button jqx-button-energyblue jqx-widget jqx-widget-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue" aria-disabled="false">

Or are you trying to tell me that I should change this to a DataTable?

Basically I just want to add an icon to the button for consistency with my other buttons

.btn-icon-word {
    background-image: url('images/word18.png');
    background-position: 7px;
    padding: 7px 7px 7px 33px;
}

[StanislavParticipant]

Hello Pietervk,

You can get elements with CSS by selecting their class or their id.

Your button should have a unique id, use it to select the button instead of a class.

#ButtonID {
    background-image: url('images/word18.png');
    background-position: 7px;
    padding: 7px 7px 7px 33px;
}

Best Regards,
Stanislav

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

[PietervkParticipant]

Hi Stanislav,
that is what my question is about. Please read the first post in this topic: what is the the class that I can use to identify the button?

This is the HTML that is generated, there is no ID on the button, and all the classes are generic and used elsewhere on the grid:

<div role="gridcell" style="left: 648px; z-index: 77; width:150px;" class="jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue jqx-grid-cell-selected jqx-grid-cell-selected-energyblue jqx-fill-state-pressed jqx-fill-state-pressed-energyblue">
    <input type="button" style="opacity: 0.99; position: absolute; top: 0%; left: 0%; padding: 0px; margin-top: 2px; margin-left: 2px; height: 24px; width: 146px;" value="Open in Word" hidefocus="true" id="jqxWidget59025e25d087" role="button" class="jqx-rc-all jqx-rc-all-energyblue jqx-button jqx-button-energyblue jqx-widget jqx-widget-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue" aria-disabled="false">
    </div>
</div>

Your product is excellent, but getting support is rather difficult. The pattern is you and your colleagues throw demo’s to every question(and yes the demos are excellent, so I understand why you do this), but if the demo is not applicable, it is hard to get to the next level and get people really looking at your question. I understand this does not sound friendly, but please take it as constructive criticism. It is also not just you, it is the whole company. Browsing through the forum, I am pretty sure I am not the only one feeling this.

[PietervkParticipant]

Any answer to this please?

[StanislavParticipant]

Hello Pietervk,

You can take a look at this demo: Link
It has exactly a button with an image and text in a cell.

If you don’t want to use it, you can see cellsrenderer. With its help, you can create other widgets inside the cells of the grid.
It also has some properties that might be of big help to you.

Best Regards,
Stanislav

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

[Author]

Posts