hi,
I have string columns MakeFlag with valid / invalid values and want display checkbox along based on that.
Did that already and it's almost working but I don't want user to be able edit text value just the checkbox, now he can do both.
how to do that? thanks
$(function () { var dataURL = "">localhost:54493/.../values"; $("#grid1").igGrid({ dataSource: dataURL, primaryKey: "TIDnumber", renderCheckboxes: true, restSettings: { update: { url: dataURL + "/Save" }, remove: { url: dataURL, batch: true }, create: { url: dataURL, batch: true } }, autoGenerateColumns: false, height: "350px", width: "800px", columns: [ {headerText: "TIDnumber", key: "TIDnumber", dataType: "number" }, {headerText: "Description", key: "Description", dataType: "string" }, { headerText: "Quantity", key: "Quantity", dataType: "string" }, { headerText: "Make Flag", key: "MakeFlag", dataType: "string", width: "15%", template: "<input type='checkbox' {{if ${MakeFlag} == 'Valid'}} checked='checked' {{/if}}>${MakeFlag}" } ], features: [ { name: "Updating", editMode: 'cell', editCellEnded: onEditCellEnded, columnSettings: [{ columnKey: 'TIDnumber', readOnly: true }, { columnKey: "Description", editorType: 'string', validation: true, editorOptions: {required: true } } ]}]});
function onEditCellEnded(event, args) { if (args.columnKey == "MakeFlag") { //var cell = args.editor; var cellValue = $("#grid1").igGrid("getCellValue", args.rowID, "MakeFlag"); if (cellValue == "Valid") { $("#grid1").igGridUpdating("setCellValue", args.rowID, "MakeFlag", "Invalid"); } else if (cellValue == "Invalid") { $("#grid1").igGridUpdating("setCellValue", args.rowID, "MakeFlag", "Valid"); } } $("#grid1").igGrid("saveChanges"); };
I almost got it right changing template to that:
var mytemplate = "<input type='checkbox' {{if ${MakeFlag} == 'Valid'}} checked='checked' {{/if}} onclick='changeState(this, ${TIDnumber})'>${MakeFlag}";
and:
function changeState(element, rowId) { var $checkBox = $(element); if ($checkBox.prop("checked")) { $("#grid1").igGridUpdating("setCellValue", rowId, "MakeFlag", "Valid"); } else { $("#grid1").igGridUpdating("setCellValue", rowId, "MakeFlag", "Invalid"); } }
the only problem is when I click on text it go to edit mode covering checkbox, editing text is disabled but still editor covers checbox.
Any idea what's the trick?
ok, I solved that using dropdown combo in addition to checkbox, but onEditCellended event is not called when checkbox is clicked even though it does change the text as well. When selection is mad from combo event is fired,
how to make checkbox to fire that event? anybody here?
columnKey: "MakeFlag", editorType: 'combo', editorOptions: { mode: "dropdown", dataSource: myJSON, disabled: false // }
Hello Robson,
Thank you for posting in our community.
By design calling API programmatically does not raise events related to their operation the those events are only raised by their respective user interaction. Since the combo belongs to the default grid editors it is triggering grid events. However, since you are manually setting the cell value using the API (using setCellValue method) when the checkbox value is changed editCellEnded event is not fired.
My suggestion for your scenario is using only the combo editor provider for editing the "MakeFlag" column and use the checkbox for display purposes.
Please let me know if you need any further assistance with this matter.