Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel Dority
2745
igGrid column with igCombo Editor displaying HTML
posted

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,

Parents
No Data
Reply
  • 2745
    Verified Answer
    Offline posted

    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,

Children