jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts

  • 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


    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.


    meatwas
    Participant

    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.


    meatwas
    Participant

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

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