jQuery UI Widgets › Forums › Navigation › Tabs › Query regarding Tabs
This topic contains 22 replies, has 2 voices, and was last updated by Apeksha Singh 11 years, 5 months ago.
-
AuthorQuery regarding Tabs Posts
-
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,
ApekshaHi 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,
ApekshaHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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,
ApekshaHi Dimitar ,
Thanks for your support no need to reply the above post. I have resolved the issue.
Thanks & Regards,
ApekshaHi 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,
ApekshaHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for you reply.
Regards,
Apeksha -
AuthorPosts
You must be logged in to reply to this topic.