jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › How to add dynamic Tab containing grid on a button click.
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 1 month ago.
-
Author
-
Hi,
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,
ApekshaDUPLICATE POST: http://www.jqwidgets.com/community/topic/query-regarding-tabs/
-
AuthorPosts
You must be logged in to reply to this topic.