Hi,

Thanks for your suggestion. Using rowtemplate am able to create the checkbox and set its status based on the field value. I need to make the checkbox in 2 rows of the grid to be mutually exclusive for which i need to know the status of the checkbox in the grid. Could you please provide me any sample code to read the status of the checkbox in Jquery IGgrid.Thanks.

Hello Suresh A,

The solution I can think of is the following:

1. Put two custom attributes in the checkbox which will hold the linkage between dependent checkboxes. For example "data-id", "data-depend-id" attributes (notice that the name of the attributes conform to html 5 spec). Populate these attributes with the data from the data source (this is done in the template)

2. Bind to the cellclick event of igGrid to listen for clicks on checkboxes

3. Write your custom validation

Here is the example code:

1. Define the template:

rowTemplate: "<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber} </td><td><input type='checkbox' data-id='${ProductID}' data-depend-id='${ProductID-1}' {{if IsAvailable}} checked='checked' {{/if}}></td><tr>"

2. Bind to cellclick event of igGrid and write your custom validation

// bind to cellclick event of igGrid
$("#grid1").bind("iggridcellclick", function (event, args) {
var dataSource = args.owner.dataSource, rowid = args.rowKey, col = args.colKey;
// check if the target of the click is checkbox
if ($(event.originalEvent.target).is("input[type=checkbox]")) {
// check if the checkbox is checked and the dependent row checkbox is not checked
if ($(event.originalEvent.target).attr("checked"))
{
var dependId = $(event.originalEvent.target).attr("data-depend-id");
var dependCheckbox = $("#grid1").find("input[data-id='"+ dependId +"']")[0];
// if the dependent checkbox is checked the we need to uncheck current(this) checkbox
if ($(dependCheckbox).attr("checked"))
{
// warn the user and uncheck the checkbox
alert("Invalid option!");
$(event.originalEvent.target).removeAttr("checked");
}
else
{
//commit current selection to the data source. igGridUpdating needs to be configured
$("#grid1").igGridUpdating("setCellValue", rowid, col, args.cellElement.checked);
dataSource.commit(); // not necessary if autoCommit is true
}
}
}
});

Hope this helps,

Martin Pavlov

Infragistics, Inc.

Hello Martin,

I need to replace boolean columns in every level of a igHierachicalGrid with checkbox columns. I was successful to do so in a igGrid using jquery templating but had no luck with the igHierachicalGrid.

I've taken a demo from the installed files of NetAdvantage for jQuery 2011.2: <drive>:\Program Files\Infragistics\NetAdvantage 2011.2\jQuery\demos\igHierarchicalGrid\RowSelectors.html, and modified it to fit my requirements (attached you can find the altered version).

I've added the following attributes in each level of the grid:

jQueryTemplating: true,
rowTemplate: '...'  // according to each case

But it doesn't work, what am I doing wrong?

Thanks in advance,

Walter

 Hello wocasella,

igHierarchicalGrid does not render child grids initially (if they are not exapnded). My workaround with "checkMe" class is working only for the root grid. That's why this approach doesn't work for the inner level grids.

Then why you see that igHierarchicalGrid is working for two levels?

In the sample I've attached in my previous post the second level grid has "if" condition in the template. This "if" condition disables the checkboxes in the child grid.

After I've made some tests I concluded that "if" statement is working in the template only for the last level in the hierarchy.

I've attached another example in which I have this multi level checkbox problem solved.

In the sample I define function disableChecboxes:

This function contains the code from my previous post with some optimizations. For example I remove the "checkMe" class from the checkbox after I process it.

I also have a handler for "rowExpanded" event which basically calls disableCheckboxes function. When this event fires the child grid is already expanded and I can iterate through the newly created checkboxes.

Here is the code:

You can find all code in the attached sample.

Note: In 12.1 we will ship checkbox support in the columns out of the box. 12.1 is going to be available in April, so stay tuned.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

Hello Martin,

Thanks for your response. That worked fine for a two level igHierarchicalGrid, but it appears that for a grid with more than two levels the problem propagates to all levels except the last one.

I've taken your working sample and applied your changes to another example with a igHierarchicalGrid with more than two levels (you can find this in the attached file).

As I see it, when we get all the elements with the "checkMe" CSS class, the only elements that are obtained are the ones for the top level grid, but not for the inner level grids.

How to go in this case?

Thanks in advance,

Walter

Hello wocasella,

We have some known bugs for igHierarchicalGrid templating and you hit one. Because jQuery templating is not actively developed anymore we are looking forward to write our own templating engine which we will release in our next version of NetAdvantage for jQuery product. Until then I've workaround for your case. You can find in the attachment the working sample. Note that this workaround works only with our latest service release which is 2012.2.2084.

Workaround notes:

In your sample there are 2 issues. The first is that you don't have column key placeholder in the first TD tag. The second is that the If statement doesn't work for the top level grid in the igHierarchicalGrid (you can see that the If statement is working for the sub levels).

I resolved the first issue by adding the value attribute to the checkbox which value is the value of the ProductID column.

Code snippet:

Value="${ProductID}"

I resolved the second issue by removing the If statement from the template and adding class attribute with value "checkMe". I also added the following JavaScript code right after the igHierarhicalGrid initialization:

This code adds disabled attribute to the checkboxes which have ProductID greater than 5.

There is one more issue with the template which is that the spaces are trimmed from the template. This issue is resolve in build 2084.

Hope this helps,

Martin Pavlov

Infragistics, Inc.