jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 3 months ago.

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

Author

making grid inside hidden container Posts

February 11, 2015 at 2:37 pm making grid inside hidden container #66928

Participant

Hello! First of all, thank You for such a great library!
My problem is connected with making jqxgrid inside hidden container. I have a tab system on my web-site based on hiding and showing iframes.

<li><iframe ...><html with jqxGrid></li>
<li style="display:none"><iframe ...></li>
<li style="display:none"><iframe ...></li>

I have jqxgrid in several tabs. Not so long ago I’ve made a function binded on “bindcomplete” event which recognizes height of column headers and calculates and sets columnsheight property(it’s made for text wrapping, i also have custom render function for column header).

....
var columnsrenderer = function(row) {
return '<div class="mine-jqx-column-header">' + row + '</div>';
}
....
$("#jqxgrid").on("bindingcomplete", function (event) {
$(".mine-jqx-column-header").each(){
//find max_height
}
//set columnsheight to max_height
}

But i found out a problem, when I open tab, which contains jqxGrid, and (crucial moment) switch it to another tab before jqxGrid is fully initialized something strange happens.
At this point of my explanation we are on a tab which doesn’t content jqxGrid and we have another tab which contents it (now this tab is display:none)
First of all $(“.mine-jqx-column-header”) returns empty object. Then, I’m trying to discover why. And I see, that “div#contentjqxgrid” is absolutely empty. And then happens the most interesting thing for me: when the tab, which contains jqxGrid becomes visible the grid looks like normal and “div#contentjqxgrid” contents all that it has to content but “bindingcomplete” event was already fired before(with empty object) and doesnt fire again so my function doesn’t work as i want it to work. Is there any way to catch a moment when jqxGrid becomes normal, so i will be able to use my function for adjusting headers in proper time?
I have a fiddle(it’s not mine but i modified it) that contains jqxGrid inside hidden div. It illustrates that “div#contentjqxgrid” is empty when jqxGrid initialized inside hidden div. If we put $(“#gridcontainer”).show(); at the end of JS code, jqxGrid will look normal despite the fact that it was hidden during initialization. There is a fiddle http://jsfiddle.net/meatwas/op2s6sx3/1/

February 11, 2015 at 3:24 pm making grid inside hidden container #66932

meatwas

Participant

There is updated fiddle with my custom renderer and “bindingcomplete” listener http://jsfiddle.net/meatwas/op2s6sx3/2/

February 12, 2015 at 5:41 am making grid inside hidden container #66963

Peter Stoev

Keymaster

Hi meatwas,

You should create jqxGrid from visible HTML Element. Otherwise, it won’t be displayed and won’t be created, too.

Best Regards,
Peter Stoev

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

February 12, 2015 at 8:21 am making grid inside hidden container #66984

meatwas

Participant

Thank You Peter, but if You see the fiddle i provided jqxGrid is created from hidden element, it’s structure is like:

<div id="gridcontainer">
  <div id="jqxgrid" role="grid" align="left" class="jqx-grid jqx-grid-energyblue jqx-reset jqx-reset-energyblue jqx-rc-all jqx-rc-all-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-disableselect" style="width: 670px; height: 2528px;">
    <div style="overflow: hidden; position: absolute; width: 670px; height: 2528px; visibility: hidden; display: none;" class="jqx-rc-all jqx-rc-all-energyblue">
      <div style="z-index: 99999; margin-left: -66px; left: 50%; top: 50%; margin-top: -24px; position: relative; width: 100px; height: 33px; padding: 5px; font-family: verdana; font-size: 12px; color: #767676; border-color: #898989; border-width: 1px; border-style: solid; background: #f6f6f6; border-collapse: collapse;" class="jqx-rc-all jqx-rc-all-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue">
        <div style="float: left;">
          <div style="float: left; overflow: hidden; width: 32px; height: 32px;" class="jqx-grid-load"></div>
          <span style="margin-top: 10px; float: left; display: block; margin-left: 5px;">Loading...</span>
        </div>
      </div>
    </div>
    <div class="jqx-clear jqx-border-reset jqx-overflow-hidden jqx-max-size jqx-position-relative">
      <div tabindex="1" class="jqx-clear jqx-max-size jqx-position-relative jqx-overflow-hidden jqx-background-reset" id="wrapperjqxgrid">
        <div class="jqx-clear jqx-position-absolute jqx-grid-toolbar jqx-grid-toolbar-energyblue jqx-widget-header jqx-widget-header-energyblue" id="toolbarjqxgrid" style="visibility: hidden; height: 0px;"></div>
        <div class="jqx-clear jqx-position-absolute jqx-grid-groups-header jqx-grid-groups-header-energyblue jqx-widget-header jqx-widget-header-energyblue" id="groupsheader" style="visibility: hidden; width: 670px; height: 0px; top: 0px;"></div>
        <div class="jqx-clear jqx-overflow-hidden jqx-position-absolute jqx-border-reset jqx-background-reset jqx-reset jqx-reset-energyblue jqx-disableselect" id="contentjqxgrid" style="top: 0px; width: 670px; height: 2501px;"></div>
        <div class="jqx-clear jqx-position-absolute jqx-scrollbar jqx-scrollbar-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-rc-all jqx-rc-all-energyblue" id="verticalScrollBarjqxgrid" style="visibility: hidden;">
          <div id="jqxScrollOuterWrapverticalScrollBarjqxgrid" style="box-sizing: content-box; width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;" class="jqx-reset jqx-reset-energyblue">
            <div id="jqxScrollWrapverticalScrollBarjqxgrid" style="box-sizing: content-box; width: 2px; height: 100%; left: 0px; top: 0px; position: absolute;" class="jqx-reset jqx-reset-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue">
              <div id="jqxScrollBtnUpverticalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: 0px; position: absolute; width: 0px; height: 0px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-t jqx-rc-t-energyblue">
                <div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-up jqx-icon-arrow-up-energyblue"></div>
              </div>
              <div id="jqxScrollAreaUpverticalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: 2px; position: absolute; height: 0px; width: 10px;" class="jqx-reset jqx-reset-energyblue"></div>
              <div id="jqxScrollThumbverticalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: 2px; position: absolute; width: 0px; height: 10px; visibility: inherit;" class="jqx-scrollbar-thumb-state-normal jqx-scrollbar-thumb-state-normal-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue"></div>
              <div id="jqxScrollAreaDownverticalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: 12px; position: absolute; height: 0px; width: 10px;" class="jqx-reset jqx-reset-energyblue"></div>
              <div id="jqxScrollBtnDownverticalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: -2px; position: absolute; width: 0px; height: 0px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-b jqx-rc-b-energyblue">
                <div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-down jqx-icon-arrow-down-energyblue"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="jqx-clear jqx-position-absolute jqx-scrollbar jqx-scrollbar-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-rc-all jqx-rc-all-energyblue" id="horizontalScrollBarjqxgrid" style="visibility: hidden; height: 15px; top: 2481px; left: 0px; width: 668px;">
          <div id="jqxScrollOuterWraphorizontalScrollBarjqxgrid" style="box-sizing: content-box; width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;" class="jqx-reset jqx-reset-energyblue">
            <div id="jqxScrollWraphorizontalScrollBarjqxgrid" style="box-sizing: content-box; width: 100%; height: 17px; left: 0px; top: 0px; position: absolute;" class="jqx-reset jqx-reset-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue">
              <div id="jqxScrollBtnUphorizontalScrollBarjqxgrid" style="box-sizing: content-box; left: 0px; top: 0px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-l jqx-rc-l-energyblue">
                <div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-left jqx-icon-arrow-left-energyblue"></div>
              </div>
              <div id="jqxScrollAreaUphorizontalScrollBarjqxgrid" style="box-sizing: content-box; left: 17px; top: 0px; position: absolute; height: 15px;" class="jqx-reset jqx-reset-energyblue"></div>
              <div id="jqxScrollThumbhorizontalScrollBarjqxgrid" style="box-sizing: content-box; left: 17px; top: 0px; position: absolute; width: 249px; height: 15px; visibility: inherit;" class="jqx-scrollbar-thumb-state-normal-horizontal jqx-scrollbar-thumb-state-normal-horizontal-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue"></div>
              <div id="jqxScrollAreaDownhorizontalScrollBarjqxgrid" style="box-sizing: content-box; left: 268px; top: 0px; position: absolute; width: 383px; height: 15px;" class="jqx-reset jqx-reset-energyblue"></div>
              <div id="jqxScrollBtnDownhorizontalScrollBarjqxgrid" style="box-sizing: content-box; left: 651px; top: 0px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-r jqx-rc-r-energyblue">
                <div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-right jqx-icon-arrow-right-energyblue"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="jqx-clear jqx-position-absolute jqx-border-reset jqx-grid-bottomright jqx-grid-bottomright-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue" id="bottomRight" style="visibility: hidden;"></div>
        <div class="jqx-clear jqx-position-absolute jqx-grid-statusbar jqx-grid-statusbar-energyblue jqx-widget-header jqx-widget-header-energyblue" id="statusbarjqxgrid" style="height: 0px;"></div>
        <div class="jqx-clear jqx-position-absolute jqx-grid-pager jqx-grid-pager-energyblue jqx-widget-header jqx-widget-header-energyblue" id="pagerjqxgrid" style="z-index: 20; width: 670px; height: 28px; top: 2499px;">
          <div style="width: 100%; height: 100%; position: relative; top: 5.5px;">
            <div type="button" style="padding: 0px; margin-top: 0px; margin-right: 3px; width: 27px; float: right; cursor: pointer;" title="next" id="jqxWidgeta2108802" 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 style="margin-left: 6px; width: 15px; height: 15px;" class="jqx-icon-arrow-right jqx-icon-arrow-right-energyblue"></div>
            </div>
            <div type="button" style="padding: 0px; margin-top: 0px; margin-right: 3px; width: 27px; float: right; cursor: pointer;" title="previous" id="jqxWidget236c4a67" 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 style="margin-left: 6px; width: 15px; height: 15px;" class="jqx-icon-arrow-left jqx-icon-arrow-left-energyblue"></div>
            </div>
            <div style="margin-right: 7px; float: right;">1-10 of 100</div>
            <div id="gridpagerlistjqxgrid" style="margin-top: 0px; margin-right: 7px; float: right; display: block; height: 16px; width: 25px;" role="combobox" aria-autocomplete="both" aria-readonly="false" class=" jqx-widget jqx-widget-energyblue jqx-dropdownlist-state-normal jqx-dropdownlist-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue" aria-owns="listBoxgridpagerlistjqxgrid" aria-haspopup="true" aria-activedescendant="listitem1innerListBoxgridpagerlistjqxgrid">
              <input type="hidden" value="10">
              <div style="background-color: transparent; -webkit-appearance: none; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: relative;" tabindex="0">
                <div id="dropdownlistWrappergridpagerlistjqxgrid" style="overflow: hidden; outline: none; background-color: transparent; border: none; float: left; width:100%; height: 100%; position: relative;" class="jqx-disableselect jqx-disableselect-energyblue">
                  <div id="dropdownlistContentgridpagerlistjqxgrid" unselectable="on" style="outline: none; background-color: transparent; border: none; float: left; position: relative; width: auto; height: 16px; left: 0px; top: 0px;" class="jqx-dropdownlist-content jqx-dropdownlist-content-energyblue"><span unselectable="on" style="color: inherit; border: none; background-color: transparent; padding-top: 0px; padding-bottom: 0px;" class="">10</span></div>
                  <div id="dropdownlistArrowgridpagerlistjqxgrid" unselectable="on" style="background-color: transparent; border: none; float: right; position: relative; width: 19px; height: 16px;">
                    <div unselectable="on" class="jqx-icon-arrow-down jqx-icon-arrow-down-energyblue jqx-icon jqx-icon-energyblue"></div>
                  </div>
                </div>
              </div>
            </div>
            <div style="margin-right: 7px; float: right; display: block;">Show rows:</div>
            <div style="margin-right: 7px; width: 27px; height: 17px; float: right; display: block;" title="1 - 10"><input style="margin-top: 0px; text-align: right; width: 27px;" type="text" class="jqx-input jqx-input-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-grid-pager-input jqx-grid-pager-input-energyblue jqx-rc-all jqx-rc-all-energyblue"></div>
            <div style="float: right; margin-right: 7px; display: block;">Go to page:</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

so the only problem is that div#contentjqxgrid is empty, but it becomes not empty when container becomes visible. Is there any visibility watcher or how it happens? I’m asking it because i already have a lot of pages with grid that work perfectly in hidden container(when tab becomes active, everything becomes perfect). Also, i even didn’t note that div#contentjqxgrid is empty or something wrong, because when i open tab everything becomes good until i want to use binding complete handler.

February 12, 2015 at 8:23 am making grid inside hidden container #66985

Peter Stoev

Keymaster

Yes, there is visibility watcher. You can’t and shouldn’t create a Grid from hidden container. It wont’t be created until the container is visible. If you want to use it with Tabs, we have demos about that too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 12, 2015 at 9:15 am making grid inside hidden container #66988

meatwas

Participant

You mean demo jqxGrid and jqxTabs? http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/tabs-and-grid.htm ?

February 12, 2015 at 9:33 am making grid inside hidden container #66991

meatwas

Participant

If yes I have a new question. As I see, to use grid with tabs we create callback function, which initializes grid. And this function executes when Tab is opened. Also as I see tabs implemented with display:none/block like my tabs. So what happens if we open the demo, then select second tab with grid and immediately switch to first tab, so grid hasn’t enough time to initialize and it’s container becomes display:none? Does it stop initializing? It looks like No, because when we open second tab again we can see grid without delay.

February 12, 2015 at 10:21 am making grid inside hidden container #66996

Peter Stoev

Keymaster

Hi meatwas,

No, it does not stop initializing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 12, 2015 at 10:34 am making grid inside hidden container #66998

meatwas

Participant

So how it works?
1. Does it lock tab switching until callback is complete?
2. If no, can You tell how it works please

February 12, 2015 at 10:53 am making grid inside hidden container #67001

Peter Stoev

Keymaster

Hi meatwas,

It creates a widget when the tab becomes visible for first time. Do it as in the sample to experience correct behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.