[IgbGrid] - InlineEditorTemplateScript with Igc-Combo doesn't work

[mddifilippo89]

Description

[IgbGrid] - InlineEditorTemplateScript with Igc-Combo doesn't work

igRegisterScript("WebGridComboCellTemplate", (ctx) => {
var html = window.igTemplating.html;

const companies = [
    "Flashpoint",
    "Tazzy"];

return html`<div>
<igc-combo data="${companies}"  >
</igc-combo>

`; }, false);

[mddifilippo89]

data-combo-template.zip

[gmurray81]

@mddifilippo89 that looks like it did work to me, since the combo is there and opened, so you might want to double check you are providing enough info to the combo?

IIRC you need to do something very specific to make sure you are passing values as PROPERTIES in lit, rather than ATTRIBUTES. I think the above is passing the data as an attribute, which will turn it into a string, and it needs to stay and array. Go check out the lit syntax you should use to pass it as a property. Might have been a dot prefix?

[gmurray81]

yeah, I think you want a dot as a prefix for the data name. but apart from that make sure you are giving the combo enough stuff.

[mddifilippo89]

I managed to populate the cells's combo like this but can't select anything

igRegisterScript("WebGridComboCellTemplate", (ctx) => {
var html = window.igTemplating.html;

const companies = [
    { ID: 1, name: "Flashpoint"},
    { ID: 2, name: "Tazzy"},
    { ID: 3, name: "Digitube"},
    { ID: 4, name: "Realbuzz" },
    { ID: 5, name: "Thoughtbridge"},
    { ID: 6, name: "Twinte"},
    { ID: 7, name: "Eabox"},
    { ID: 8, name: "Rhycero"},
    { ID: 9,  name: "Pixope"},
 ];
return html`<div>

<igc-combo .data="${companies}" value-key="ID" display-key="name" >
`;

}, false);

[J-B-Sims]

I had the same result as @mddifilippo89. I managed to get the combo to populate but the checkboxes are all disabled.

igRegisterScript("LocationComboTemplate", (ctx) => {
var html = window.igTemplating.html;

const companies = [
    { ID: 1, name: "Flashpoint"},
    { ID: 2, name: "Tazzy"},
    { ID: 3, name: "Digitube"},
    { ID: 4, name: "Realbuzz" },
    { ID: 5, name: "Thoughtbridge"},
    { ID: 6, name: "Twinte"},
    { ID: 7, name: "Eabox"},
    { ID: 8, name: "Rhycero"},
    { ID: 9,  name: "Pixope"},
 ];
return html`<div>

<igc-combo .data="${companies}" value-key="ID" display-key="name" >
; }, false);

<IgbColumn Field="LocationCombo" BodyTemplateScript="LocationComboTemplate" />

[gmurray81]

that seems like an issue with the combo rather than the grid, @mddifilippo89 . I'd verify that that scenario works fine against the combo by itself outiside the grid cell first, and then investigate further if the issue is only reproducible inside grid, o/w have someone responsible for the combo look into it.

[gmurray81]

@mddifilippo89 I feel like I'm not seeing any selected values being displayed in the top area in their combo demo here either:

https://igniteui.github.io/igniteui-webcomponents/?path=/story/combo--basic

is that what you are seeing? it checks but you don't have feedback about the selected value? Wondering if they've had some sort of regression there.

[mddifilippo89]

I see exceptions in the console window in the storyboard site.

[mddifilippo89]

No, I am unable to select any items in the list, it's outright ignoring my clicking. I don't see this behavior with a standalone blazor or wc example
eg.
https://codesandbox.io/s/wild-leaf-t9nehd

[mddifilippo89]

I've isolated this in a standalone WC sample, so this is not a blazor specific issue
IgniteUI/igniteui-webcomponents#736

[Damyan Petev]

Seems to do with data being re-created in the template function, causing the combo to get a new data every time it's reevaluated. I've updated the WC issue, but for this one the solution should be pretty simple - move the data out of the function:

const companies = [
    { ID: 1, name: "Flashpoint"},
    { ID: 2, name: "Tazzy"},
    { ID: 3, name: "Digitube"},
    { ID: 4, name: "Realbuzz" },
    { ID: 5, name: "Thoughtbridge"},
    { ID: 6, name: "Twinte"},
    { ID: 7, name: "Eabox"},
    { ID: 8, name: "Rhycero"},
    { ID: 9,  name: "Pixope"},
    ];

igRegisterScript("WebGridComboCellTemplate", (ctx) => {
    var html = window.igTemplating.html;

    return html`<div>
    <igc-combo .data="${companies}" value-key="ID" display-key="name"
        @igcChange="${e => { ctx.cell.editValue = e.detail.newValue } }">
    </igc-combo>
</div>`;
}, false);

Also added an igcChange handler to propagate the value to the cell as well. Mind you newValue is string based and you might want to add single-select attr to the Combo in such scenario (if comma separated values are not the goal)

Updated sample:
data-combo-template.zip

[mddifilippo89]

BlazorJSInteropApp (2).zip

Here is sample linking a razor list to JS.