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, 5 months ago.

Viewing 8 posts - 16 through 23 (of 23 total)

← 1 2

Author

Query regarding Tabs Posts

June 3, 2013 at 8:40 am Query regarding Tabs #22413

Apeksha Singh

Participant

Hi Dimitar,

I have reposted my and also formated it as explained in the forum topic Code Formatting.
Please see the above post and reply me as soon as possible.

Thanks & Regards,
Apeksha

June 3, 2013 at 9:53 am Query regarding Tabs #22416

Apeksha Singh

Participant

Hi Dimitar,

I have re-posted my code and formatted it as explained in the forum topic Code Formatting.

Please review the above post and guide me as soon as possible.

Thanks & Regrads,
Apeksha

June 4, 2013 at 5:43 am Query regarding Tabs #22472

Dimitar

Participant

Hi Apeksha,

Here is the solution with a button:

<!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 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 < 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" + grid_index).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 (grid_index) {
                switch (grid_index) {
                    case 0:
                        all_initGrid();
                        break;
                    case 1:
                        customers_initGrid();
                        break;
                    case 2:
                        suppliers_initGrid();
                        break;
                    case 3:
                        archieved_initGrid();
                        break;
                    default:
                        gridInit(grid_index);
                }
            };
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true, initTabContent: initWidgets });
            var index = 0;
            var grid_index = 4;
            $('#new_group_save').bind('click', function (event) {
                //                var value = $("#newgroup_name").val();
                var value = "Grid" + (grid_index + 1);
                $('#jqxTabs').jqxTabs('addAt', grid_index, value, 'Grid:<br /><div id="jqxgrid' + grid_index + '"></div>');
                index++;
                grid_index++;
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Initial Grid 1</li>
                <li>Initial Grid 2</li>
                <li>Initial Grid 3</li>
                <li>Initial Grid 4</li>
            </ul>
            <div>
                all_initGrid()
            </div>
            <div>
                customers_initGrid()
            </div>
            <div>
                suppliers_initGrid()
            </div>
            <div>
                archieved_initGrid()
            </div>
        </div>
    </div>
    <button id="new_group_save">
        Add New Tab</button>
</body>
</html>

Best Regards,
Dimitar

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

June 4, 2013 at 9:17 am Query regarding Tabs #22499

Apeksha Singh

Participant

Hi Dimitar ,

Thanx a lot for your reply.
I have implemented this in my code according to the requirement, but still facing an issue.The grids that are already added to the tabs is inside a div which even contains buttons an a input field for search items.
I am adding the html code below for the already added tab :-

<div id="contact_sub_tabs">
			<ul>
			    <li style="margin-left: 30px;">All</li>
			</ul>
<!--START: Main content for All Accounts tab -->				
			<div class="coa_sub_tabs_content">
			      <div class="search_header" >
				   <div class="search_header_button" >
					<input type="button" value="Change Group" id='all_contact_group' class="changegroup"/>
					<input type="button" value="Archieve" id='all_contact_archieve'/>
				   </div>
				   <div id="allitem_label"  class=" itemcount_value"  >
				         <label style="cursor:pointer;">0</label>
			           </div>
				   <div  class="itemcount_label" >
				 	 <label> Item selected</label>
			           </div>
				   <div class="search_div">
					<div>
                                             <input type="text" class="search" id="all_contact_search"/>
                                        </div>
                                        <span>Search</span>
				    </div>
		              </div>
		             <div style="float:left;width:100%;height:auto ! iportant;overflow: hidden;top:-8px!important;">
				     <div class="grid_section" id="all_contact"></div>
		             </div>
			</div>
<!--END: Main content for All Accounts tab -->	
 </div>

How can I give the similar look to my dynamically created tab.
I have tried something and adding that code below :-

$("#contact_group").jqxButton({ width: '95px',height: '26px', theme: 'ui-redmond' });
$("#contact_archieve").jqxButton({ width: '80px',height: '26px', theme: 'ui-redmond' });
$(".contact_search").jqxInput({width: '100px',height: '20px',theme: 'ui-start'}); 
$('#contact_sub_tabs').jqxTabs('addAt', grid_index, value, '<div class="coa_sub_tabs_content"><div class="search_header" ><div class="search_header_button"><input type="button" value="Change Group" id="contact_group" class="changegroup"/><input type="button" value="Archieve" id="contact_archieve"/></div><div id="allitem_label"  class=" itemcount_value"><label style="cursor:pointer;">0</label></div><div  class="itemcount_label"><label> Item selected</label></div><div class="search_div"><div><input type="text" class="search" class="contact_search"/></div><span>Search</span></div></div><div style="float:left;width:100%;height:auto ! iportant;overflow: hidden;top:-8px!important;"><div class="grid_section" id="jqxgrid' + grid_index + '"></div></div></div>');

But this code is not displaying the jqxButtons.
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

June 4, 2013 at 12:35 pm Query regarding Tabs #22522

Apeksha Singh

Participant

Hi Dimitar ,

Thanks for your support no need to reply the above post. I have resolved the issue.

Thanks & Regards,
Apeksha

June 19, 2013 at 6:35 am Query regarding Tabs #23383

Apeksha Singh

Participant

Hi Dimitar ,

Can you please guide me how I can make the dynamic tabs with grid remain on the page even after refreshing the page.

Please reply as soon as possible.

Thanks & Regards,
Apeksha

June 19, 2013 at 7:49 am Query regarding Tabs #23399

Dimitar

Participant

Hi Apeksha,

Unfortunately, newly added tabs do not persist if the page is reloaded. You may, however, save the selection using cookies. The cookies approach can possibly be applied to your requirement, too.

Best Regards,
Dimitar

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

June 19, 2013 at 8:56 am Query regarding Tabs #23402

Apeksha Singh

Participant

Hi Dimitar,

Thanks for you reply.

Regards,
Apeksha

Author

Posts

Viewing 8 posts - 16 through 23 (of 23 total)

← 1 2

You must be logged in to reply to this topic.