[ANGULAR] - Unable to load filterable, filterField, type : 'combo' with items and value property returned from an API

[kneville]

Hi team,

When i provide static array items and value, multi select dropdown works as expected and the records filter correctly based on the items selected in the combo.
Populating the items dynamically does not work and i see a textbox filter beside the column name instead of a combo when page is loaded. I would like to load the items and value in the columns filter bar multi select combo with data returned from an API.
Attached is the code snippet and screenshots. My requirement is to load the second column items and values from api response similar to first column in screenshot.

Thanks

[Animal]

You are configuring in the filterField as a function. Not a config object for a ComboBox.

[kneville]

Hi Team,

I configured filterField as a config object an it works, but on initial load i don't see all the combo items prechecked. I added the value property and the items property an array of items returned from the renderer function. My requirement is all combo items must be checked by default on page load and user can check uncheck to filter out the records in the grid. If possible add "Select All" as the first item and user can Select All/De Select All/multiselect. Please provide an example.
If the record item is returned as null or empty is there a way i can add an alias name "Unassigned" instead of showing the first item as null and when i select "Unassigned" it should filter the records which are null.

Thank you.

1.png (7.25 KiB) Viewed 808 times

3.png (6.1 KiB) Viewed 808 times

[Animal]

You have to ask for them to be selected: https://bryntum.com/products/scheduler/docs/api/Core/widget/List#config-selected

[Animal]

You can make any list item look the way you want using this: https://bryntum.com/products/scheduler/docs/api/Core/widget/List#config-itemTpl

Combo accepts this config which it passes into its dropdown List as that prop: https://bryntum.com/products/scheduler/docs/api/Core/widget/Combo#config-listItemTpl

[kneville]

When i select any item from the combo items list the grid scrolls and the combo items container is moved to a different position on each item selected. I would like to have the combo list container always connected to the column it's related to and move along with the position of the column. Thanks

Unexpected

1.jpg (26.35 KiB) Viewed 650 times

Expected

2.png (13.65 KiB) Viewed 650 times

[tasnim]

Hi,

Could you please share the code you used to reproduce the issue so we can debug it?

[kneville]

Please find the grid and columns filter field combo box configurations i am using. Thanks

export const gridConfig = {
    store: {
        autoLoad: false,
        autoReload: false,
        // preserveScrollOnReload: true,
        // syncDataOnLoad: false,
        // applyChangesetFilterSortTarget: 'changes',
        modelClass: SchedulerEventModel,
        durationUnit: "hour",
    },
    rowHeight: 35,
    stripeFeature: true,
    sortFeature: "workAssignmentStatus",
    cls: "b-external-grid",
    flex: "0 0 300px",
    emptyText: "Currently there are No Work Order Assignments available",
    columnFlex: true,
    // showRemoveRowInContextMenu: false,
    features: {
        filter: { and: true },
        filterBars: true,
        cellMenu: false,
        headerMenu: {
            items: {
                multiSort: false,
                groupAsc: false,
                groupDesc: false,
            },
        },
        rowCssClasses: true, // Enable the rowCssClasses feature
        selection: true,
        selectedRecords: true,
        matchhighlight: true,
        search: {
            emptyText: "No records found",
        },
        sort: {
            multiColumnSort: true,
        },
    },
    columns: [
        {
            text: "Coulmn1",
            filterable: false,
            autoWidth: true,
            align: "left",
            editor: false,
            field: "Coulmn1",
            renderer: (data: any): string => `${data.record.Coulmn1}`,
        },
        {
            text: "Coulmn2",
            filterable: false,
            align: "left",
            editor: false,
            autoWidth: true,
            field: "Coulmn2",
            renderer: (data): string => `${data.record.Coulmn2}`,
        },
        {
            text: "Coulmn3",
            filterable: false,
            align: "center",
            editor: false,
            field: "Coulmn3",
            autoWidth: true,
            width: 130,
            minWidth: 100,
            renderer({ cellElement, record }: any) {
                cellElement.style.color = "blue"; 
                return record.Coulmn3;
            },
        },
        {
            type: "column",
            text: "WAStatus",
            field: "workAssignmentStatus",
            align: "center",
            width: 100,
            minWidth: 70,
            autowidth: false,
            renderer({ cellElement, record }: any) {
                cellElement.style.color = "blue";
                return record.workAssignmentStatus;
            },
            filterable: {
                filterField: {
                    type: "combo",
                    value: ["U", "A", "WIP"],
                    items: statuses,
                    multiSelect: true,
                    editable: false,
                },
            },
        },
        {
            text: "EqpStatus",
            align: "center",
            editor: false,
            autoWidth: true,
            field: "equipmentStatus",
            width:100,
            minWidth:80,
            renderer({ cellElement, record }: any): string {
                cellElement.style.color = "blue";
                const equipmentStatus = record.equipmentStatus;
                if (equipmentStatus !== null || equipmentStatus.trim() !== "" && !uniqueEquipmentStatusValues.includes(equipmentStatus)) {
                    uniqueEquipmentStatusValues.push(equipmentStatus);
                }           

                return equipmentStatus;
            },
            filterable: {
                filterField: {
                    displayField: 'equipmentStatus',
                    valueField: 'equipmentStatus',
                    type: "combo",
                    multiSelect: true,
                    editable: false,
                    htmlEncode: false,
                    items: Array.from(new Set(uniqueEquipmentStatusValues)),
                    listItemTpl: item => `<div font-weight: bolder; font-size: 10px'>${item.id !== null && item.id.trim() !== '' ? item.id : 'UNASSIGNED'}</div>`,
                },
            },      

        },
        {
            text: "Coulmn4",
            filterable: false,
            align: "left",
            fitMode: "value",
            editor: false,
            autoWidth: true,
            field: "Coulmn4",
            renderer: (data: any): string =>
                `${data.record.Coulmn4}`,
        },
        {
            text: "technicianId",
            align: "center",
            editor: false,
            autoWidth: true,
            field: "technicianId",
            width: 180,
            minWidth: 120,
            floating: false,
            enableSticky:false,
            resizable: false, 
            movable: false,
            renderer({ cellElement, record }: any): string {
                cellElement.style.color = "blue";
                const technicianId = record.technicianId;
                if (technicianId !== null || technicianId.trim() !== "" && !uniqueTechnicianIdValues.includes(technicianId)) {
                    uniqueTechnicianIdValues.push(technicianId);
                }
                return technicianId;
            },
            filterable: {
                filterField: {
                    displayField: 'technicianId',
                    valueField: 'technicianId',
                    type: "combo",
                    multiSelect: true,
                    editable: false,
                    htmlEncode: false,
                    htmlEncodeHeaderText:false,
                    width: 100,
                    minWidth: 85,
                    keyStrokeFilterDelay: 10,
                    scrollIntoView: false,
                    //pickerAlignTarget: 'target',
                    items: Array.from(new Set(uniqueTechnicianIdValues)),
                    listItemTpl: item => `<div style="font-weight: bolder; font-size: 10px">${item.id !== null && item.id.trim() !== '' ? item.id : 'UNASSIGNED'}</div>`,
                    onchange({ event, combo }) {
                        event.preventDefault();
                },
            },
            },
        },
        {
            text: "partsCode",
            align: "center",
            editor: false,
            autoWidth: true,
            field: "partsCode",
            width:180,
            minWidth:120,
            floating:true,
            renderer({ cellElement, record }: any): string {
                cellElement.style.color = "blue";
                const partsCode = record.partsCode;
                if (partsCode !== null || partsCode.trim() !== "" && !uniquePartsCodeValues.includes(partsCode)) {
                    uniquePartsCodeValues.push(partsCode);
                }
                return partsCode;
            },
            filterable: {
                filterField: {
                    displayField: 'partsCode',
                    valueField: 'partsCode',
                    type: "combo",
                    multiSelect: true,
                    editable: false,
                    htmlEncode: false,
                    width:100,
                    minWidth:85,
                    items: Array.from(new Set(uniquePartsCodeValues)),
                    listItemTpl: item => `<div font-weight: bolder; font-size: 10px'>${item.id !== null && item.id.trim() !== '' ? item.id : 'UNASSIGNED'}</div>`,
                },
            },      

        },
    ],
};

[ghulam.ghous]

Hi,

Thanks for sharing this but it is not runnable. Please upload a zip project so we can run it and debug it and help you with a solution.

Regards,
Ghous

[kneville]

Hi Ghous,

Please find attached angular zip project. Columns TecnicianId and PartsCode are the filterable columns i am having issues with their positioning when combo items are selected and unselected.

Thanks