Load default value to server filtering combobox

1 Answer 359 Views
ComboBox
Dave Wolf
Top achievements
Rank 1
Iron
Dave Wolf asked on 23 Jun 2022, 09:39 PM | edited on 23 Jun 2022, 09:41 PM

I'm using the Kendo combobox on a edit form.  I'm loading initial values into the comboboxes on page load by using the "value" and "text" properties.  I have autobind set to false.  If I click the "clear" button it doesn't actually clear out the text value until the second time I click it.  It looks like the first time I click clear it loads the actual data items and then selects the value I have it set to.  The second time I click clear it actually works.  What is the proper way to configure this to load values from the server and preload a specific item when the control initializes?

 


 @(Html.Kendo().ComboBox()
                            .Name("combo" + item.DataField.ID)
                            .Filter("contains")
                            .DataTextField("DataTextField")
                            .DataValueField("DataTextValue")
                            .Placeholder("Select an item...")
                            .AutoBind(false)
                            .ClearButton(true)
                            .DataSource(source =>
                            {
                                
                                source.Custom()
                                    .ServerFiltering(true)
                                    .ServerPaging(true)
                                    .PageSize(40)
                                    
                                    .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                    .Transport(transport =>
                                    {

                                        transport.Read(r =>
                                        {

                                            
                                            r.Action("Virtualization_ReadComboEdit3", "Search", new { dataFieldId = item.DataField.ID }).Type(HttpVerbs.Post).Data("getFormData");



                                        });
                                        

                                    })
                                    
                                    .Schema(schema =>
                                    {
                                        schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                              .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                    });
                            })
                        .HtmlAttributes(new { style = "width:100%;", data_parent_id = (item.DataField.ParentDataFieldID!=null ? item.DataField.ParentDataFieldID.ToString() : ""), data_conditional = item.DataField.IsConditionListener })
                        .FooterTemplate("<b>#: instance.dataSource.total() # items found<b/>")
                        .Events(e =>
                        {
                            e.Select("onSelectCombo");
                            e.Open("onOpenCombo");
                            e.Change("onChangeCombo");



                        })
                        .Virtual(v =>
                        {
                            v.MapValueTo("dataItem");
                            v.ItemHeight(26);
                            v.ValueMapper(e => "function(options) { dropdownMapper(options," + item.DataField.ID + "); }");
                        })
                        .Value(item.DataField.CurrentFieldValueSingle.ToString())
                        .Text(item.DataField.CurrentFieldText)
                            )

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 28 Jun 2022, 10:46 AM

Hi Dave,

Thank you for the code snippet and details provided.

In order to achieve the desired behavior, I would recommend removing the "AutoBind(false)" functionality. The AutoBind configuration is standing for automatically populating the possible options for the Telerik UI ComboBox. If you like to preselect a default value, these options should be available by default.

Attached is a sample project that I prepared for the case. It represents the implementation needed and the result is the expected one.

Feel free to make the needed tests locally with the project attached and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dave Wolf
Top achievements
Rank 1
Iron
commented on 11 Jul 2022, 03:48 PM

Anton,

I tried removing the autobind property. The problem is that I'm loading all the data virtually and when I do that the page loads and then a few seconds later the data is displayed after the server call.  How can I include the record info on page load so there is no refresh delay?  Some of my forms have like 10 data fields and it will take like 5-10 seconds for all of them to do a call to the server to pull data that I can supply on page load.  It looks terrible.

I'm wondering if there is a hybrid approach where on page load I can supply the data I need it to bind to for the selected record and after that it will load the records virtually since there are thousands of records.

Eyup
Telerik team
commented on 14 Jul 2022, 09:38 AM

Something similar is happening in this custom implementation:
https://dojo.telerik.com/IKilugiQ/3

The idea is to use a separate DataSource instance and attach it a transport read event. In its handler, you can use local pre-loaded data and for any consequent request you can query the server.

Would that work for your case?

Tags
ComboBox
Asked by
Dave Wolf
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or