jQWidgets Forums

Tagged: angular grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by Hristo 9 years, 1 month ago.

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

Author

Localization fails when grid is used inside bootstrap tabs Posts

March 7, 2016 at 10:01 am Localization fails when grid is used inside bootstrap tabs #82159

Participant

Hi Admin,

I have a jqxgrid inside boostrap tabs. The grid is not inside the default active tab. I wanted to override the default ’emptydatastring’ using the localization object but I get the error ‘TypeError: this.columns.records is undefined’. If I move the grid to the default active tab then the error doesn’t occur but i cannot have it there. Any help would be appreciated. Please see my code below:

  <script type="text/javascript">
         $(document).ready(function () {
             // prepare the data
             var data = new Array();
         
         data = []
             var source =
             {
                 localdata: data,
                 datatype: "json",
         datafields: [
                 { name: 'id', type: 'int'},
                 { name: 'col1', type: 'float'},
                 { name: 'col2', type: 'string'}]
             };
             var dataAdapter = new $.jqx.dataAdapter(source);
         
             var clickedRow;
         
             
         
             $("#myGrid").jqxGrid(
             {
                 source: dataAdapter,
                 showstatusbar: true,
                 filterable: true,
                 showfilterrow: true,
                 pageable: true,
                 selectionmode: 'none',
                 autoheight: true,
                 showemptyrow: true,
                 virtualmode: true,
                 sortable: true,
                 enabletooltips: true,
                 sorttogglestates: 1,
                 rendergridrows: function () {
                     return dataAdapter.records;
                 },

                 columns: [
                   { text: 'Id', datafield: 'asrun_id', width: 100 },
                   { text: 'Col 1', datafield: 'isci', width: 100  },
                   { text: 'Col 2', datafield: 'test', width: 100  },
                  
                 ]
             });
         var localizationobjFailed = {};
             localizationobjFailed.emptydatastring = "My custom message.";
             // apply localization.
             $("#myGrid").jqxGrid('localizestrings', localizationobjFailed);
           
         });
      </script>
   </head>
   <body class='default'>
      <div class="content">
         <div class="row">
            <ul class="nav nav-tabs tabSecond-level">
               <li class="active"><a href="#Expected" aria-controls="profile" role="tab" data-toggle="tab">Status</a></li>
               <li class=""><a href="#Success" aria-controls="home" role="tab" data-toggle="tab">Success</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
               <div role="tabpanel" class="tab-pane active" id="Expected">
                  <div>First stab</div>
               </div>
               <div role="tabpanel" class="tab-pane" id="Success">
                  <div id="myGrid"> </div>
               </div>
            </div>
         </div>
      </div>

Thanks
-Richa

March 7, 2016 at 2:38 pm Localization fails when grid is used inside bootstrap tabs #82192

Hristo

Participant

Hello Richa,

I would like to present our widget – jqxTabs.
Please take a look this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/tabs-and-grid.htm?arctic
Please take a look this example:
https://www.jseditor.io/?key=jqwidgets-grid-bootstrap

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 8, 2016 at 3:58 am Localization fails when grid is used inside bootstrap tabs #82205

richa_k

Participant

Thank you very much Hristo. I was able to do it with bootstrap tabs. The issue was with the line ‘ showfilterrow: true,’ . I removed that and it worked.

-Richa

March 8, 2016 at 4:33 am Localization fails when grid is used inside bootstrap tabs #82207

richa_k

Participant

Hi Hristo,

I meed to have the filters in that grid. I tried using jqxtabs instead of bootstrap and I still get the error.
Is there something I am missing?

 <script type="text/javascript">
        $(document).ready(function () {
            
            var initGrid2 = function () {
                var data = '[]';

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName', type: 'string' },
                        { name: 'ContactName', type: 'string' },
                        { name: 'ContactTitle', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Country', type: 'string' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#jqxGrid2").jqxGrid(
                {
                     source: dataAdapter,
                       showstatusbar: true,
                 filterable: true,
                 showfilterrow: true,
                 pageable: true,
                 selectionmode: 'none',
                 autoheight: true,
                 showemptyrow: true,
                 virtualmode: true,
                 sortable: true,
                 enabletooltips: true,
                 sorttogglestates: 1,
                 rendergridrows: function () {
                     return dataAdapter.records;
                 },
         
                    columns: [
                        { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                        { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                        { text: 'City', datafield: 'City', width: 120 },
                        { text: 'Country', datafield: 'Country' }
                    ]
                });
				  var localizationobj = {};
            localizationobj.emptydatastring = "My custom message.";
            // apply localization.
            $("#jqxGrid2").jqxGrid('localizestrings', localizationobj);
            }

            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        "";
                        break;
                    case 1:
                        initGrid2();
                        break;
                }
            }

            $('#jqxTabs').jqxTabs({ width: 600, height: 560,  initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs'>
        <ul>
            <li style="margin-left: 30px;">
                Grid 1
            </li>
            <li>
                Grid 2
            </li>
        </ul>
        <div style="overflow: hidden;">
            <div style="border:none;" id="jqxGrid">
            </div>
        </div>
        <div style="overflow: hidden;">
            <div style="border:none;" id="jqxGrid2"></div>
        </div>
    </div>

Please help.
Thanks
-Richa

March 8, 2016 at 8:41 am Localization fails when grid is used inside bootstrap tabs #82221

Hristo

Participant

Hello Richa,

Only change declaration of the ‘localizationobj’ before the Grid and set property localization.


var localizationobj = {};
localizationobj.emptydatastring = "My custom message.";

$("#jqxGrid2").jqxGrid({
   ...
   localization: localizationobj,
   ...
});

And another way to set this localizationobj in ready property.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.