Questions on UI for ASP.NET Core Forum

0 answers

4 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 field 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

updated question on 25 Apr 2024

1 answer

15 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

1 answer

26 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 11 Jan 2024

0 answers

65 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

72 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

546 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

142 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

647 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

1 answer

100 views

ComboBox Strict Selection

I don't want the user to be able to type in the Text part of the combo box. They are required to select from the options provided. How do I prevent typing?

ComboBox

answered on 18 Feb 2022

1 answer

88 views

ComboBox Cascade with Binding

Your ComboBox Cascade examples use the Html.Kendo().ComboBox() approach. However, for simple binding I typically use Html.Kendo().ComboBoxFor() for data binding.

Two approaches to solving my issue:

How do I cascade with Html.Kendo().ComboBoxFor()?
How do I bind with Html.Kendo().ComboBox()?

This gives me the cascading behavior I'm after but no binding on CountryCode:

            <div class="form-group">
                <label asp-for="Item.CountryCode" class="col-form-label"></label><br />
                <span asp-validation-for="Item.CountryCode" class="text-danger"></span>
                @(Html.Kendo().ComboBox()
                    .Name("countries")
                    .Placeholder("Select Country...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetCountries", "Persons");
                        });
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>
            <div class="form-group">
                <label asp-for="Item.TimeZoneName" class="col-form-label"></label><br />
                <span asp-validation-for="Item.TimeZoneName" class="text-danger"></span>
                @(Html.Kendo().ComboBoxFor(x => x.Item.TimeZoneName)
                    .Placeholder("Select Time Zone...")
                    .DataTextField("DisplayName")
                    .DataValueField("Name")
                    .Filter(FilterType.Contains)
                    .CascadeFrom("countries")
                    .Enable(false)
                    .AutoBind(false)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTimeZones", "Persons")
                                .Data("filterTimeZones");
                        }).ServerFiltering(true);
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>

    function filterTimeZones() {
        var countryCode = $("#countries").val();
        //alert(countryCode);
        return { countryCode: countryCode }
    }