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
Your example could work if I could somehow hide those summary rows and duplicate the result in another element.
Hi Vasya,
Thank you for the sample but I don't think that will work in our case. Our space is very limited and I would like to control where the value appears and not have it appear as a "total". Please see attached to see what I'm looking for and the space constraints.
I believe I can get the total on page load from the server. Could you show me how I can access a custom function that occurs when a checkbox is checked (or unchecked) and that passes the value to this function? I can then increment/decrement my value in that custom function and display the value wherever.
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; }
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) {
if (elem === false) {
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.