[Apeksha SinghParticipant]

Hi Dimitar,

In my project I have a jqxbutton which add a new tab and each new tab contain a grid.
There are 4 already created tabs with grids.

This is my code for dynamic grids that get created on the click of button inside a dynamic created Tab.

            var index = 0;
            var grid_index = 2;
            var gridInit = function (grid_index) {
                var data = new Array();
                        //var url = "sampledata/allcontact_data.php";
                var source =
                {
                  localdata: archived_contact_data,
                  datatype: "json",
                  datafields:
                  [   { name: 'item', type: 'bool' },
                  { name: 'id', type: 'integer' },
                  { name: 'contact_name', type: 'string' },
                  { name: 'email', type: 'string' },
                  { name: 'mobile_number', type: 'integer' },
                  { name: 'billawaitingpaymenttotal', type: 'float' },
                  { name: 'billoverduetotal', type: 'float' },
                  { name: 'invoiceawaitingpaymenttotal', type: 'float' },
                  { name: 'invoiceoverduetotal', type: 'float' },
                  ],
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid" + grid_index).jqxGrid(
                    {
                      width: '97.7%',
                      source: dataAdapter,
                      theme:'metro' ,
                      pageable: true,
                      autoheight: true,
                      sortable: true,
                      altrows: true,
                      enabletooltips: true,
                      editable:true,
                      selectionmode: 'none',
                      columns: [
                      { text: 'checkbox', columntype: 'checkbox', datafield: 'item', width: '4%', renderer: function () {
                        return '<div style="margin-left: 5px; margin-top: 5px;"></div>';
                      },
                      rendered: function (element) {
                        $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
                        columnCheckBox = $(element);
                        $(element).on('change', function (event) {
                          var checked = event.args.checked;
                          if (checked == null || updatingCheckState) return;
                          var rowscount = $("#archieved_table").jqxGrid('getdatainformation').rowscount;
                          $("#archieved_table").jqxGrid('beginupdate');
                          if (checked) {
                            $("#archieved_table").jqxGrid('selectallrows');
                          }
                          else if (checked == false) {
                            $("#archieved_table").jqxGrid('clearselection');
                          }
                          for (var i = 0; i < rowscount; i++) {
                            $("#archieved_table").jqxGrid('setcellvalue', i, 'item', event.args.checked);
                          }
                          $("#archieved_table").jqxGrid('endupdate');
                        });
                      }},
                      { text: 'Name',datafield:'contact_name', width:'12%',editable:false},
                      { text: 'To_id',datafield: 'id',width: '12%', hidden:true },
                      { text: 'Email Address', datafield: 'email', width:'29%',editable:false },
                      { text: 'Phone No', datafield: 'mobile_number', width: '15%',editable:false},
                      { text: 'Bills Due', datafield: 'billawaitingpaymenttotal', width:'10%',editable:false },
                      { text: 'Overdue Bills', datafield: 'billoverduetotal', width:'10%',editable:false },
                      { text: 'Invoices Due', datafield: 'invoiceawaitingpaymenttotal',width: '10%',editable:false},
                      { text: 'Overdue Invoices', datafield: 'invoiceoverduetotal', width:'10%',editable:false},
                      ]
                    });
            };

This is the code that explain event on button click :-

             var index = 0;
             var grid_index = 2;
            $('#new_group_save').bind('click', function (event) {
                var value=$("#newgroup_name").val(); 
                if (index >= 0) {
					grid_index++;
                    //alert(grid_index);
                    $('#contact_sub_tabs').jqxTabs('addAt', grid_index , value, 'Grid:<br /><div id="jqxgrid' + grid_index+ '"></div>');
                    index++;
                }
            });

