Questions on Kendo UI for jQuery Forum

2 questions

2 answers

283 views

Hello,
I use Kendo UI Angular,
I have a kendomulticombobox in a form, I use this combobox in several forms, and to avoid copying and pasting, I thought of setting up a separate component for that, and just call it each time I need.
It's to say that the form has a formgroup, and that this formgroup has several formcontrols, that I get when I submit the form.
So when I integrate my custom component, I get an error `ERROR Error: No value accessor for form control with name:` and yet it's the same formcontrol that I use before.

Has anyone experienced this kind of problem? Or do you have any solutions please? Thanks

Form

MultiColumnComboBox

updated answer on 15 May 2023

1 answer

516 views

Can't figure out how to refresh Kendo Form control (MultiColumnComboBox)

Hi, I'm using the kendo form to build an 'order form'.

The form has pre-existing Vendors to select which cascades to a list of pre-existing Sites (Customers).
However, I also need to be able to add sites - which I have done via a POST method.

The issue that I am facing is that after I have done this, I can't figure out how to refresh the 'SiteCode' MultiColumnComboBox - nothing I have tried is able to get the control to populate with the new data, even though i am able to see the new data in the local array that it's being stored in.

I have tried multiple methods of implementing the transportation layer

Using 'read()' on varying objects (can't figure out which one is correct for a form object) to no effect
Setting the SiteCode dataSource to a secondary "filtered" list which is filled by the VendorCode select event
Using 'serverfiltering' and a standard kendo remote dataSource but unfortunately I don't believe the API I am working with is compatible with the server filtering options (I can only filter by adding a parameter to the url e.g. '&fltFilterName=FilterValue')

Below are the two main objects I am concerned with:

{
    field: "VendorName", editor: "MultiColumnComboBox", label: "Partner/Vendor Name:", validation: { required: true },
    delay: 0,
    editorOptions: {
        placeholder: "Select vendor",
        dataTextField: "VendorName",
        dataValueField: "VendorCode",
        height: 300,
        columns: [
            { field: "VendorName", title: "Vendor Name:", width: 300 },
            { field: "VendorCode", title: "Vendor Code:", width: 150 },
            { field: "TerritoryCode", title: "Territory Code:", width: 150 },
            { field: "TerritoryName", title: "Territory Name:", width: 300 },
        ],
        filter: "contains",
        dataSource: slData.partners,
    },
},
{
    field: "SiteName",
    label: "Site Name:",
    delay: 0,
    validation: { required: true },
    editor: "MultiColumnComboBox",
    editorOptions: {
        autoBind: false,
        placeholder: "New site name",
        dataTextField: "SiteName",
        dataValueField: "SiteName",
        cascadeFrom: "VendorName",
        height: 400,
        columns: [
            { field: "VendorCode", title: "Vendor Code:", width: 200},
            { field: "SiteCode", title: "Site Code:", width: 200 },
            { field: "SiteName", title: "Site Name:", width: 300 },
            { field: "warning", width: 200,
                template: '<span style="padding: 8px 9px !important;" class="badge-general badge-#:data.Status#">#:data.DaysRemaining# Days Remaining</span>',
                headerTemplate: ' '
            }
        ],
        filter: "contains",
        dataSource: slData.sites,
        select: selectSiteName,
        noDataTemplate: $("#noDataTemplate").html(),
        },
        dataBound: function() {
            initSiteStatusBadges()
        }
    }
},

The attempt at using the native datasource went something like this:

dataSource: {
    transport: {
        read: createDataURL("Order", "CustomerVendorSite", `&fltVendorCode=${getFormVendorCode()}` ) , 
        dataType: "json",
        cache: false,
    },
    filter: { field: "SiteCode", operator: "eq", value: e.data.SiteCode }
},

In addition, I'm not sure what I'm doing wrong but the "autoBind: false" property doesn't seem to be doing anything.

I hope you can help - I've been stuck on this for hours and I'm at wits end!

Thanks,
Ryan

Data Source

Form

MultiColumnComboBox