[MarinaParticipant]

I modified your example in jsfiddle and put tree inside of the tabs and then it stopped scroll to element, though element got selected still fine.

<div id='jqxTabs' >

                       <ul>
                            <li>Tab1</li>
                            <li>Tab2</li>
                        </ul>
                        <div id="content1" style="overflow: hidden;">
                          content1                        
                        </div>
                         <div id="content2" style="overflow: hidden;">
                           content2                          
                          <div id='jqxTreeHistory' ></div>
                         </div>
</div>

init tab

   $("#jqxTabs").jqxTabs({ width: 300, height: 500, initTabContent: initTabs });

[MarinaParticipant]

maybe difference when tree inside of tab. In my case it got selected fine with right id of item, but never scrolled to. Could it be some effect of bubble event or anything?

[MarinaParticipant]

I found that its actually happening if you are not switching right away to tab that has tree.
If I switch to tab with tree I want to change source , then update source, then switch back to my tab with button then its working fine if I click on tab after all checkboxes aligned fine. so for now I had to just on button click to do that. Not sure if its right solution or bug.

                                //update tree locate
                                $('#jqxTabs').jqxTabs('select', 0);
                                $('#jqxTreeLocate').jqxTree({ source: getAccountUsers(true) });
                                $('#jqxTabs').jqxTabs('select', 3);

[MarinaParticipant]

Hristo,
I’m doing initTabContent and init my trees in it as well as other controls. the problem happening when I’m updating source of tree on button click from json data. In your example you only checking checkboxes on other tab, but not updating data source of tree.

  // init widgets.

                var initTabs = function (tab) {

                    switch (tab) {

                        case 0:
                            getSavedUsers();
                            $('#jqxTreeLocate').jqxTree({ height: '500px', checkboxes: true, source: getAccountUsers(true), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeLocate').jqxTree('expandAll');

                            $("#inputSearchLocate").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#locateUsersButton').jqxButton({ width: '100px', theme: theme });
                            $('#btnClearLocateTree').click(function () { clearTree('#jqxTreeLocate'); return false; });
                            break;
                        case 1:

                            $('#jqxTreeHistory').jqxTree({ height: '500px', source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeHistory').jqxTree('expandAll');
                            $("#jqxDateTimeInput").jqxDateTimeInput({ width: '150px', height: '25px', theme: themeBootstrap });

                            break;
                        case 2:
                            $('#jqxTreeSms').jqxTree({ height: '400px', checkboxes: true, source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeSms').jqxTree('expandAll');
                            $("#inputSearchSMS").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#jqxTextArea').jqxTextArea({ placeHolder: 'Enter a SMS text', height: 50, width: 300, minLength: 1, theme: themeBootstrap });
                            $("#txtSubject").jqxInput({ placeHolder: "Enter a SMS Subject", height: 25, width: 300, minLength: 1, theme: themeBootstrap });
                            $('#sendSMSButton').jqxButton({ width: '80px', theme: theme });
                            $('#btnClearSMSTree').click(function () { clearTree('#jqxTreeSms'); return false; });
                            break;
                        case 3:
                            $('#jqxTreeUsers').jqxTree({ height: '500px', checkboxes: true, source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeUsers').jqxTree('expandAll');
                            $("#inputSearchUsers").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#saveUsersButton').jqxButton({ width: '80px', theme: theme });
                            $('#btnClearUsersTree').click(function () { clearTree('#jqxTreeUsers'); return false; });
                            break;

                    }

[MarinaParticipant]

Thanks, it helped. I was initiating trees controls for each panel already in initTabContent, but not those input group controls. Looks like its working now. Are all controls for each panel should be initialized in that call back or just complex controls? i had buttons that was not initialized that way but they were working fine.

Marina

[MarinaParticipant]

in any case it did not help either. Still can’t make sorting working? Any other ideas anyone?

[MarinaParticipant]

why do I need remote sorting and why default local sorting can’t be use in my case?

[MarinaParticipant]

any ideas?????

[MarinaParticipant]

Hi,
I tried increase z-index of nav_menu and Menu to 99999999 and it did not work. Actually I found solution how to set grid z-index to 0 – you have to first to set css position of grid to relative.

$('#jqxgrid').css("position", "relative");
$('#jqxgrid').css("z-index", "0");

[Author]

Posts