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

1 Answer 483 Views
Data Source Form MultiColumnComboBox
Ryan
Top achievements
Rank 1
Ryan asked on 28 Oct 2021, 02:26 PM

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

1 Answer, 1 is accepted

Sort by
1
Accepted
Neli
Telerik team
answered on 02 Nov 2021, 11:46 AM

Hi Ryan,

I would suggest you try using the refresh method after the new data is retrieved.

- https://docs.telerik.com/kendo-ui/api/javascript/ui/multicolumncombobox/methods/refresh

Another possible approach is to use the setDataSource method. 

https://docs.telerik.com/kendo-ui/api/javascript/ui/multicolumncombobox/methods/setdatasource

In the Dojo example linked here, the dataSource of the MultiColumnComboBox is changed on a button click.

I hope this helps.

Regards,
Neli
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Ryan
Top achievements
Rank 1
commented on 12 Nov 2021, 02:27 AM

Thanks for that Neli - appreciate it.
Tags
Data Source Form MultiColumnComboBox
Asked by
Ryan
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or