Hello sir/mam,
I am facing one problem. Their is one checkbox field on change of which editortype of one column changes to text/combo. The problem is I want that checkbox field/cell to be shown only when grid is in edit/add mode else hidden. I have create a toggle button called it when user clicks on edit svg(I have created to enable edit on click of edit icon and I have also called it when add row is clicked. but I am getting some error as shown below
Funtion to enable edit mode
grid.on("click", ".edit-icon", function () { /toggleStandardCheckbox(); // this function hide /shows the checkbox column. const rowId = $(this).data("id"); if (!rowId) return;
// Allow edit just for this action window.allowEditFromIcon = true;
// Cancel any ongoing edit grid.igGridUpdating("endEdit", true);
// Start editing the desired row grid.igGridUpdating("startEdit", rowId);
// Reset the flag right after so normal clicks are blocked again setTimeout(() => { window.allowEditFromIcon = false; // to prevent editing via double click. }, 100); });
editRowStarting: function (evt, ui) { rowID = ui.rowID toggleStandardCheckbox() },
function toggleStandardCheckbox(IsHide = false) { const grid = $("#master_grid"); const columns = grid.igGrid("option", "columns"); const colIndex = columns.findIndex(col => col.key === "Delivered");
if (colIndex !== -1) { columns[colIndex].hidden = IsHide; grid.igGrid("option", "columns", columns); // Only rebind if not editing //const isEditing = grid.igGridUpdating("isEditing"); //if (!isEditing) { //grid.igGrid("dataBind"); //} }}I am getting this error in console :Uncaught TypeError: this.editor.destroy is not a function at Class.destroy (infragistics.lob.js?ver=1.0:148:22106) at $.<computed>.<computed>.destroy (infragistics.lob.js?ver=1.0:148:20795) at $.<computed>.<computed>.destroy (jquery-ui.js?ver=1.0:144:26) at HTMLDivElement.<anonymous> (jquery-ui.js?ver=1.0:256:39) at S.each (jquery-3.5.1.min.js?ver=1.0:2:2976) at S.fn.init.each (jquery-3.5.1.min.js?ver=1.0:2:1454) at $.fn.<computed> [as igEditorFilter] (jquery-ui.js?ver=1.0:236:11) at $.<computed>.<computed>._destroyAllEditors (infragistics.lob.js?ver=1.0:503:11362) at $.<computed>.<computed>._destroyAllEditors (jquery-ui.js?ver=1.0:144:26) at $.<computed>.<computed>.destroy (infragistics.lob.js?ver=1.0:502:8262)Understand this errorjquery-3.5.1.min.js?ver=1.0:2 Uncaught Error: cannot call methods on igEditorFilter prior to initialization; attempted to call method 'option' at S.error (jquery-3.5.1.min.js?ver=1.0:2:2589) at HTMLDivElement.<anonymous> (jquery-ui.js?ver=1.0:246:17) at S.each (jquery-3.5.1.min.js?ver=1.0:2:2976) at S.fn.init.each (jquery-3.5.1.min.js?ver=1.0:2:1454) at $.fn.<computed> [as igEditorFilter] (jquery-ui.js?ver=1.0:236:11) at $.<computed>.<computed>.editorForKey (infragistics.lob.js?ver=1.0:502:7720) at $.<computed>.<computed>.editorForKey (jquery-ui.js?ver=1.0:144:26) at $.<computed>.<computed>.editorForCell (infragistics.lob.js?ver=1.0:502:8000) at $.<computed>.<computed>.editorForCell (jquery-ui.js?ver=1.0:144:26) at $.<computed>.<computed>._startEditForCell (infragistics.lob.js?ver=1.0:502:30310)In case of edit button its working first time but when cancel and click on it second time it gives error and on add its not workng even for the first time.
Hello Rohit,
I have been looking into your question, and what I can say is that hiding/showing a column can be achieved via the showColumn/hideColumn methods. However, please keep in mind that using these methods causes the grid to re-render, which exits the edit mode automatically. To enter edit mode again, I can suggest using the startEdit and/or startAddRowEdit methods, depending on whether it is an edit operation or an add new row operation. In order to show the column when the editing/row adding starts and hide it when the editing/adding ends, I suggest using the methods in the respective events – editRowStarting, editRowStarted, editRowEnding.
I have prepared a small sample demonstrating a possible approach to achieve your requirement.
Please note that showing/hiding columns during editing is not supported out of the box. The attached sample is entirely implemented on the application level and aims to demonstrate a possible approach in achieving your requirements. It has not been tested for all possible scenarios, and any additional customizations should be handled by the developer.
Here can be found my sample for your reference.
Let me know if you need any further information regarding this matter.
Sincerely, Riva Ivanova Software Developer
I have created custom editor. On click of checkbox it becomes textbox/combobox. So, when adding on editing row sometime its giving the error as shown below. Could you please help me fix it.
Uncaught TypeError: editorProvider.callbacks.valueChanged is not a function at HTMLDivElement.selectionChanged (QSS8DProcess8DStep.js?ver=1.0:1168:38) at $.<computed>.<computed>._trigger (jquery-ui.js?ver=1.0:697:14) at $.<computed>.<computed>._triggerSelectionChanged (infragistics.lob.js?ver=1.0:27:22783) at $.<computed>.<computed>._triggerSelectionChanged (jquery-ui.js?ver=1.0:144:26) at $.<computed>.<computed>._selectData (infragistics.lob.js?ver=1.0:28:2511) at $.<computed>.<computed>._selectData (jquery-ui.js?ver=1.0:144:26) at $.<computed>.<computed>.value (infragistics.lob.js?ver=1.0:28:3284)
$.ig.EditorProviderComboTextbox = $.ig.EditorProvider.extend({ createEditor: function ( callbacks, key, editorOptions, tabIndex, format, element, ) { debugger; element = $("<div id='templateContainer'></div>") element.append('<div id="textEditor"></div>') element.append('<div id="combo"></div>') this._super(callbacks, key, editorOptions, tabIndex, format, element)
element.on("keydown", $.proxy(this.keyDown, this))
this.editor = {} this.editor.element = element
return element }, getValue: function () { if (this.currentEditor.attr("id") == "textEditor") return this.currentEditor.igTextEditor("value") else return this.currentEditor.igCombo("value") }, setValue: function (val) { let checkbox = false
if (rowID) { checkbox = $("#master_grid").igGrid("getCellValue", rowID, "Delivered") }
this.combo = $("#combo") this.txtEditor = $("#textEditor") if (checkbox) { this.txtEditor.hide() this.combo.show() this.currentEditor = this.combo } else { this.txtEditor.show() this.combo.hide() this.currentEditor = this.txtEditor } editorProvider = this
createControls(val) }, setSize: function (width, height) { this.editor.element.css({ width: width, height: height, }) }, keyDown: function (evt) { var ui = {} ui.owner = this.editor.element ui.owner.element = this.editor.element this.callbacks.keyDown(evt, ui, this.columnKey) this.callbacks.textChanged(evt, ui, this.columnKey) },})
function createControls(val) { $("#combo").igCombo({ allowCustomValues: false, dataSource: data_ddl.actions, textKey: "name", valueKey: "code", mode: "dropdown", visibleItemsCount: 5, width: "100%", height: "100%", selectionChanged: function (evt, ui) { var ui = {} ui.owner = editorProvider.editor.element ui.owner.element = editorProvider.editor.element editorProvider.callbacks.valueChanged(evt, ui, editorProvider.columnKey) }, }) $("#combo").igCombo("value", val)
$("#textEditor").igTextEditor({ width: "100%", placeHolder: "Enter Text", value: val, height: "100%", })}
I have been looking into your question and noticed that the same one is asked in this forum thread here and also in this forum thread here. Please note that, according to our support policy, we handle a single question per case, and the current theme is regarding hiding/showing a column. Also, we handle a single forum thread/support case per question.
It is not recommended to post the same question in multiple forum posts or to post questions that are not related to the original theme. This is for better consistency and history tracking.
Having this in mind, the current question will be addressed in the following forum post here.
If you need any further information regarding the showing/hiding functionality, please let me know.