Questions on UI for ASP.NET Core Forum

1 answer

8 views

ComboBox Data Binding - Pre=select value

Hi,

I'm trying to understand the data binding for a combo box control.

Approach 1. - Using the bind-to attribute. I added "Selected=true" to one of item in the continents data source. This is okay the control pre-selects the item correctly.

Ref https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/combobox/getting-started#3-select-a-default-value

    @{
        var continents = new List<SelectListItem> {
            new SelectListItem() {Text = "Africa", Value = "1"},
            new SelectListItem() {Text = "Europe", Value = "2"},
            new SelectListItem() {Text = "Asia", Value = "3"},
            new SelectListItem() {Text = "North America", Value = "4", Selected=true},
            new SelectListItem() {Text = "South America", Value = "5"},
            new SelectListItem() {Text = "Antarctica", Value = "6"},
            new SelectListItem() {Text = "Australia", Value = "7"}
        };
    }

    <h4>ComboBox:</h4>
    <kendo-combobox name="combobox1"
                    datatextfield="Text"
                    datavaluefield="Value"
                    placeholder="Select a value"
                    bind-to="continents"
                    style="width: 250px;">
    </kendo-combobox>

Approach 2. - Ajax binding. I have the same datasource as Approach 1 to return in TestController.cs. I"m expecting "North America" should be pre-selected but it's not. Is this an expected behavior by design when using Ajax binding that "Selected=true" is not appliable? The reason why I'd like to use "Selected=true" with Ajax binding is because there are some logics in a controller action that set the default value for a combo box. I don't want to use the "value" attribute. I knew using the value attribute works for sure.

Ref https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/combobox/binding/ajax-binding

TestController.cs

    public IActionResult Getcontinents(string payload)
    {
        var continents = new List<SelectListItem> {
            new SelectListItem() {Text = "Africa", Value = "1"},
            new SelectListItem() {Text = "Europe", Value = "2"},
            new SelectListItem() {Text = "Asia", Value = "3"},
            new SelectListItem() {Text = "North America", Value = "4", Selected=true},
            new SelectListItem() {Text = "South America", Value = "5"},
            new SelectListItem() {Text = "Antarctica", Value = "6"},
            new SelectListItem() {Text = "Australia", Value = "7"}
        };

        return Json(continents);
    }

Index.cshtml

    <kendo-combobox name="combobox2"
                    datatextfield="Text"
                    datavaluefield="Value"
                    filter="FilterType.Contains">
        <datasource server-filtering="false">
            <transport>
                <read url="/Test/Getcontinents"/>
            </transport>
        </datasource>
    </kendo-combobox>

Any insights or thoughts?

Thanks,

Bob D

ComboBox

answered on 04 Jul 2025

2 answers

82 views

Where do the contents of the combobox on the Telerik demo ASP.NET Core Grid Custom Editing are coming from?

Hello,

I am trying to build a grid that has a combobox in it that should be filled from an Ajax request. But based on the demo on the page, I am not being able to determine where the combobox is filled.

I appreciate any help on the matter.

Regards,

Alexandre

ComboBox

Grid

answered on 08 Aug 2024

1 answer

112 views

ComboBox filtering in grid edit template not working

I've implemented a column editor for a ComboBox in a Grid. The dropdown functionality is working but the filtering functionality is not. So if I type in the first 3 characters of a value in the data, it's displaying all entries instead of filtering the entries. The filterLocations function never gets called so I'm assuming I don't have the snytax correct but I can't find an example of this anywhere. Plenty of examples of a column editor for a DropDown but none with a ComboBox. Appreciate any help in correcting my syntax or pointing me towards a working demo.

Grid Column

        <column field="LocationId" title="Location" template="#=locationTemplate(data)#" editor="locationEditor">
            <filterable extra="false" enabled="false">
                <cell show-operators="false"></cell>
            </filterable>
        </column>

JavaScript

function locationEditor(container, options) {
    $('<input required validationMessage="Please select a location." name="' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({
            autoBind: true,
            dataTextField: "Text",
            dataValueField: "Value",
            placeholder: "- Select or Enter -",
            filter: "contains",
            minLength: 3,
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "/ComboBox/LocationsRead",
                    data: "filterLocations"
                }
            }
        });
}

function filterLocations() {
    return {
        locationFilter: $("#Input_LocationId").data("kendoComboBox").input.val()
    };
}

ComboBox

Grid

answered on 28 May 2024

1 answer

95 views

Kendo Grid dropdown with fixed set of items

I am trying to create a grid with 4 columns: Field, Operator, Value and a Delete button

The Field column is selectable from a drop down when editing and this I have done using a Action call.

The second column, Operator has a fixed set of operators like '>', '<', '>='. I was hoping to create this list right inside this grid definition. So I chose the overload: columns.ForeignKey(memberName, SelectList) and I have created a SelectList in the second argument. But it does not work and the Operator column is not showing a drop down:

@(
Html.Kendo().Grid<formFilter>()
	.Name("gridFilter")
	.ToolBar(toolbar =>
	{
		toolbar.Create().Text("Add");
		toolbar.Save().Text("Save").CancelText("Cancel");
	})
	.Editable(editable => editable.Mode(GridEditMode.InCell))
	.Columns(columns =>
	{
	columns.ForeignKey(c => c.filterName, ds => ds.Read(r => r.Action("fieldNames", "View1", new { className = "View1" })), "filterName", "filterName").Title("Field").Width(200);
	columns.ForeignKey(c => c.filterEval, new SelectList(
		new List<SelectListItem>
			{
				new SelectListItem { Text = ">", Value = ">"},
				new SelectListItem { Text = "<", Value = "<"},
				new SelectListItem { Text = ">=", Value = ">="},
			}, "Value", "Text"))
		.Title("Operator").Width(200);
	columns.Bound(c => c.filterValue).Title("Value");
	columns.Command(c => c.Destroy()).Width(50);
	})
	.Pageable(pageable => pageable
	.Refresh(true)
	.PageSizes(true))
	.DataSource(dataSource => dataSource
		.Ajax()
		.PageSize(5)
		.Batch(true)
		.ServerOperation(false)
		.Events(events => events.Error("ErrorHandlerForFilterTable"))
		.Model(model =>
		{
			model.Id(p => new { p.filterId });
		})
		.Create("createFilter", "View1")
		.Read(read => read.Action("getFiltersTable", "View1", new { url = @Context.Request.Path }))                                                                                
		.Update("updateFilter", "View1")
		.Destroy(del => del.Action("deleteFilter", "View1"))                                        
	)
)

ComboBox

DropDownList

Grid

answered on 30 Apr 2024

1 answer

79 views

RadComboBox client events in 2015.2.826.45

This is probably just a request for a pointer to the documentation for older versions, which I couldn't find. But the problem that I'm trying to solve is:

I'm trying to update some older software that uses Telerik.Web.UI 2015.2.826.45. I'd like to add a client-side event handler that fires whenever the value of a RadComboBox is changed, whether by the user, or by server-side code. The current doco quite clearly states that I want to use add_selectedIndexChanged, with the eventArgs parameter which is passed to that event containing the new selected item. That function doesn't seem to exist in the version I'm using. I tried adding a handler via the OnClientSelectedIndexChanged attribute of the ASPX element, and it handles an event when the user makes a change, but not when the server does. And the arguments are in a completely different form. Any idea how I do something equivalent in the older version? Or where to find documentation that would apply to that version?

Thanks for any help

ComboBox

answered on 22 Mar 2024

0 answers

115 views

Cascading ComboBox for load form

The page has two cascades ComboBox .
With a blank page, everything works fine.
But when data is transferred to the page (for editing), then the second ComboBox does not display and is blocked.
It turns out after loading the data in the first ! does not fit into filterCategory.
How to fix this nuance?

@model ServiceViewModel
@using Kendo.Mvc.UI

.....
<div class="row">
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoriesServiceDrop")
                    .Value(Model.CategoriesService)
                    .AutoBind(true)
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор категории...")
                    .DataTextField("Category")
                    .DataValueField("IdCategory")
                    .Filter(FilterType.Contains)
                    .DataSource(source => source.Read(read => read.Action("CategoryServis_Read", "ServiceSubmit")))
                )
            </div>
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoryPodServicesDrop")
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор детальной категории...")
                    .DataTextField("CategoryPod")
                    .Value(Model.CategoryPodServices)
                   // .DataValueField("Id")
                    .Filter("contains")
                    .DataSource(source => source.Read(read => read.Action("CategoryPodServis_Read", "ServiceSubmit").Data("filterCategory")).ServerFiltering(true))
                    .AutoBind(false)
                    .Enable(false)
                    .CascadeFrom("CategoriesServiceDrop")
                )
            </div>
        </div>
.....

ComboBox

asked on 27 Jan 2023

0 answers

137 views

Combobox Server Filtering on select of item, the Text and Value is undefined

I want to get the value and create a link to redirect to based on the selected result.

But getting undefined.

ComboBox

asked on 21 Dec 2022

1 answer

912 views

DropDownlist - All options are undefined (Razor Pages)

So I just created a .NET 6 ASP.NET Core Web App (Razor Pages), added all telerik stuff according to the instructions (NuGet Packages, scripts and styles in _Layout.cshtml, @addTagHelper-s in _ViewImports.cshtml), and HTMLHelpers are rendering correctly. However, when I provide a data source to the DropDownList or ComboBox, all options show up as undefined.

Telerik version: 2022.2.621. Bootstrap: V5.

Here's the code for DropDownList:

Index.cshtml

