Query regarding Tabs - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addAt, grid, jqxgrid, jqxTabs, tab, Tabs

This topic contains 22 replies, has 2 voices, and was last updated by Apeksha Singh 11 years, 6 months ago.

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

Author

Query regarding Tabs Posts

May 20, 2013 at 10:06 am Query regarding Tabs #21435

Apeksha Singh

Participant

Hello ,

Please guide me how I can add a grid with tabs when we are creating tabs on the Add button event in one of your demo.

Thanks & Regards,

Apeksha

May 21, 2013 at 6:14 am Query regarding Tabs #21511

Dimitar

Participant

Hello Apeksha,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var addButton,
                addButtonWidth = 29,
                index = 0;
            var gridInit = function (tab) {
                if (tab == 2) {
                    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 < 100; i++) {
                        var row = {};
                        var productindex = Math.floor(Math.random() * productNames.length);
                        var price = parseFloat(priceValues[productindex]);
                        var quantity = 1 + Math.round(Math.random() * 10);
                        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                        row["productname"] = productNames[productindex];
                        row["price"] = price;
                        row["quantity"] = quantity;
                        row["total"] = price * quantity;
                        data[i] = row;
                    }
                    var source =
            {
                localdata: data,
                datatype: "array"
            };
                    var dataAdapter = new $.jqx.dataAdapter(source, {
                        loadComplete: function (data) { },
                        loadError: function (xhr, status, error) { }
                    });
                    $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
                };
            };
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true, initTabContent: function (tab) { gridInit(tab) } });
            var index = 0;
            $('#jqxTabs').on('tabclick', function (event) {
                if (event.args.item == $('#unorderedList').find('li').length - 1) {
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs').jqxTabs('addAt', event.args.item, 'Sample title ' + index, 'Grid:<br /><div id="jqxgrid"></div>');
                    index++;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Node.js</li>
                <li>Active Server Pages</li>
                <li canselect='false' hasclosebutton='false'>Add New Tab</li>
            </ul>
            <div>
                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.
            </div>
            <div>
                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.
            </div>
            <div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 22, 2013 at 11:31 am Query regarding Tabs #21645

Apeksha Singh

Participant

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

May 23, 2013 at 6:21 am Query regarding Tabs #21714

Dimitar

Participant

Hi Apeksha,

As you can see from the given initTabContent function:

var gridInit = function (tab) {
                if (tab == 2) {

the grid is only initialized when the new tab is the third one (the first new). If you wish to initialize another grid, you should put its initialization when tab == 3, etc.

We also recommend using the latest version of jQWidgets (2.8.3).

Best Regards,
Dimitar

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

May 23, 2013 at 12:31 pm Query regarding Tabs #21758

Apeksha Singh

Participant

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

May 27, 2013 at 5:28 am Query regarding Tabs #21877

Dimitar

Participant

Hi Apeksha,

Here is an example along the lines of your requirement:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var addButton,
                addButtonWidth = 29,
                index = 0;
            var gridInit = function (tab) {
                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 < 100; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                var source =
            {
                localdata: data,
                datatype: "array"
            };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgrid" + tab).jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            };
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true, initTabContent: function (tab) { gridInit(tab) } });
            var index = 0;
            $('#jqxTabs').on('tabclick', function (event) {
                if (event.args.item == $('#unorderedList').find('li').length - 1) {
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs').jqxTabs('addAt', event.args.item, 'Sample title ' + index, 'Grid:<br /><div id="jqxgrid' + event.args.item + '"></div>');
                    index++;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Node.js</li>
                <li>Active Server Pages</li>
                <li canselect='false' hasclosebutton='false'>Add New Tab</li>
            </ul>
            <div>
                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.
            </div>
            <div>
                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.
            </div>
            <div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 29, 2013 at 12:11 pm Query regarding Tabs #22026

Apeksha Singh

Participant

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

May 30, 2013 at 5:24 am Query regarding Tabs #22093

Dimitar

Participant

Hi Apeksha,

Here are the two solutions in one:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../2.8.3/scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../2.8.3/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var addButton,
                addButtonWidth = 29,
                index = 0;
            var gridInit = function (tab) {
                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 < 100; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                var source =
            {
                localdata: data,
                datatype: "array"
            };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgrid" + tab).jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            };
            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);
                }
            };
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true, initTabContent: initWidgets });
            var index = 0;
            $('#jqxTabs').on('tabclick', function (event) {
                if (event.args.item == $('#unorderedList').find('li').length - 1) {
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs').jqxTabs('addAt', event.args.item, 'Sample title ' + index, 'Grid:<br /><div id="jqxgrid' + event.args.item + '"></div>');
                    index++;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Node.js</li>
                <li>Active Server Pages</li>
                <li canselect='false' hasclosebutton='false'>Add New Tab</li>
            </ul>
            <div>
                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.
            </div>
            <div>
                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.
            </div>
            <div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 30, 2013 at 7:52 am Query regarding Tabs #22117

Apeksha Singh

Participant

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

May 30, 2013 at 8:59 am Query regarding Tabs #22142

Dimitar

Participant

Hi Apeksha,

Please clarify your requirement. As far as I understand, you have four initially loaded grids in the first four tabs and want to add more grids when more tabs are added. If this is the case, the provided solution should be suitable (the gridinit function is just an example, change it for a function which initializes grids however you like).

If you need further assistance, please also provide your sample code and remember to format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

May 30, 2013 at 1:21 pm Query regarding Tabs #22177

Apeksha Singh

Participant

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

May 31, 2013 at 11:28 am Query regarding Tabs #22264

Apeksha Singh

Participant

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

June 3, 2013 at 5:23 am Query regarding Tabs #22390

Dimitar

Participant

Hi Apeksha,

If you try to include a grid into a tab without using the initTabContent callback function, the grid may not initialize correctly. We suggest using the function.

Please, re-post your latest code example and remember to format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

June 3, 2013 at 6:21 am Query regarding Tabs #22395

Apeksha Singh

Participant

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

June 3, 2013 at 6:24 am Query regarding Tabs #22396

Dimitar

Participant

Hi Apeksha,

Please, re-post your latest code example and remember to format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

Author

Posts

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

You must be logged in to reply to this topic.