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
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.
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.
Your example could work if I could somehow hide those summary rows and duplicate the result in another element.
What I can suggest for achieving your requirement is handling the summariesCalculated event. This event is going to be fired when the grid loads initially as well as every time a checkbox value is changed. In this event you could retrieve the count of the checked and unchecked rows and set this as a span`s text. Afterwards, you could just hide the summary rows in order to save your space. For example:
summariesCalculated: function (evt, ui) { var trueValues = ui.owner.summaryCollection().MakeFlag[0].result; var falseValues = ui.owner.summaryCollection().MakeFlag[1].result; var total = trueValues + falseValues; $("#resultSpan").text("There are " + trueValues + " checked rows from " + total); $("tr[data-role='summaryrow']").each(function (index) { $(this).hide(); }); }
summariesCalculated: function (evt, ui) {
var trueValues = ui.owner.summaryCollection().MakeFlag[0].result;
var falseValues = ui.owner.summaryCollection().MakeFlag[1].result;
var total = trueValues + falseValues;
$("#resultSpan").text("There are " + trueValues + " checked rows from " + total);
$("tr[data-role='summaryrow']").each(function (index) {
$(this).hide();
});
I modified my sample and I am attaching it for your reference.
I hope this will help you achieve your requirement.
I'll work with this, thanks. Can you tell me the best way to hide this button since it will not be in use? See attached.
I am glad that you consider my suggestion helpful.
What I can suggest regarding your requirement to hide the summaries button is to set the showSummariesButton option to false. This option controls whether or not the header summary icon to be shown. It could be set as following:
//Initialize $(".selector").igGrid({ features: [ { name: "Summaries", showSummariesButton: false } ] }); //Get var showSummariesButton = $(".selector").igGridSummaries("option", "showSummariesButton"); //Set $(".selector").igGridSummaries("option", "showSummariesButton", false);
//Initialize
$(
".selector"
).igGrid({
name:
"Summaries"
,
showSummariesButton:
false
//Get
var
showSummariesButton = $(
).igGridSummaries(
"option"
"showSummariesButton"
);
//Set
Thanks Vasya, this works.