@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
--------------------------------------------------------------------------------
 
 
<div class="text-center">
    <h1 class="display-4">Welcome</h1>


         @(Html.Kendo().DropDownList()
            .Name("MyDropdownn")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:300px;" })
            .AutoBind(false)
            .Filter(FilterType.Contains)      
            .DataSource(ds => ds
                .Custom()
                .Transport(transport => transport
                    .Read(r => r
                        .Url("/Index?handler=Sports")
                    ))
                    .ServerFiltering(false)
                )
            )

</div>

Index.cshtml.cs

        public JsonResult OnGetSports()
        {
            var allSports1 = db.Sports.Where(x => x.SportID > 0).Select(x => new DropDownModel
            {
                Text = x.Name,
                Value = x.SportID 
            }).ToList();

            return new JsonResult(allSports1);
        }

Proof that the data isn't empty/undefined

DropDownModel.cs (DropDownModel class)

    public class DropDownModel
    {
        public int Value { get; set; }
        public string Text { get; set; } = String.Empty;
    }

I've tried restarting everything, double-checking everything but nothing helped. Is there a bug with this version of telerik, is something incompatible with ,NET 6 or Bootstrap 5? Or am I doing something wrong?

ComboBox

DropDownList

answered on 29 Jun 2022

1 answer

217 views

Combobox dropdown height

Hi,

Is it possible to set the height of the combobox dropdown in JavaScript.

I can set it in the taghelper but I have the combobox beside another element on the page and I want to match the heights.

It seems to be that I should be able to set it in the open event for the combobox but I can't seem to get it to work.

Is there a property on the Combobox that I should change?

Changing the height on the data-role div seems to get overwritten.

Any suggestions?

Thanks,

Charlotte

ComboBox

answered on 21 Jun 2022

1 answer

904 views

How to filter a grid column from a ComboBox selected value

I have a combobox separate from my grid and I want to use the comboBox selected value to filter the grid results. Do I need to do this in Java script? What is the best way to do this?

   @(Html.Kendo().ComboBox()
                .Name("comboBox")
                .Size(ComponentSize.Small)
                .DataTextField("Text")
                .DataValueField("Value")
                .Filter(DateTime.Today.Year.ToString())
                .HtmlAttributes(new { style = "width:100%;" })
                .BindTo(new List<SelectListItem>()
                {
                    new SelectListItem() {
                        Text = "2018", Value = "2018"
                    },
                    new SelectListItem() {
                        Text = "2019", Value = "2019"
                    },
                    new SelectListItem() {
                        Text = "2020", Value = "2020"
                    },
                      new SelectListItem() {
                        Text = "2021", Value = "2021"
                    },
                      new SelectListItem() {
                        Text = "2022", Value = "2022"
                    },
                      new SelectListItem() {
                        Text = "2023", Value = "2023"
                    },
                      new SelectListItem() {
                        Text = "2024", Value = "2024"
                    }
                })
         )

@(Html.Kendo().Grid<Golf.DataAccess.Models.GoodGolfSchool>()
    .Name("grid")
    .Filterable()
    .Columns(columns => {
        columns.Bound(pkey => pkey.Id).Hidden(true);
        columns.Bound(c => c.FirstName).Filterable(false);
        columns.Bound(c => c.LastName);
        columns.Bound(c => c.Email);
        columns.Bound(c => c.VillageId).Width(100);
        columns.Bound(c => c.ClassDateView).ClientTemplate("#=ClassDateView#")
               .Filterable(f => f.Multi(true).CheckAll(false));
        columns.Bound(c => c.Phone);
        columns.Bound(c => c.EntryDate).Hidden();
        columns.Command(cmd =>
        {
            cmd.Edit();
            cmd.Destroy();
        });
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(true)
        .Read(read => read.Action("GolfSchoolRoster_Read", "GoodGolfSchools"))
        .Update(update => update.Action("Student_Edit", "GoodGolfSchools"))
        .Destroy(delete => delete.Action("Student_Distroy", "GoodGolfSchools"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
            model.Field(p => p.EntryDate).Editable(false);
            model.Field(p => p.ClassDateView).DefaultValue(
                ViewData["ScheduleDates"] as Golf.DataAccess.Models.ClassDateViewModel);
        })
        .Filter(filters => {
            filters.Add(model => model.ClassDate.Year).IsEqualTo([SELECTED VALUE FROM COMBOBOX ABOVE] );
        })
    )
    .ToolBar(tools =>
    {
        tools.Excel().Text("Export To Excel");
    })
    .Excel(excel =>
    {
        excel.FileName("GoodGolfSchool.xlsx");
        excel.AllPages(true);
       
    })
    .Pageable()
    .Sortable()
    .AutoBind(true)
    .Editable(edit => edit.Mode(GridEditMode.InLine))
)

ComboBox

Grid

updated answer on 06 Jun 2022