This is a migrated thread and some comments may be shown as answers.

Populate Jquery ComboBox from Controller

2 Answers 126 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Veteran
Joshua asked on 09 Oct 2020, 01:38 PM

How can I populate this combobox with items from the controller onPage Load? The following is not working

 

<input id="CodeList" placeholder="Select" style="width: 100%;" />

<script>
    $(document).ready(function () {
        $("#CodeList").kendoComboBox({
            index: 0,
            dataTextField: "text",
            dataValueField: "value",
            filter: "contains",
            dataSource: {

                 transport: {

                        read: {

                            dataType: "json",

                            url: '@Url.Action("CompanyIDChanged", "Login")',

                         }

               }

            }
        });
    });
</script>

 

Controller:

Function LoanCodeCombo() As ActionResult
            Dim CodeList= New LoginModel With {.Items = {
                New SelectListItem() With {.Text = ""},
                New SelectListItem() With {.Text = "A"},
                New SelectListItem() With {.Text = "B"},
                New SelectListItem() With {.Text = "C"},
                New SelectListItem() With {.Text = "S"},
                New SelectListItem() With {.Text = "T"},
                New SelectListItem() With {.Text = "U"},
                New SelectListItem() With {.Text = "7"},
                New SelectListItem() With {.Text = "8"},
                New SelectListItem() With {.Text = "9"},
                New SelectListItem() With {.Text = "0"}
                }
            }
            Return Json(CodeList, JsonRequestBehavior.AllowGet)
        End Function

2 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 13 Oct 2020, 10:33 AM

Hi Joshua,

The initialization of the Combobox seems correct, however, I see that the URL provided for the read action is different than the name of the action method returning the data. 

<input id="CodeList" placeholder="Select" style="width: 100%;" />

<script>
    $(document).ready(function () {
        $("#CodeList").kendoComboBox({
            index: 0,
            dataTextField: "text",
            dataValueField: "value",
            filter: "contains",
            dataSource: {

                 transport: {

                        read: {

                            dataType: "json",

                            url: '@Url.Action("CompanyIDChanged", "Login")',

                         }

               }

            }
        });
    });
</script>

 

Controller:

Function LoanCodeCombo() As ActionResult
            Dim CodeList= New LoginModel With {.Items = {
                New SelectListItem() With {.Text = ""},
                New SelectListItem() With {.Text = "A"},
                New SelectListItem() With {.Text = "B"},
                New SelectListItem() With {.Text = "C"},
                New SelectListItem() With {.Text = "S"},
                New SelectListItem() With {.Text = "T"},
                New SelectListItem() With {.Text = "U"},
                New SelectListItem() With {.Text = "7"},
                New SelectListItem() With {.Text = "8"},
                New SelectListItem() With {.Text = "9"},
                New SelectListItem() With {.Text = "0"}
                }
            }
            Return Json(CodeList, JsonRequestBehavior.AllowGet)
        End Function

Make sure that the Combobox DataSource actually makes a request to the correct endpoint to fetch the data.

I have also created a sample ASP.NET Core application, based on the provided details for you to review.

Let me know if the above helps resolve the issue.

Regards,
Aleksandar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Joshua
Top achievements
Rank 1
Veteran
answered on 14 Oct 2020, 06:44 AM

Thank you Aleksandar

 

it worked perfectly :)

Tags
ComboBox
Asked by
Joshua
Top achievements
Rank 1
Veteran
Answers by
Aleksandar
Telerik team
Joshua
Top achievements
Rank 1
Veteran
Share this question
or