Infragistics IGGrid with checkbox

Hi,

I am using Infragistics grid in MVC3. In the Infragistics grid i want a column to have a checkbox and this checkbox is checked based on the data from the database. Could you please guide me how to do with MVC3 razor.

thanks.

 

Hello Suresh A,

If you want to display checkboxes into the column then you can accomplish this through row template. Row template uses jQuery Templates (See api.jquery.com/category/plugins/templates/ ) and is enabled by setting “rowTemplate” and “jQueryTemplating” properties in igGrid.

Here is the example:

In Aspx:

[code]

@(Html.Infragistics().Grid(Model).ID(“grid1”).RowTemplate(“<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber} </td><td><input type=’checkbox’ {{if IsAvailable}} checked=’checked’ {{/if}}></td><tr>”)

.JQueryTemplating(true).Height(“400”).DataSourceUrl(Url.Action(“PagingGetData”)).DataBind().Render()

)

[/code]

In JS:

[code]

var exampleDataSource = [ {“ProductID”: “1”, “Name”: “Product”, “ProductNumber”: “Art1”, “IsAvailable”: 1}];

$(window).load(function () {

$(“#grid1”).igGrid({

autoGenerateColumns: false,

rowTemplate: “<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber} </td><td><input type=’checkbox’ {{if IsAvailable}} checked=’checked’ {{/if}}></td><tr>”,

columns: [

{headerText: “ProductID”, key: “ProductID” },

{headerText: “Name”, key: “Name” },

{headerText: “ProductNumber”, key: “ProductNumber” },

{headerText: “IsAvailable”, key: “IsAvailable” }

],

jQueryTemplating: true,

dataSource: exampleDataSource

});

});

 [/code]

You can see how to use row template in ASPX and Razor scenario in this sample:

https://www.igniteui.com/grid/overview

For igGridUpdating we don’t have support for checkboxes right now. Available editors are listed in this help topic:

help.infragistics.com/Help/Doc/jQuery/2011.2/CLR4.0/html/igGrid_Updating.html

Hope this helps,

Martin Pavlov

Infragistics, Inc.

Hi Suresh A,

Please feel free to contact us if you have any questions.

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.

Hi,

Any update on this?

 

 

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

Attachments:

1. RowSelectors_RowTmpl-1.zip

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:

Code Snippet

1. $(“.checkMe”).each(function (ix, el) {
2.     if ($(el).val() > 5)
3.         $(el).attr(“disabled”, “disabled”);
4. });

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.

Attachments:

1. RowSelectors_RowTmpl.zip

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

Attachments:

1. MultiLevelsMultiLayouts_Checkboxes.zip

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:

Code Snippet

1. function disableCheckboxes() {
2.     $(“.checkMe”).each(function (ix, domEl) {
3.         // for opitimization purposes we keep jQuery object in local variable
4.         var el = $(domEl);
5.         if (el.val() > 5)
6.             el.attr(“disabled”, “disabled”);
7.         // again for optiomization purposes delete the “checkMe” class so we don’t need to iterate all over every visible checkbox in the grid while user is expanding nodes
8.         el.removeAttr(“class”);
9.     });
10. }

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:

Code Snippet

1. // child grid is created on rowExpanded, so we need to process the newly created checkboxes
2. rowExpanded : function(e, args) {
3.     disableCheckboxes();
4. }

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.

Attachments:

1. MultiLevelsMultiLayouts_Checkboxesv2.zip

Hi Suresh,

FYI – starting in 12.1, this functionality will be supported out of the box in the grid, without the need to create a template:

example:

{ headerText: 'Is Postponed', key: 'IsPostponed', dataType: 'bool', width: '200px', format: 'checkbox' }

format: 'checkbox' is the new functionality. see the attached screenshot – that's how it looks like. 

Hope it helps. Thanks,

Angel

Hi Alex,

As you said , i added the  script for the checkbox in my ig grid ,

$("#resultGrid").igGrid({
 
                columns: [
                        { headerText: "Ballot Id", key: "BallotId", width: 100 },
                        { headerText: "Account Name", key: "AccountName", width: 300 },
                         { headerText: "Shares to vote", key: "Sharestovote", type: 'number', width: 125 },
                        { headerText: "Vote String", key: "VoteString", width: 125 },
                        { headerText: "Vote String Summary", key: "VoteStringSummary", width: 125 },
                        { headerText: "Voted Date", key: "LastVotedDate", width: 125 },
                        { headerText: "Voted FM User", key: "LastVoteFmUser", width: 125 },
                        { headerText: "Voted User", key: "LastVotedUser", width: 125 },
                        { headerText: "Iss User", key: "IssUser", width: 125 },
                        { headerText: "IS Selected", key: "IsSelected", dataType: "bool",width: 75, format:"checkbox" },
                        { headerText: "Account ID", key: "AccountID", hidden: true },
                        { headerText: "IsShareBlocking", key: "IsShareBlocking", hidden: true },
                        { headerText: "Location ID", key: "LocationID", hidden: true },
                        { headerText: "Meeting ID", key: "MeetingID", hidden: true },
                        { headerText: "pxVote User ID", key: "pxVoteUserID", hidden: true },
                        { headerText: "Vote cutoff Date", key: "Votecutoffdate", hidden: true },
 
 
                ],           
                features: [
                {
                    name: 'RowSelectors'
                },
                {
                    name: 'Selection',
                    mode: "cell",
                    multipleSelection: true
                }
                ],
                dataType: "json",
                width: '100%',  //column resizing
                renderCheckboxes: true,
                dataSource: jQuery.parseJSON(data) //JSON Array
            });
        }


the data source from my view model 
[{"AccountID":5845,"AccountName":"Invesco Asia Infrastructure Fund","BallotId":83492125,"IsShareBlocking":false,"LocationID":9590,"MeetingID":1210362,"Sharestovote":17203300.00000,"Votecutoffdate":"2018-04-16T15:00:00","IsSelected":false,"pxVoteUserID":null,"IssUser":null,"VoteString":null,"VoteStringSummary":null,"LastVotedDate":null,"LastVotedUser":null,"LastVoteFmUser":null}]


Can you please suggest me what to do for above ?

It isn't clear what you are asking here.  Please also create a new thread rather than following up on a thread that is six years old for new questions.  You can reference the older thread in your new post if it is relevant.