Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
600
Grid Checkbox Checked Total
posted

Hi,

I have a grid with column that contains a checkbox.  When the grid loads I would like to know how many checkboxes are checked.  I would also like to wire an event to each checkbox that would increment/decrement the total counter when checked/unchecked.  I've attached a sample.  Could you please suggest how I could modify this sample to achieve what I'm looking for?

Thanks,

Rick

igGrid.zip
Parents
No Data
Reply
  • 17590
    Offline posted

    Hello Rick,

    Thank you for posting in our community.

    What  I can suggest for achieving your requirement is using column summaries widget of igGrid. This allows the igGrid to display a summary row for the data in the columns of the grid. Predefined summary functions are available, however a custom functions could be created to calculate custom summaries. Custom summaries is what I believe will help you achieve your requirement.

    I created a small sample using custom summaries to count how many true and false values are present in the igGrid. When defining a custom method (SummaryOperand with type Custom) you point the summary feature to a custom function to calculate the row summary. When the compactRenderMode option is set to false, the results from both the predefined and the custom methods are positioned in summary rows according to their sort order as defined by the Order property in the igGridSummaries` defaultSummaryMethods option.

    features: [

    {

    name: "Updating"

    },

    {

    name: "Summaries",

    columnSettings: [

    {

    columnIndex: 0, allowSummaries: false ,

    },

    {

    columnIndex: 1, allowSummaries: false,

    },

    {

    columnIndex: 2, allowSummaries: false,

    },

    {

    columnKey: "MakeFlag",

    summaryOperands: [

    {

    rowDisplayLabel: "Count True Values",

    type: "custom1",

    summaryCalculator: $.proxy(countTrueValues, this),

    order: 5

    },

    {

    rowDisplayLabel: "Count False Values",

    type: "custom2",

    summaryCalculator: $.proxy(countFalseValues, this),

    order: 6

    }

    ]

    }

    ]

    .

    .

    .

    .

    function countTrueValues(data) {

    var i, l = data.length, count = 0, elem;

    for (i = 0; i < l; i++) {

    elem = data[i];

    if (elem === true) {

    count++;

    }

    }

    return count;

    }

    function countFalseValues(data) {

    var i, l = data.length, count = 0, elem;

    for (i = 0; i < l; i++) {

    elem = data[i];

    if (elem === false) {

    count++;

    }

    }

    return count;

    }

    I made a small sample and I am attaching it for your reference. The sample has two custom summary functions (countTrueValues, countFalsevalues) each calculating the number of true and false values in a Boolean column. Those summary functions are then used for the "MakeFlag" column. Even if you update and value in the MakeFlag column this is going to be immediately reflected in the summary.

    Some additional information regarding Column Summaries and how they could be configured could be found at:

    http://help.infragistics.com/doc/jQuery/2014.2/CLR4.0/?page=igGrid_Configuring_Column_Summaries.html

    http://help.infragistics.com/Doc/jQuery/Current/CLR4.0?page=igGrid_Enabling _Column_Summaries.html

    http://help.infragistics.com/jQuery/2014.2/ui.iggridsummaries

    I hope you find my information helpful.

    Please let me know if you need any further assistance with this matter.

    igGridCustomSummaries.zip
Children