Class not accesible horizontal scroll.

[nitinayir8Participant]

Hi,

I have added a class called ‘gridrowsummary’ using the cellsrenderer method for the column ‘First Name’ for rows with an odd index. When the grid is loaded and the column is visible, on clicking the ‘Summary content’ button the html is correctly alerted. But, as we scroll the grid horizontantly towards the right past the ‘First Name’ column and hit the ‘Summary content’ button, the html of ‘gridrowsummary’ class is alerted as “undefined”.
Can you please advice me as to why this happens and what is the fix for this.
Please refer to the following fiddle:
http://jsfiddle.net/4zAHJ/259/

Regards,
Nitin

[Peter StoevKeymaster]

Hi Nitin,

You can’t make jQuery selection about custom classes added dynamically in this case. There is API for getting cell values – getcellvalue method, getrowdata method, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nitinayir8Participant]

Hi Peter,
I need to assign a class to a cell which has this class. But when we scroll since we cannot access this class, we cannot do the same. How can we achieve this functionality by using getcellvalue method, getrowdata method, etc? Any help will be appreciated.

Regards,
Nitin

[Peter StoevKeymaster]

Hi Nitin,

You cannot dynamically assign a CSS class to a cell using code outside jqxGrid functions. You should think about another approach.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nitinayir8Participant]

Hi Peter,

There is some issue when we scroll the grid, whatever columns fits within specified grid width only those column’s html is shown. For your reference, please check below html:
onload “row0jqxgrid” html:
<div id=”row2jqxgrid” style=”position: relative; height:25px;” role=”row”><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 460px; z-index: 773; width:90px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$5.00</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 100px; z-index: 776; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Devling</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 200px; z-index: 775; width:180px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Cappuccino</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 380px; z-index: 774; width:80px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>5</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div></div></div>

After horizontal scroll:
<div id=”row2jqxgrid” style=”position: relative; height:25px;” role=”row”><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 460px; z-index: 773; width:90px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$5.00</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 100px; z-index: 776; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Devling</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 200px; z-index: 775; width:180px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Cappuccino</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 380px; z-index: 774; width:80px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>5</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 550px; z-index: 772; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$25.00</div></div></div>

Somehow this below div is removed:
<div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div>

Please let us know what is the concept your using to build row0jqxgrid, row1jqxgrid, row2jqxgrid, etc., this div’s are dynamically created whenever we do some action on grid. We are using right approach by specifying class to cell using cellrender property of columns grid api. If you guys fix this bug, it would be of great help to us.

regards,
Nitin Ayir

[Peter StoevKeymaster]

Hi Nitin Ayir,

This is not an issue. this is actually how it should work. jqxGrid is smart and adds to the DOM only the HTML elements is needs to show. You may have thousands data records and just a few HTML Elements. I would suggest you to look at the widget’s examples & documentation in order to learn how to use it, what it supports and how to use the Grid features.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nitinayir8Participant]

Hi Peter,
I understand that we cannot add custom classes. Can you help us with a way wherein we can add some style to a particular cell which would stay even on scroll, or any other event?

Regards,
Nitin Ayir

[Author]

Posts