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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Apeksha Singh
    Participant

    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,
    Apeksha


    Dimitar
    Participant
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.