[fritzfrancisParticipant]

Thanks, Dimitar. This looks like an excellent and elegant solution. Unfortunately, with the rowdetails, all of my rows are auto-expanding as soon as the grid binding is complete. I searched on the forum and saw Peter mention a property called rowdetailshidden, but could not find any such property in the documentation. Could you let me know how I can prevent these rows from being expanded by default? I am using jQWidgets 3.8.0.

Thanks,
Fritz Francis

[fritzfrancisParticipant]

There it is! Thanks.

[fritzfrancisParticipant]

Hello Dimitar,

Thanks for your reply. We will work around it. Would you guys possibly consider developing this functionality in a future update? It would be very helpful, seeing that jQWidgets is great for MVVM frameworks.

Regards,
Fritz Francis

[fritzfrancisParticipant]

Nadezhda,

Thanks for that reference. Because this won’t be possible with jqxWidgets, I will proceed with using the title attribute.

Regards,
Fritz Francis

[fritzfrancisParticipant]

Dimitar,

That did the trick. Thank you.

Regards,
Jacob Stamm

[fritzfrancisParticipant]

Dimitar,

Unfortunately, this did not work. I tried every combination of colspans on the <td>’s for both <tr>’s. Now, I’ve essentially “spammed” all of the align properties hoping that one of them will work, but no luck. here’s what that table looks like now.

            <table style="margin-top: 0px">
                <tr>
                    <td style="padding-top: 8px; text-align: center;">
                        <input type="button" value="A" class="letterButton" id="A"/>
                        <input type="button" value="B" class="letterButton" id="B"/>
                        <input type="button" value="C" class="letterButton" id="C"/>
                        <input type="button" value="D" class="letterButton" id="D"/>
                        <input type="button" value="E" class="letterButton" id="E"/>
                        <input type="button" value="F" class="letterButton" id="F"/>
                        <input type="button" value="G" class="letterButton" id="G"/>
                        <input type="button" value="H" class="letterButton" id="H"/>
                        <input type="button" value="I" class="letterButton" id="I"/>
                        <input type="button" value="J" class="letterButton" id="J"/>
                        <input type="button" value="K" class="letterButton" id="K"/>
                        <input type="button" value="L" class="letterButton" id="L"/>
                        <input type="button" value="M" class="letterButton" id="M"/>
                        <input type="button" value="N" class="letterButton" id="N"/>
                        <input type="button" value="O" class="letterButton" id="O"/>
                        <input type="button" value="P" class="letterButton" id="P"/>
                        <input type="button" value="Q" class="letterButton" id="Q"/>
                        <input type="button" value="R" class="letterButton" id="R"/>
                        <input type="button" value="S" class="letterButton" id="S"/>
                        <input type="button" value="T" class="letterButton" id="T"/>
                        <input type="button" value="U" class="letterButton" id="U"/>
                        <input type="button" value="V" class="letterButton" id="V"/>
                        <input type="button" value="W" class="letterButton" id="W"/>
                        <input type="button" value="X" class="letterButton" id="X"/>
                        <input type="button" value="Y" class="letterButton" id="Y"/>
                        <input type="button" value="Z" class="letterButton" id="Z"/>
                        <input type="button" value="ALL" class="letterButton" style="width:38px" id="ALL"/>
                    </td>
                </tr>
                <tr style="text-align:center; align-content: center; align-items: center;">
                    <td style="text-align:center; align-content: center; align-items: center;">
                        <div style="text-align:center; align-content: center; align-items: center;" id="jqxGrid23" class="jqxGrid"></div>
                    </td>
                </tr>
            </table>

Note that none of the <td>’s have a colspan anymore. The one I had on the first <td> was unnecessary. Any suggestions?

[fritzfrancisParticipant]

Dimitar,

Thanks for pointing me to the appropriate documentation. This functionality, especially the cellhover function, have proven to be extremely useful for our website already. I do hope that you and your team decide to move cellhover from just an internally used function to a publicly supported one, whenever the time to decide arrives.

