Hello everyone,
So i was trying fist trying to check checkbox in my grid using selectrow and passing index and trying to print it. but it returning index=-1 and element =-1 no matter what row number i give as input . Could you please help me out .
Also , i want to get the id value for all checkboxes when i click export button.
<script> $(function () { $("#grid").igGrid({ primaryKey: "id", renderCheckboxes: true, autoGenerateColumns: false, updateUrl: "/Student/put/", width: "100%", columns: [ { headerText: "Student ID", key: "id", dataType: "number", width: "15%" }, { headerText: "Student Name", key: "name", dataType: "string", width: "30%" }, { headerText: "Marks", key: "marks", dataType: "number", width: "30%" }, { headerText: "Image", key: "imagepath", dataType: "string", width: "15%", template: "<img src='${imagepath}' width='50' height='50' />" }, { headerText: "Subject", key: "subject", dataType: "string", width: "15%" } ], dataSourceUrl: "/Student/Data12", dataSource: "/Student/Data", features: [ { name: "Selection", mode: "row", multipleSelection: true }, { name: "RowSelectors", enableCheckBoxes: true, enableRowNumbering: true }, { name: "GroupBy" }, { name :"Paging", type:"local", pageSize : 7 }, { name: "Filtering", columnSettings: [ { columnKey: "selectColumn", allowFiltering: false } ] }, { name: "Sorting", type: "remote", // sortUrlKey: 'sort', // sortUrlKeyAscValue: 'asc', // sortUrlKeyDescValue: 'desc' }, { name: "Updating", enableAddRow: true, editMode: "row", validation: true, enableDeleteRow: true, rowAdded: function (evt, ui) { // Custom logic to execute when a row is added console.log("Event arguments (ui):", ui); console.log("Row data:", ui.rowId); console.log(typeof (ui.values)); }, columnSettings: [ { columnKey: "id", readOnly: true }, { columnKey: "name", editorType: "text", validation: true, editorOptions: { validatorOptions: { required: { errorMessage: "You must enter a value to submit."
}, custom: function(ui,evt){ var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element; console.log(validator); if (ui == "rohit") { $(validator).igValidator("option", "errorMessage", "cant enter name rohit"); return false; } return true;
} } } }, { columnKey: "marks", editorType: "combo", validation: true, editorOptions: { mode: "dropdown", dataSource: [ { "ID": 0, "Name": "Food" }, { "ID": 1, "Name": "Beverages" }, { "ID": 200, "Name": "Electronics" } ], textKey: "Name", valueKey: "ID", validatorOptions: { required: { errorMessage: "You must enter a value to submittt."
}, custom:function(ui,evt){ console.log(ui); console.log("hi"); if (ui >= 50) { console.log(ui); var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element; // console.log(validator1); console.log("inside if"); // var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath"); $(validator1).igValidator("option", "required", true);
$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');
return true; } else { // var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element; // var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath"); console.log("else"); var validatorElement = $("#grid").igGridUpdating("editorForKey", "imagepath"); console.log(validatorElement); if (validatorElement) { var validator = validatorElement.data("igValidator").element; $(validator).igValidator("option", "required", false);
} else { console.log("Imagepath editor element is null"); }
// console.log(validator11);
//Set
return true; } } } } } ] } ] }); $("#grid").igGridSelection("selectRow", 4); var rows = $('#grid').igGridSelection('selectedRows'); console.log("rows", rows); $.each(rows,function (selectedRow) { // selectedRow is an object with two properties: element and index // You can access these properties like this: var element = selectedRow.element; var index = selectedRow.index;
// Now you can work with element and index as needed console.log("Element: ", element); console.log("hi"); console.log("Index: ", index);
// Perform your desired operations on element and index here });
$("#savechanges").on("click", function () { alert("Save button clicked"); // Save changes when the button is clicked $("#grid").igGrid("saveChanges"); }); });
</script>
}
Hello,
I have been looking into your question and what I understand and what I see from the code snippet provided to me is that you want in an action to select a row or rows from the igGrid, then take all the selected rows, loop through them and take each row's index and element.
What I can say is that you have done everything as expected as the selection of the row is done via the selectRow method by passing the row index. Getting all the selected rows is done with the selectedRows method as you did.
$("#grid").igGridSelection("selectRow", 1); var rows = $('#grid').igGridSelection('selectedRows');
However, what causes the described behavior is the looping of the selected rows with each. Instead of each, you can use forEach for collections or a for loop to iterate through the collection of selected rows and access the element and index of each individual row.
rows.forEach(function(selectedRow) { var element = selectedRow.element; var index = selectedRow.index; console.log("Element: ", element); console.log("Index: ", index); });
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics