jQWidgets Forums

jQuery UI Widgets Forums Grid How to implement select all checkbox column in a grid with filter ?

This topic contains 0 replies, has 1 voice, and was last updated by  Apeksha Singh 12 years ago.

Viewing 1 post (of 1 total)
  • Author

  • Apeksha Singh
    Participant

    Hi,

    I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project.

    Now I am facing an issue that is I have a select all checkbox in my grid that select all the row and also checked the comboboxes of each row.
    While using filter it is affecting my select all code as I am selecting rows by using row index.
    And also I tried to use getrowboundindex but it is not working.

    I am adding my code below please let me know :-

    var draft_initGrid = function () {
    gridid = "#draft_invoicetable";//update gridid...
    //console.log("gridid in draft_initGrid",gridid);
    //var url = "sampledata/invoice_maindata.php";
    var source =
    {
    localdata: draft_invoice_data,
    datatype: "json",
    datafields:
    [
    { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    //{ name: 'paid', type: 'float' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    // id: 'id',
    // url: url,
    // root: 'data'
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#draft_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    //sortable: true,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:true,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';/*CHANGES DONE ON 27 Feb*/
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    columnCheckBox = $(element);
    $(element).on('change', function (event) {
    console.log("event :",event);
    var paginginformation = $("#draft_invoicetable").jqxGrid('getpaginginformation');
    var pagenum = paginginformation.pagenum;
    var pagesize = paginginformation.pagesize;
    var pagescount = paginginformation.pagescount;
    var k = 1;
    var pageArray = new Array();
    for (var i = pagenum * pagesize; i < (pagenum + 1) * pagesize; i++) {
    pageArray.push(i);
    };
    var checked = event.args.checked;
    if (checked == null || updatingCheckState) return;
    var rowscount = $("#draft_invoicetable").jqxGrid('getdatainformation').rowscount;
    $("#draft_invoicetable").jqxGrid('beginupdate');
    if (checked)
    {
    $("#draft_invoicetable").jqxGrid({ selectedrowindexes: pageArray });
    for (m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++)
    {
    // Get the Check box value of all rows on the page
    var value = $('#draft_invoicetable').jqxGrid('getcellvalue', m, "item");
    if (value != null){
    $("#draft_invoicetable").jqxGrid('setcellvalue', m, 'item', event.args.checked);
    k = k * 1;
    }
    else
    {
    k = k * 0;
    break;
    };
    };
    if (0 ==(m % pagesize))
    x = pagesize;
    else
    x = m % pagesize;
    }// END OF if (checked)
    else if (checked == false)
    {
    $("#draft_invoicetable").jqxGrid('clearselection');
    for (var j = (pagenum) * pagesize; j < (pagenum + 1) * pagesize; j++) {
    $("#draft_invoicetable").jqxGrid('setcellvalue', j, 'item', event.args.checked);
    }
    x=0;
    }
    $("div#draftitem_label label").text(x);
    $("#draft_invoicetable").jqxGrid('endupdate');
    });
    }
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number', editable:false,width: '12%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
    { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
    { text: 'Date',datafield: 'date',editable:false, width: '15%' },
    { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
    // { text: 'Paid',datafield: 'paid', width: '8%' },
    { text: 'Due',datafield: 'due',editable:false,width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    //START :Code to refresh the grid row selection on changing page or pagesize.Added by UI
    $("#draft_invoicetable").on("pagechanged", function (event)
    {
    //var args = event.args;
    //var pagenum = args.pagenum;
    //var pagesize = args.pagesize;
    $('#draft_invoicetable').jqxGrid('updatebounddata');
    $("#draft_invoicetable").jqxGrid('clearselection');
    $("div#draftitem_label label").text(0);
    });
    $("#draft_invoicetable").on("pagesizechanged", function (event)
    {
    //var args = event.args;
    //var pagenum = args.pagenum;
    //var oldpagesize = args.oldpagesize;
    //var pagesize = args.pagesize;
    $("#draft_invoicetable").jqxGrid('updatebounddata');
    $("#draft_invoicetable").jqxGrid('clearselection');
    $("div#draftitem_label label").text(0);
    });
    //END :Code to refresh the grid row selection on changing page or pagesize.Added by UI
    // select or unselect rows when the checkbox is checked or unchecked.
    $("#draft_invoicetable").bind('cellendedit', function (event) {
    if (event.args.value) {
    $("#draft_invoicetable").jqxGrid('selectrow', event.args.rowindex);
    ++x;
    $("div#draftitem_label label").text(x);
    }
    else {
    $("#draft_invoicetable").jqxGrid('unselectrow', event.args.rowindex);
    --x;
    $("div#draftitem_label label").text(x);
    //main checkbox set false
    if(x==0)
    {
    columnCheckBox.jqxCheckBox({ checked: false });
    }
    }
    });

    Please tell me how I can use filter so that it won’t disturb my this code.

    Thanks & Regards,
    Apeksha

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.