Now the problem is I already have some Tabs with grid that I have defined using initTabContent how I can add this dynamically created grids in the given below switch case :-

         var initWidgets = function (tab) {
          switch (tab) {
            case 0:
            all_initGrid();
            break;
            case 1:
            customers_initGrid();
            break;
            case 2:
            suppliers_initGrid();
            break;
            case 3:
            archieved_initGrid();
            break;           
          }
        };
        $('#contact_sub_tabs').jqxTabs({ width: '100%',position: 'top', theme:'ui-smoothness',initTabContent: initWidgets }); 

Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

Thanks a lott for replying ‘tabclick’ event has resolved my issue.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

I have query regarding the pageable property of grid can we increase the number of show rows to more than 20.

Right now jqwidget is providing 3 options 5,10 & 20. I want to increase this options to 30 , 50,……and as much as I want .

Is it possible to do so?
Please guide me regarding this as soon as possible.

Thanks & Regards,

Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Please guide me regarding this and also let me know that can we define grids for each tab without using initTabContent.
Will it be a issue if I don’t use initTabContent, if not so let me know how I can define grid for tabs without using initTabContent.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter,

I have seen this example before an implemented it to but I also have a select all and unselect all checkbox in the header of grid that select and deselect all the checkboxes. The code that I am using for this particular column is given below :-

columns: [
{ text: ”, columntype: ‘checkbox’, datafield: ‘item’, width: ‘9%’, renderer: function () {
return ‘

‘;
},
rendered: function (element) {
$(element).jqxCheckBox({ theme: ‘metro’, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
if (checked == null || updatingCheckState) return;
var rowscount = $(gridid).jqxGrid(‘getdatainformation’).rowscount;
$(gridid).jqxGrid(‘beginupdate’);

if (checked) {
$(gridid).jqxGrid(‘selectallrows’);
}
else if (checked == false) {
$(gridid).jqxGrid(‘clearselection’);
}

for (var i = 0; i < rowscount; i++) {
$(gridid).jqxGrid('setcellvalue', i, 'item', event.args.checked);

}

$(gridid).jqxGrid('endupdate');
});
}

},

I want this code do not check the non editable checkboxes.
And is there any other way to disable the row rather than this.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter,

Fine if we can’t display any other content in a Checkbox Column, but can we make a complete row which have a checkbox column non editable including the checkbox to be disabled in respect of a particular row id and any one column value.

Please reply me as soon as possible

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

I am explaining my issue in respect of your example hope it will help you to understand the requirement.

$(document).ready(function () {
var theme = getDemoTheme();
var addButton,
addButtonWidth = 29,
index = 0;
grid_index = 2;
var gridInit = function (grid_index){
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
for (var i = 0; i = 0) {
grid_index++;
//alert(grid_index);
$(‘#jqxTabs’).jqxTabs(‘addAt’, grid_index , value, ‘Grid:

‘);
index++;
}
});
});

Node.js
Active Server Pages
Add New Tab

Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
is intended for writing scalable network programs such as web servers. It was created
by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
Similar environments written in other programming languages include Twisted for
Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
Unlike most JavaScript, it is not executed in a web browser, but is instead a form
of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
includes a REPL environment for interactive testing.

ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft’s Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.

I have done some changes you can find it with the word “grid_index” now this is not working and I have to include this changes also you can see I am using a button i.e.,not included in tabs to add new tabs.
So tell me what should I do now.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

Thanks a lot for your reply setting the z-index has resolved my issue.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