Regards,

Fritz

[fritzfrancisParticipant]

Dimitar,

Thank for your prompt response. The cellhover event, getcellatposition method, and cell object are all very handy. Here’s the example I’m referring to regarding those three items in bold:

$(“#jqxGrid15”).jqxGrid
(
{
cellhover: function (element, X, Y)
{
var cell = $(“#jqxGrid15”).jqxGrid(“getcellatposition“, X, Y);
alert(cell.column);
}
}
);

Until such time that the API documentation is updated, would you please give me whatever documentation you have on hand having to do with the items in bold? Most specifically, I would love to know all of the properties/methods/etc. associated with the cell object.

Regards,

Fritz

[fritzfrancisParticipant]

Is that part of the DOM specification or is that particulat to jqWidget’s API? If it is unique to the jqWidget’s API, then can you include that event in the API documentation for the components that it applies to?

[fritzfrancisParticipant]

Dimitar,

Thank you. I created another theme first which is not seeming to have the problem, and will paste it below if it will help you investigate. They are very similar, and the only intentional differences I made are that the one from my original post has a few minor color differences and some transparent borders.

.jqx-widget-S101Blue
{
font-family: Verdana;
}
.jqx-widget-content-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #AAAAAA;
background: #ffffff;
font-family: Verdana;
}
.jqx-widget-header-S101Blue, .jqx-grid-S101Blue .jqx-widget-header-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #AAAAAA;
background-color: #3C7FB6;
background-image: -moz-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -ms-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -o-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -webkit-gradient(linear, center top, center bottom, from(#3C7FB6), to(#285E8C));
background-image: -webkit-linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(to bottom, #3C7FB6, #285E8C);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: Verdana;
}
.jqx-grid-column-menubutton-S101Blue, .jqx-widget-S101Blue.jqx-grid-column-menubutton-S101Blue
{
border-color: #AAAAAA;
}
.jqx-grid-cell-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-S101Blue
{
background-color: #ffffff;
color: #222222;
text-shadow: none;
}
.jqx-fill-state-normal-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #aaaaaa;
background-color: #3C7FB6;
background-image: -moz-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -ms-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -o-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -webkit-gradient(linear, center top, center bottom, from(#3C7FB6), to(#285E8C));
background-image: -webkit-linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(to bottom, #3C7FB6, #285E8C);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: Verdana;
}
.jqx-button-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #aaaaaa;
background-color: #3C7FB6;
background-image: -moz-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -ms-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -o-linear-gradient(top, #3C7FB6, #285E8C);
background-image: -webkit-gradient(linear, center top, center bottom, from(#3C7FB6), to(#285E8C));
background-image: -webkit-linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(top, #3C7FB6, #285E8C);
background-image: linear-gradient(to bottom, #3C7FB6, #285E8C);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: Verdana;
}
.jqx-grid-selectionarea-S101Blue
{
border-color: #aaaaaa;
background-color: #3C7FB6;
}
.jqx-widget-S101Blue .jqx-grid-cell-sort-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-filter-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-pinned-S101Blue, .jqx-grid-cell-sort-S101Blue, .jqx-grid-cell-filter-S101Blue, .jqx-grid-cell-pinned-S101Blue
{
background-color: #C5E6FF;
color: #222222;
text-shadow: none;
}
.jqx-widget-S101Blue .jqx-grid-cell-alt-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-sort-alt-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-pinned-alt-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-filter-alt-S101Blue, .jqx-grid-cell-alt-S101Blue, .jqx-grid-cell-sort-alt-S101Blue, .jqx-grid-cell-filter-alt-S101Blue
{
background-color: #C5E6FF;
color: #222222;
text-shadow: none;
}
.jqx-fill-state-hover-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-hover-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #999;
background-color: #285E8C;
background-image: -moz-linear-gradient(top, #285E8C, #0E3E64);
background-image: -ms-linear-gradient(top, #285E8C, #0E3E64);
background-image: -o-linear-gradient(top, #285E8C, #0E3E64);
background-image: -webkit-gradient(linear, center top, center bottom, from(#285E8C), to(#0E3E64));
background-image: -webkit-linear-gradient(top, #285E8C, #0E3E64);
background-image: linear-gradient(top, #285E8C, #0E3E64);
background-image: linear-gradient(to bottom, #285E8C, #0E3E64);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: Verdana;
}
.jqx-fill-state-pressed-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-selected-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #999999;
background-color: #0E3E64;
background-image: -moz-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -ms-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -o-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0E3E64), to(#0E3E64));
background-image: -webkit-linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(to bottom, #0E3E64, #0E3E64);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: Verdana;
}
.jqx-switchbutton-label-on-S101Blue
{
color: #FFFFFF;
text-shadow: none;
border-color: #999999;
background-color: #0E3E64;
background-image: -moz-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -ms-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -o-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0E3E64), to(#0E3E64));
background-image: -webkit-linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(to bottom, #0E3E64, #0E3E64);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-tabs-title-selected-top-S101Blue, .jqx-tabs-selection-tracker-top-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #AAAAAA;
border-bottom: 1px solid #ffffff;
background-image: none ;
background-color: #ffffff;
}
.jqx-tabs-title-selected-bottom-S101Blue, .jqx-tabs-selection-tracker-bottom-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #AAAAAA;
border-top: 1px solid #ffffff;
background-image: none ;
background-color: #ffffff;
}
.jqx-splitter-splitbar-hover-S101Blue
{
background: #285E8C;
}
.jqx-splitter-splitbar-vertical-S101Blue, .jqx-splitter-splitbar-horizontal-S101Blue, .jqx-slider-track-horizontal-S101Blue, .jqx-slider-track-vertical-S101Blue
{
background: #3C7FB6;
}
.jqx-splitter-collapse-button-horizontal-S101Blue, .jqx-splitter-collapse-button-vertical-S101Blue, .jqx-slider-rangebar-S101Blue
{
background: #0E3E64;
}
.jqx-scrollbar-state-normal-S101Blue
{
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.jqx-grid-bottomright-S101Blue, .jqx-panel-bottomright-S101Blue, .jqx-listbox-bottomright-S101Blue
{
background-color: #FFFFFF;
}
.jqx-scrollbar-thumb-state-normal-S101Blue
{
background-color: #3C7FB6;
background-color: #3C7FB6;
background-image: -moz-linear-gradient(left, #3C7FB6, #3C7FB6);
background-image: -ms-linear-gradient(left, #3C7FB6, #3C7FB6);
background-image: -o-linear-gradient(left, #3C7FB6, #3C7FB6);
background-image: -webkit-gradient(linear, left top, right top, from(#3C7FB6), to(#3C7FB6));
background-image: -webkit-linear-gradient(left, #3C7FB6, #3C7FB6);
background-image: linear-gradient(left, #3C7FB6, #3C7FB6);
background-image: linear-gradient(left right, #3C7FB6, #3C7FB6);
}
.jqx-scrollbar-thumb-state-normal-horizontal-S101Blue
{
background-color: #3C7FB6;
background-color: #3C7FB6;
background-image: -moz-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -ms-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -o-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -webkit-gradient(linear, center top, center bottom, from(#3C7FB6), to(#3C7FB6));
background-image: -webkit-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: linear-gradient(to bottom, #3C7FB6, #3C7FB6);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-scrollbar-thumb-state-hover-S101Blue
{
background-color: #285E8C;
border-color: #285E8C;
background-image: -moz-linear-gradient(left, #285E8C, #285E8C);
background-image: -ms-linear-gradient(left, #285E8C, #285E8C);
background-image: -o-linear-gradient(left, #285E8C, #285E8C);
background-image: -webkit-gradient(linear, left top, right top, from(#285E8C), to(#285E8C));
background-image: -webkit-linear-gradient(left, #285E8C, #285E8C);
background-image: linear-gradient(left, #285E8C, #285E8C);
background-image: linear-gradient(left right, #285E8C, #285E8C);
}
.jqx-scrollbar-thumb-state-hover-horizontal-S101Blue
{
background-color: #285E8C;
border-color: #285E8C;
background-image: -moz-linear-gradient(top, #285E8C, #285E8C);
background-image: -ms-linear-gradient(top, #285E8C, #285E8C);
background-image: -o-linear-gradient(top, #285E8C, #285E8C);
background-image: -webkit-gradient(linear, center top, center bottom, from(#285E8C), to(#285E8C));
background-image: -webkit-linear-gradient(top, #285E8C, #285E8C);
background-image: linear-gradient(top, #285E8C, #285E8C);
background-image: linear-gradient(to bottom, #285E8C, #285E8C);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-scrollbar-thumb-state-pressed-S101Blue
{
background-color: #0E3E64;
border-color: #0E3E64;
background-image: -moz-linear-gradient(left, #0E3E64, #0E3E64);
background-image: -ms-linear-gradient(left, #0E3E64, #0E3E64);
background-image: -o-linear-gradient(left, #0E3E64, #0E3E64);
background-image: -webkit-gradient(linear, left top, right top, from(#0E3E64), to(#0E3E64));
background-image: -webkit-linear-gradient(left, #0E3E64, #0E3E64);
background-image: linear-gradient(left, #0E3E64, #0E3E64);
background-image: linear-gradient(left right, #0E3E64, #0E3E64);
}
.jqx-scrollbar-thumb-state-pressed-horizontal-S101Blue
{
background-color: #0E3E64;
border-color: #0E3E64;
background-image: -moz-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -ms-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -o-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0E3E64), to(#0E3E64));
background-image: -webkit-linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(to bottom, #0E3E64, #0E3E64);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-normal-S101Blue
{
background-color: #3C7FB6;
background-image: -moz-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -ms-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -o-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: -webkit-gradient(linear, center top, center bottom, from(#3C7FB6), to(#3C7FB6));
background-image: -webkit-linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: linear-gradient(top, #3C7FB6, #3C7FB6);
background-image: linear-gradient(to bottom, #3C7FB6, #3C7FB6);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-hover-S101Blue
{
background-color: #285E8C;
border-color: #aaaaaa;
background-image: -moz-linear-gradient(top, #285E8C, #285E8C);
background-image: -ms-linear-gradient(top, #285E8C, #285E8C);
background-image: -o-linear-gradient(top, #285E8C, #285E8C);
background-image: -webkit-gradient(linear, center top, center bottom, from(#285E8C), to(#285E8C));
background-image: -webkit-linear-gradient(top, #285E8C, #285E8C);
background-image: linear-gradient(top, #285E8C, #285E8C);
background-image: linear-gradient(to bottom, #285E8C, #285E8C);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-pressed-S101Blue
{
background-color: #0E3E64;
border-color: #909090;
background-image: -moz-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -ms-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -o-linear-gradient(top, #0E3E64, #0E3E64);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0E3E64), to(#0E3E64));
background-image: -webkit-linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(top, #0E3E64, #0E3E64);
background-image: linear-gradient(to bottom, #0E3E64, #0E3E64);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.jqx-radiobutton-check-checked-S101Blue
{
background: #111111;
width: 7px;
height: 7px;
margin-left: 2px;
margin-top: 2px;
border-width: 1px;
border-style: solid;
}
.jqx-rc-tl-S101Blue
{
-moz-border-radius-topleft: 2px;
-webkit-border-radius-topleft: 2px;
border-radius-topleft: 2px;
}
.jqx-rc-tr-S101Blue
{
-moz-border-radius-topright: 2px;
-webkit-border-radius-topright: 2px;
border-radius-topright: 2px;
}
.jqx-rc-bl-S101Blue
{
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius-bottomleft: 2px;
border-radius-bottomleft: 2px;
}
.jqx-rc-br-S101Blue
{
-moz-border-radius-bottomright: 2px;
-webkit-border-radius-bottomright: 2px;
border-radius-bottomright: 2px;
}
.jqx-rc-t-S101Blue
{
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
}
.jqx-rc-b-S101Blue
{
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.jqx-rc-r-S101Blue
{
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.jqx-rc-l-S101Blue
{
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.jqx-radiobutton-default-S101Blue, .jqx-radiobutton-S101Blue, .jqx-radiobutton-check-checked-S101Blue, .jqx-radiobutton-hover-S101Blue, .jqx-radiobutton-check-indeterminate-S101Blue, .jqx-radiobutton-check-indeterminate-disabled-S101Blue, .jqx-slider-button-S101Blue
{
-moz-border-radius: 100% !important;
-webkit-border-radius: 100% !important;
border-radius: 100% !important;
}
.jqx-rc-all-S101Blue, .jqx-tooltip-S101Blue, .jqx-tooltip-text-S101Blue, .jqx-tooltip-main-S101Blue
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.jqx-grid-column-sortascbutton-S101Blue, .jqx-expander-arrow-bottom-S101Blue, .jqx-window-collapse-button-S101Blue, .jqx-menu-item-arrow-up-S101Blue, .jqx-menu-item-arrow-top-up-S101Blue, .jqx-icon-arrow-up-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-icon-arrow-up-hover-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-menu-item-arrow-up-selected-S101Blue, .jqx-icon-arrow-up-selected-S101Blue.jqx-expander-arrow-expanded-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-grid-column-menubutton-S101Blue, .jqx-grid-column-sortdescbutton-S101Blue, .jqx-expander-arrow-top-S101Blue, .jqx-window-collapse-button-collapsed-S101Blue, .jqx-menu-item-arrow-down-S101Blue, .jqx-menu-item-arrow-down-S101Blue, .jqx-tree-item-arrow-expand-S101Blue, .jqx-grid-group-expand-S101Blue, .jqx-widget-S101Blue .jqx-grid-group-expand-S101Blue, .jqx-icon-arrow-down-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-icon-arrow-down-hover-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-menu-item-arrow-down-selected-S101Blue, .jqx-icon-arrow-down-selected-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-tabs-arrow-left-S101Blue, .jqx-menu-item-arrow-top-left-S101Blue, .jqx-grid-group-collapse-rtl-S101Blue, .jqx-widget-S101Blue .jqx-grid-group-collapse-rtl-S101Blue, .jqx-icon-arrow-left-S101Blue, .jqx-icon-arrow-down-left-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-icon-arrow-left-hover-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-menu-vertical-S101Blue
{
background: #FFFFFF;
}
.jqx-menu-item-arrow-left-selected-S101Blue, .jqx-icon-arrow-left-selected-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-tabs-arrow-right-S101Blue, .jqx-menu-item-arrow-top-right-S101Blue, .jqx-menu-item-arrow-collapse-S101Blue, .jqx-grid-group-collapse-S101Blue, .jqx-widget-S101Blue .jqx-grid-group-collapse-S101Blue, .jqx-icon-arrow-right-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-icon-arrow-right-hover-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-menu-item-arrow-right-selected-S101Blue, .jqx-icon-arrow-right-selected-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-window-close-button-S101Blue, .jqx-tabs-close-button-S101Blue, .icon-close-S101Blue
{
background-image: url(‘images/close_white.png’);
}
.jqx-tabs-close-button-selected-S101Blue
{
background-image: url(‘images/close_white.png’);
}
.jqx-tabs-close-button-hover-S101Blue
{
background-image: url(‘images/close_white.png’);
}
.jqx-widget-S101Blue .jqx-grid-column-header-S101Blue, .jqx-widget-S101Blue .jqx-grid-cell-S101Blue, .jqx-widget-S101Blue .jqx-grid-group-cell-S101Blue, .jqx-grid-cell-S101Blue
{
border-color: #aaaaaa;
}
.jqx-checkbox-check-checked-S101Blue
{
background-image: url(‘images/check_white.png’);
}
.jqx-checkbox-check-indeterminate-S101Blue
{
background-image: url(‘images/check_indeterminate_white.png’);
}
.jqx-tooltip-S101Blue, .jqx-tooltip-main-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #aaaaaa;
background-color: #efefef;
}
.jqx-combobox-content-S101Blue, .jqx-input-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #aaaaaa;
background-color: #ffffff;
}
.jqx-combobox-input-S101Blue
{
color: #000000;
text-shadow: none;
}
.jqx-input-content-S101Blue
{
color: #000000;
text-shadow: none;
background-color: #ffffff;
}
.jqx-fill-state-focus-S101Blue, .jqx-popup-S101Blue .jqx-fill-state-focus-S101Blue
{
border-color: #111111;
}
.jqx-popup-S101Blue.jqx-listbox-S101Blue, .jqx-popup-S101Blue.jqx-calendar-S101Blue,.jqx-menu-dropdown-S101Blue, .jqx-popup-S101Blue.jqx-dropdownbutton-popup-S101Blue
{
color: #000000;
text-shadow: none;
border-color: #111111;
background-color: #FFFFFF;
}
.jqx-menu-item-arrow-right-S101Blue, .jqx-tree-item-arrow-collapse-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-menu-item-arrow-left-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-tree-item-arrow-expand-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-up-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-left-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-right-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-bottom-S101Blue
{
background-image: url(‘images/metro-icon-bottom-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-up-hover-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-left-hover-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-right-hover-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-bottom-hover-S101Blue
{
background-image: url(‘images/metro-icon-bottom-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-up-selected-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-left-selected-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-right-selected-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-scrollbar-S101Blue .jqx-icon-arrow-bottom-selected-S101Blue
{
background-image: url(‘images/metro-icon-bottom-white.png’);
}
.jqx-calendar-S101Blue .jqx-icon-arrow-up-S101Blue, .jqx-tabs-header-S101Blue .jqx-icon-arrow-up-S101Blue
{
}
.jqx-calendar-S101Blue .jqx-icon-arrow-left-S101Blue, .jqx-tabs-header-S101Blue .jqx-icon-arrow-left-S101Blue
{
}
.jqx-calendar-S101Blue .jqx-icon-arrow-right-S101Blue, .jqx-tabs-header-S101Blue .jqx-icon-arrow-right-S101Blue
{
}
.jqx-calendar-S101Blue .jqx-icon-arrow-bottom-S101Blue, .jqx-tabs-header-S101Blue .jqx-icon-arrow-bottom-S101Blue
{
}
.jqx-widget-S101Blue .jqx-grid-cell-S101Blue, .jqx-listitem-state-normal-S101Blue, .jqx-menu-item-normal-S101Blue, .jqx-tree-item-normal-S101Blue, .jqx-calendar-cell-S101Blue, .jqx-grid-cell-S101Blue,.jqx-menu-vertical-S101Blue .jqx-menu-item-top-normal-S101Blue, .jqx-input-popup-S101Blue .jqx-fill-state-normal-S101Blue,
{
font-family: Verdana;
}
.jqx-widget-S101Blue .jqx-grid-cell-hover-S101Blue, .jqx-listitem-state-hover-S101Blue, .jqx-menu-item-hover-S101Blue, .jqx-tree-item-hover-S101Blue, .jqx-calendar-cell-hover-S101Blue, .jqx-grid-cell-hover-S101Blue,.jqx-menu-vertical-S101Blue .jqx-menu-item-top-hover-S101Blue, .jqx-input-popup-S101Blue .jqx-fill-state-hover-S101Blue,.jqx-input-button-header-S101Blue, .jqx-input-popup-S101Blue .jqx-fill-state-pressed-S101Blue,.jqx-input-button-header-S101Blue
{
font-family: Verdana;
}
.jqx-widget-S101Blue .jqx-grid-cell-selected-S101Blue, .jqx-listitem-state-selected-S101Blue, .jqx-menu-item-selected-S101Blue, .jqx-tree-item-selected-S101Blue, .jqx-calendar-cell-selected-S101Blue, .jqx-grid-cell-selected-S101Blue,.jqx-menu-vertical-S101Blue .jqx-menu-item-top-selected-S101Blue, .jqx-grid-selectionarea-S101Blue
{
font-family: Verdana;
}
.jqx-icon-calendar-S101Blue
{
background-image: url(‘images/icon-calendar-white.png’);
}
.jqx-icon-calendar-hover-S101Blue
{
background-image: url(‘images/icon-calendar-white.png’);
}
.jqx-icon-calendar-pressed-S101Blue
{
background-image: url(‘images/icon-calendar-white.png’);
}
.jqx-icon-first-S101Blue
{
background-image: url(‘images/metro-icon-first-white.png’);
}
.jqx-icon-first-hover-S101Blue
{
background-image: url(‘images/metro-icon-first-white.png’);
}
.jqx-icon-first-selected-S101Blue
{
background-image: url(‘images/metro-icon-first-white.png’);
}
.jqx-icon-last-S101Blue
{
background-image: url(‘images/metro-icon-last-white.png’);
}
.jqx-icon-last-hover-S101Blue
{
background-image: url(‘images/metro-icon-last-white.png’);
}
.jqx-icon-last-selected-S101Blue
{
background-image: url(‘images/metro-icon-last-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-S101Blue>.jqx-grid-group-expand-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-hover-S101Blue>.jqx-grid-group-expand-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-selected-S101Blue>.jqx-grid-group-expand-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-S101Blue>.jqx-grid-group-collapse-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-hover-S101Blue>.jqx-grid-group-collapse-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-selected-S101Blue>.jqx-grid-group-collapse-S101Blue
{
background-image: url(‘images/metro-icon-right-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-S101Blue>.jqx-grid-group-expand-rtl-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-hover-S101Blue>.jqx-grid-group-expand-rtl-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-selected-S101Blue>.jqx-grid-group-expand-rtl-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-S101Blue>.jqx-grid-group-collapse-rtl-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-hover-S101Blue>.jqx-grid-group-collapse-rtl-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-grid-cell-S101Blue.jqx-grid-cell-selected-S101Blue>.jqx-grid-group-collapse-rtl-S101Blue
{
background-image: url(‘images/metro-icon-left-white.png’);
}
.jqx-grid-column-menubutton-S101Blue, .jqx-grid-column-sortdescbutton-S101Blue
{
background-image: url(‘images/metro-icon-down-white.png’);
}
.jqx-grid-column-sortascbutton-S101Blue
{
background-image: url(‘images/metro-icon-up-white.png’);
}
.jqx-icon-delete-S101Blue
{
background-image: url(‘images/metro-icon-delete-white.png’);
}
.jqx-icon-edit-S101Blue
{
background-image: url(‘images/metro-icon-edit-white.png’);
}
.jqx-icon-save-S101Blue
{
background-image: url(‘images/metro-icon-save-white.png’);
}
.jqx-icon-cancel-S101Blue
{
background-image: url(‘images/metro-icon-cancel-white.png’);
}
.jqx-icon-search-S101Blue
{
background-image: url(‘images/icon-search_white.png’);
}
.jqx-icon-plus-S101Blue
{
background-image: url(‘images/icon-plus_white.png’);
}

[fritzfrancisParticipant]

Here is the URL which did not appear in the above post (thanks a lot built-in link generator)

http://1drv.ms/1j7O3j1

[fritzfrancisParticipant]

Thanks Peter,

Do you have an example of this implementation somewhere? Also will the grid still treat the column as being numeric?

Regards,

Fritz

[fritzfrancisParticipant]

No Peter,

That didn’t work. I want a number such as 5,435.2 to be display as 5435.2 without the comma. The “d0” format will just take away the decimal place. So I do want “d1”. But is there any additional string required to remove the comma(s)?

Regards,

Fritz

[Author]

Posts