Can you preload deafult option into a telerik dropdownlist?

[Charlston]

I am trying to preload deafult value that will always exist in this downdownlist no matter when. Then load in another list from the data base behind it base on other factors. See test code below.

 

 

@(Html.Kendo().DropDownList()
                    .Name("groupTypeFilter")
                    .HtmlAttributes(new { @class = "form-select", data_alpa = "filter", onchange = "ApplyFilter(this)" })
                    .OptionLabel("All")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<SelectListItem>
                    {
                        new SelectListItem { Text = "All", Value = "all" },
                        new SelectListItem { Text = "All GMS Groups", Value = "allgms" },
                        new SelectListItem { Text = "All MECCOM Groups", Value = "allmeccom" }
                    })  
                    .DataSource(config => config.Read("GetGroupTypes", "Group"))
                    )
 

 
public JsonResult GetGroupTypes()
        {
            var groupTypes = new List<SelectListItem>
            {
                new SelectListItem { Text = "All", Value = "ALL" },
                new SelectListItem { Text = "GMS", Value = "GMS" },
                new SelectListItem { Text = "MEC/COM", Value = "MEC/COM" }
            };
            return Json(groupTypes);
        }
 
It seems to be only load the data from the data call and not the deafult data that I loaded into it 

[Eyup]

Hi Charlston,

 

Thank you for reaching out.

To ensure that your default options (such as "All", "All GMS Groups", "All MECCOM Groups") always appear in the DropDownList, even after loading items from the database, you need to combine both the static defaults and the dynamic database items in a single data source. The DropDownList will use the data returned from the .DataSource() configuration, which replaces the items provided in .BindTo() once the remote data is loaded.

Solution: Combine Default and Dynamic Items in Controller

Update your controller action to include both the default options and the database items:

public JsonResult GetGroupTypes()
{
    var groupTypes = new List<SelectListItem>
    {
        new SelectListItem { Text = "All", Value = "all" },
        new SelectListItem { Text = "All GMS Groups", Value = "allgms" },
        new SelectListItem { Text = "All MECCOM Groups", Value = "allmeccom" }
    };

    // Add items loaded from the database
    var dbItems = objConnection.usp_IDQ_GetLicenseDistricts(User.Identity.Name, true)
        .Select(x => new SelectListItem { Text = x.District_Id, Value = x.Location_ID.ToString() })
        .ToList();

    groupTypes.AddRange(dbItems);

    return Json(groupTypes, JsonRequestBehavior.AllowGet);
}

Configure the DropDownList to Use Only DataSource

Remove .BindTo() and use only .DataSource() so the control always gets its items from your controller:

@(Html.Kendo().DropDownList()
    .Name("groupTypeFilter")
    .HtmlAttributes(new { @class = "form-select", data_alpa = "filter", onchange = "ApplyFilter(this)" })
    .DataTextField("Text")
    .DataValueField("Value")
    .DataSource(config => config.Read("GetGroupTypes", "Group"))
    .OptionLabel("Select ...")
)

Key Points:

• The items from .BindTo() are replaced by the remote data from .DataSource() after the initial load.
• By including your default options in the JSON returned by the controller, these will always be present in the DropDownList, along with the database items.
• Use only .DataSource() for dynamic data loading.

This approach guarantees your default values always exist in the dropdown, regardless of how the database data changes.

Let me know what you think.

 

Regards,
Eyup
Progress Telerik

[Charlston]

Thank you. You answered my question that I need to include in the DataSource instead of separating the two data objects