I have a collection of objects being bound to an igGrid. For many columns, the properties being bound are simple types e.g. string, int, bit, etc. For one of the columns, I am passing back HTML and the igGrid is rendering it perfectly exactly how I want it.
However, this HTML column is also editable. The underlying editor is set to a Combo Box because it is multiple selection. Whenever the user clicks on the field it initially shows the value as encoded HTML in a text editor. But the drop down controls show the extra options in the perfect rendered HTML. Screenshots attached.
Question: Is there any way to hide the text editor control rendering the encoded HTML or force the editor to continue rendering the HTML?
I'm certain the display will look good if and only if the combo box arrow is displayed and nothing else. But it has to be floated to the right exactly where it is today.
Thanks,
Martin,
That doesn't make any sense. The only reason I say that is because the templating that affects this control is limited to the drop down list that displays the items that can be selected. Not the input editor that displays the current selection while the drop down list is open. This input editor is the same one that would allow users to optionally enter a custom value. That cannot be templated. Well as far as I know.
Hi Daniel,
igGridUpdating combo editor is (as you already know) an igCombo, which means that instead of passing back HTML and binding igCombo to it you can use igCombo templating to achieve the same effect.
You also need to manually save the selected items back to the data source, because igGridUpdating supports only single selection. You can do that by calling igCombo.values method.
You can get the editor for a column with the igGridUpdating.editorForKey method API.
Hope this helps, Martin Pavlov
Infragistics, Inc.
Hello Daniel,
Thank you for posting your question and shareing your answer. I have created a new feature request for this behavior with the id of PI13010169.
Span tag didn't render:
<span id='igComboBoxHtmlSpan' style='color: black; font-weight: normal !important; display: block; padding: 2px;'></span>
My colleagues and I have successfully hid the offending input editor and replaced it with a span tag that will render my HTML. This solution works perfectly!
$(".selector").on("iggridupdatingeditcellstarting", function (e, ui) { if (ui.columnKey === 'Description') { $(ui.editor).on("igcomboselectionchanged", function (e, ui) { $("#igComboBoxHtmlSpan").empty(); $("#igComboBoxHtmlSpan").append(ui.items[0].text); }); } });
$(".selector").on("iggridupdatingeditcellstarted", function (e, ui) { if (ui.columnKey === "Description") { var row = $(ui.owner.element).igGrid("findRecordByKey", ui.rowID); var input = $(ui.editor).find("input"); input.css("display", "none"); $("#igComboBoxHtmlSpan").remove(); $("").insertAfter(input); $("#igComboBoxHtmlSpan").append(row.Description); } });
As a side note, it would be AWESOME if there was an option to toggle between dislaying an input vs a block level element when display the original value. This is a feature request. Thanks,