This is my code that is displaying grids on adding tab:-
var index = 0;
var grid_index = 2;
var gridInit = function (grid_index) {
var data = new Array();
var source =
{
localdata: archived_contact_data,
datatype: “json”,
datafields:
[
{ name: ‘item’, type: ‘bool’ },
{ name: ‘id’, type: ‘integer’ },
{ name: ‘contact_name’, type: ‘string’ },
{ name: ’email’, type: ‘string’ },
{ name: ‘mobile_number’, type: ‘integer’ },
{ name: ‘billawaitingpaymenttotal’, type: ‘float’ },
{ name: ‘billoverduetotal’, type: ‘float’ },
{ name: ‘invoiceawaitingpaymenttotal’, type: ‘float’ },
{ name: ‘invoiceoverduetotal’, type: ‘float’ },
],
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid” + grid_index).jqxGrid(
{
width: ‘97.7%’,
source: dataAdapter,
theme:’metro’ ,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable:true,
selectionmode: ‘none’,
columns: [
{ text: ‘checkbox’, columntype: ‘checkbox’, datafield: ‘item’, width: ‘4%’, renderer: function () {
return ‘

‘;
},
rendered: function (element) {
$(element).jqxCheckBox({ theme: ‘metro’, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
if (checked == null || updatingCheckState) return;
var rowscount = $(“#archieved_table”).jqxGrid(‘getdatainformation’).rowscount;
$(“#archieved_table”).jqxGrid(‘beginupdate’);

if (checked) {
$(“#archieved_table”).jqxGrid(‘selectallrows’);
}
else if (checked == false) {
$(“#archieved_table”).jqxGrid(‘clearselection’);
}

for (var i = 0; i = 0) {
grid_index++;
//alert(grid_index);
$(‘#contact_sub_tabs’).jqxTabs(‘addAt’, grid_index , value, ‘Grid:

‘);
index++;
}
});
I can’t use this :-
var initWidgets = function (tab) {
switch (tab) {
case 0:
all_initGrid();
break;
case 1:
customers_initGrid();
break;
case 2:
suppliers_initGrid();
break;
case 3:
archieved_initGrid();
break;
default:
gridInit(tab);
}
};
As you can see I am not using gridInit(tab);
Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Actually I can’t update my .css files as I have done a lot of changes in that according to my requirement.
Is there is any other way to do that.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks a lot this example resolved my adding new tab with grid issue.
But still I have an issue remaining I have 4 already added tabs with grids as their content and I am displaying it using initTabContent as you can see below :-
var initWidgets = function (tab) {
switch (tab) {
case 0:
all_initGrid();
break;
case 1:
customers_initGrid();
break;
case 2:
suppliers_initGrid();
break;
case 3:
archieved_initGrid();
break;
}
};
$(‘#contact_sub_tabs’).jqxTabs({ width: ‘100%’,position: ‘top’, theme:’ui-smoothness’,initTabContent: initWidgets});

But now in respect of your code the initTabContent define dynamically created grid as you can see below:-

$(‘#contact_sub_tabs’).jqxTabs({ width: ‘100%’,position: ‘top’, theme:’ui-smoothness’,initTabContent: function (grid_index) { gridInit(grid_index) }});

How I can display the already existing grid using the same .
Can I use initTabContent for two times for the same tab?
Please guide me regarding this.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

But in my case the the hint is visible from one Tab to another how I can set its z-index to resolved this issue.
Also if the validation is on jqxwindow then on closing or canceling the window I want hints should also be removed,but its not happening.
I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project and I cannot migrate to the latest version of jQWidgets as there is a lot of changes that we have done in style files.

Thanks & Regards,
Apeksha Singh

[Apeksha SinghParticipant]

Hi Dimitar,

How I can make grid initialization when tab == 3 to x i.e. how I can grow this dynamically.
And I cannot use latest version of jQWidgets as there is a lot of changes that we have done in style files.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks for your reply I tried to run this example but can’t see the grid in the second new tab.
I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project and even for the above example is that an issue ?
Also in your given examples your already existing tabs contain text as their content but in my project I am displaying grids using initTabContent. Please guide me regarding this.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi,

Actually I am navigating through pages using tab, menu items, buttons and hyperlinks.
Any time any navigation control can be used.
Please share with me a common way so that I can hide these hints without going specifically
for any control.
Also can I hide these using any div in which my form is rendered?
One more query, as I have seen the example of Jqxvalidator on your site, where you are using
tabs to navigate.
How are you hiding hints there?

Thanks & Regards,
Apeksha Singh

[Author]

Posts