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 http://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:
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
});
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:
http://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.
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.
Any update on this?
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 } } } });
// 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