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.

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 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.

Hi,

Any update on this?

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.