Hi All,
I have a grid and I want to be able to auto checked the checkbox if the return value in the column is True.
This is what I did,
{ key:"HasAccess", headerText: " Access", dataType: "bool", width: "10%", height: "12px", template: "<input class=\"gridcheckboxinput\" type=\"checkbox\" {{if ${HasAccess} === \"True\"}}checked{{else}}off{{/if}}\"/ >"},
The "HasAccess" of the first two rows is "True", but when the value render on the UI, the first two checkbox did not checked at all.
Please help>
Hello TedNguyen,
Thank you for contacting us!
About your question, there is no need to use js comparison operator like (===), you can simply check if value is true like ({{if ${ value } }} ). I have created a sample for you in order to show you how to implement column template in igGrid.
Code snippet:
Looking forward to hearing from you.
Thank You for your help. That is what I need.
I solved my problem.
Thanks. I did read through each link above and try it but when I check on different checkbox it still return false and it does not go to my debug code
Here is what I put in my code. Please help and can you give some example like you did up there
var checkboxtemplatediv = "<input class='gridcheckboxinput' type='checkbox' {{if ${HasAccess} === \"true\"}} checked=\"checked\"{{else}}off{{/if}} />"; function GetDivisionAccessList(vType, EmployeeID) { $.post("../Admin/GetPTASUserAccess", {vType:vType, EmployeeID: EmployeeID }, function (data) { $("#igGridDiv").igHierarchicalGrid('destroy'); $("#igGridDiv").igHierarchicalGrid({ height: "300px", width: "100%", autoGenerateColumns: false, primaryKey: "DepartmentID", expandColWidth: 0, renderCheckboxes: true, rowTemplate: "<tr><td><input class='gridcheckboxinput' type='checkbox' {{if ${HasAccess} === \"true\"}} checked=\"checked\"{{else}}off{{/if}}></td><td class='gridtextinput'>${DepartmentDescription}</td><td>${DepartmentID}</td><tr>", columns: [ { key: "HasAccess", headerText: " Access", dataType: "bool", width: "10%", height: "12px", template:checkboxtemplatediv}, { key: "DepartmentDescription", headerText: " Division Name", dataType: "string", height: "12px", template: "<div class='gridtextinput' style='height:12px;'>${DepartmentDescription}</div>" }, { key: "DepartmentID", headerText: "DepartmentID", dataType: "string", width: "0%", height: "12px", template: "<div class='gridtextinput' style='height:0px;'>${DepartmentID}</div>", hidden: true } ], dataSource: data, dataSourceType: "json", responseDataKey: "results", features: [ { name: "Selection", mode: "row", multipleSelection: true, activation: true , columnSettings: [ { classes: "gridtextinput" } ] }, { name: "Sorting", type: "local", sortUrlKey: "sort", sortUrlKeyAscValue: "asc", sortUrlKeyDescValue: "desc", columnSettings: [{ columnIndex: -1, allowSorting: true, columnKey: "DepartmentID" }, { columnIndex: -1, allowSorting: true, columnKey: "DepartmentDescription" }] } ] }); });
}
$(
"#igGridDiv").on("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 = $("#igGridDiv").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
// $("#igGridDiv").igGridUpdating("setCellValue", rowid, col, args.cellElement.checked);
// dataSource.commit(); // not necessary if autoCommit is true
var editor = $("#igGridDiv").igGridUpdating("editorForKey", "Selected");
if (editor != null && editor.data("igEditorFilter"))
var value = editor.data("igEditorFilter").options.provider.value;
});
Hello Ted,I have created a code sample illustrating a possible approach in order to access the columns CheckBox value. I have used the previously shared sample as a basis for the new one. Please notice, the API documentation could be very handy http://help.infragistics.com/jQuery/2014.1/ui.iggrid
You could run the sample and check the console for the returned values. It could require reloading the page, depending on the browser used.
function getGridCheckBoxesValues() {
var rows = $('#grid1').igGrid('rows');
var cols = ["ColumnA", "ColumnD", "ColumnE"];
for (i = 0; i < rows.length; i++) {
for (j = 0; j < cols.length; j++) {
colKey = cols[j];
// debugger;
var checkBoxValue = $("#grid1").igGrid("getCellValue", i, colKey);
console.log(colKey + " " + i + " row " + checkBoxValue);
} } }
What is more, it is common practice to create a new forum thread with title - corresponding to the new issue, when the subject in the discussion changes from the original one. It is mainly because of tracking purposes. This helps finding similar issues more easily, when searching for previously posted threads in the forum.
I did download and run it, it woks. However if I checked and unchecked some checkbox, when I ran the getGridCheckBoxesValues() function I still get the old value
Example:
I add <input type="button" onclick="getGridCheckBoxesValues()"; value="Validate" /> on the html
Load the page with columnA: false, true, false. Now make change to columA to: true, false true.
ColumnA is <input checkbox> so the user can checked and unchecked the box
Click on "Validate" button, it call onclick="getGridCheckBoxesValues()"; it loop through all the rows, but the columnA still return:false, true, false instead of true, false true
Hello,I am attaching a modified sample. The reason these checkBoxes values are not updated when the user changes the values, is because the checkBoxes used in the sample are templated HTML inputs and do not possess the additional functionality of the checkBoxes if renderCheckboxes: true option of the grid is used.
So it is required to manually handle and attach a functionality to the inputs in order to update the igGrid DataSource. The igGridUpdating is used to do it and set the new cell value. The bindEvents() function is attached when the grid is rendered and is responsible for updating the cell values when they are changed.
Now when you call getGridCheckBoxesValues(), it will return the new values, because the igGrid DataSource has being updated. Please notice primaryKey should be specified when using Updating and it is set as primaryKey: "id".
You could inspect how the new values are updated in the console, upon checkBox click.Please let me know if this suits your requirements.
It works. Finally.
Thank you for your support and help.