Questions on UI for ASP.NET Core Forum

1 answer

498 views

Hi,

I have a question for you:
I would like to create a filter for one column of my Grid. The values of this column are integers, but the values are not visible for the users. They see only an icon depending on the value's range. (see the linked image)

For example:
If the value is 89, the user sees an icon and the tooltip for that is "Very good".

We have 4 ranges:
0-50 Bad,

51-70 OK,

71-85 Good,

86-100 Very good

How can I create a filter, where only the 4 text can be selected from a dropdown, but is filters for the range represented by the text?

Thanks in advance.

DropDownList

Filter

Grid

answered on 15 Sep 2022

1 answer

61 views

.Name inheritance

The model uses inheritance.How to make that when loading the data from the model is automatically substituted?

@(Html.Kendo().DropDownList()
                    .Name("LoginViewModels.Country.Obl")
                    .HtmlAttributes(new { style = "width:100%" })
                    .OptionLabel("Выберите область")
                    .DataTextField("Key")
                    .DataValueField("Key")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("LoadObl", "Account");
                        });
                    })
                )

DropDownList

answered on 24 Aug 2022

1 answer

55 views

.NET Core DropDownList SelectListItemBuilder's HtmlAttributes property GONE ??

HI

The SelectListItemBuilder's HtmlAttributes property of DropDownList was gone, WHY ???

namespace Kendo.Mvc.UI.Fluent
{
　public class SelectListItemBuilder : IHideObjectMembers
　{

Everyone needs HtmlAttributes property.

*Kendo.Mvc, Version=2021.3.1207.0。
(telerik.ui.for.aspnet.core\2021.3.1207\lib\net6.0\Kendo.Mvc.dll)

Best regards

Chris

DropDownList

answered on 16 Aug 2022

1 answer

64 views

DropDownButton Popup Position

Dear all,

i'm try to set the position of the DropDownButton Popup, but seams this option is not available?

In the Documentation it says "See Popup Documentation", where you have the Option "Position"

https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/DropDownButtonBuilder#popupsystemactionkendomvcuifluentdropdownbuttonpopupsettingsbuilder

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownbutton/configuration/popup

Thanks, best regards
Patrick

PS: DropDownButton is missing as Tags here ;)

Button

DropDownList

DropDownTree

answered on 10 Aug 2022

1 answer

71 views

Cascade DropDowns not working as a EditorTemplate

Hi!

I have the following setup:

CsHtml:

	<div class="row mt-3">
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
			      .Size(ComponentSize.Medium)
				  .Rounded(Rounded.Medium)
				  .FillMode(FillMode.Solid)
				  .OptionLabel("Select head category...")
				  .HtmlAttributes(new { style = "width: 100%" })
				  .DataTextField("Name")
				  .DataValueField("Id")
				  .DataSource(source =>
				  {
					  source.Read(read =>
					  {
						  read.Action("GetLookupCategoriesHead", "Api");
					  });
				  })
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
			      .Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select main category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesMain", "Api")
						    .Data("filterMainCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryHeadId")
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
				.Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select sub-category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesSub", "Api")
						    .Data("filterSubCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryMainId")
				)
		</div>
	</div>

Script:

@section Scripts {
	<script>
		function filterMainCategories() {
			return {
				headId: $("#CategoryHeadId").val()
			};
		}

		function filterSubCategories() {
			return {
				headId: $("#CategoryHeadId").val(),
				mainId: $("#CategoryMainId").val()
			};
		}
	</script>
}

Originally, this was a View on its own but later got refactored into an EditorTemplate. Since then, the second and third DropDowns are always disabled even if a parent makes a valid selection.

Console windows don't log any errors. I'm thinking it's an issue with the placement of the JS block. I tried placing it within a @Script section and directly. The thing that is really frustrating is that there are two views now using this EditorTemplate and one is working fine but the other has issues:

Create (Working):

	@using (Html.BeginForm("", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" formaction="CreateSave" title="@(Model.IsUpdateCase ? "Update letter" : "Save letter")">@(Model.IsUpdateCase ? "Update" : "Save")</button>
			</div>
			<div class="col-md-1">
				<button type="submit" class="btn btn-default w-100" formaction="CreateSubmit" title="@(Model.IsUpdateCase ? "Update letter & submit" : "Save letter & submit")">Submit</button>
			</div>
		</div>
	}

ViewInfo (Not working):

	@using (Html.BeginForm("ViewInfo", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m.Letter, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" title="Submit">Submit</button>
			</div>
		</div>
	}

I have verified that the APIs are up and running and also the model for the template(s) is valid.

How do troubleshoot this behavior? And where should the script block files go per best practice? I think it should be in the template within the section.

DropDownList

answered on 25 Jul 2022

1 answer

79 views

DropDownList Client Template for Grid not working in when Grid is placed in boostrap dialog modal

Hi There

I have a Grid that placed in a boostrap modal.

In this grid, there is an in cell edit column with a DropDownList as client template.

The DropDownList is not displayed, only the input box and the data is shown when enter edit mode of the cell.

No problem when placing the grid on the main body, outside the modal.

Can anyone help on how I can have the dropdownlist shown ? thanks in advance.

DropDownList

Grid

answered on 18 Jul 2022

0 answers

80 views

Second cascading dropdown id not picking up correct selected Id for the third one

Hi!

I have the following setup:

CsHtml:

	<div class="row mt-3">
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
			      .Size(ComponentSize.Medium)
				  .Rounded(Rounded.Medium)
				  .FillMode(FillMode.Solid)
				  .OptionLabel("Select head category...")
				  .HtmlAttributes(new { style = "width: 100%" })
				  .DataTextField("Name")
				  .DataValueField("Id")
				  .DataSource(source =>
				  {
					  source.Read(read =>
					  {
						  read.Action("GetLookupCategoriesHead", "Api");
					  });
				  })
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
			      .Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select main category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesMain", "Api")
						    .Data("filterMainCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryHeadId")
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
				.Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select sub-category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesSub", "Api")
						    .Data("filterSubCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryMainId")
				)
		</div>
	</div>

Script:

@section Scripts {
	<script>
		function filterMainCategories() {
			return {
				headId: $("#CategoryHeadId").val()
			};
		}

		function filterSubCategories() {
			return {
				headId: $("#CategoryHeadId").val(),
				mainId: $("#CategoryMainId").val()
			};
		}
	</script>
}

Controller:

    public async Task<JsonResult> GetLookupCategoriesHead()
    {
        var result = await serviceLookUps.GetAllCategoriesHeadAsync();
        return new JsonResult(result);
    }

    public async Task<JsonResult> GetLookupCategoriesMain(int headId)
    {
        var result = await serviceLookUps.GetAllCategoriesMainAsync(headId);
        return new JsonResult(result);
    }

    public async Task<JsonResult> GetLookupCategoriesSub(int headId, int mainId)
    {
        var result = await serviceLookUps.GetAllCategoriesSubAsync(headId, mainId);
        return new JsonResult(result);
    }

Model:

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategoryHeadModel
{
    public int    Id     { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategoryMainModel
{
    public int    Id     { get; set; }
    public int    HeadId { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategorySubModel
{
    public int    Id     { get; set; }
    public int    HeadId { get; set; }
    public int    MainId { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

Issue:

I have tested the API methods separately through tests and ensured they are returning values. The only issue is, when I make a selection in the second dropdown, on the API, the second parameter is received as 0 instead of a correct selected value. This doesn't cause any console errors so the UI continues to work. I can cascade from dropdown one to dropdown two but dropdown two sends a 0 for mainId from its filtering operation in filterSubCategories()

DropDownList

asked on 04 Jul 2022

1 answer

560 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

52 views

Client filtering not searching templated text

Hi,

I have a dropdown list (ASP.NET Core v2021.2.511) that I have enabled filtering on using a contains filter. The list is bound but contains only a small number of rows, therefore Server filtering seemed to be overkill.

What is happening is this:

GLCode: H120

Description: Tuition Direct - Running Expenses

Templated text: Tuition Direct - Running Expenses (H120)

Search Text Examples:

H120 - no results found
tuit - item found

From this is appears that with client filtering that only the text in the DataTextField and not the result of the templated value is searched.

Is this by design or is it a bug ?

Shared View Code:

@model GeneralLedgerAccounts

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("GLCode")
            .DataTextField("Description")
            .OptionLabel("Choose a GL Code ...")
            .Filter(FilterType.Contains)
            .BindTo((System.Collections.IEnumerable)ViewData["BudgetGLCodes"])
            .Template("#: data.Description # (#: data.GLCode #)")
)

Many Thanks

Chris

DropDownList

answered on 22 Jun 2022

1 answer

155 views

Dropdown in grid popup editor needs to be filtered by parent id

We have a grid of data items that we are editing with a custom popup editor. In the popup is a dropdown list to a foreign key field. When we're editing we need the dropdown list to contain all items so that the existing values show correctly but when we're adding a new record the dropdown list must only show the items in the dropdown where the parent entity does not already have a record associated with that related entity.

So, an example scenario is we have a list of companies and a list of products and some companies have discounts for certain products - a separate company discount table. We navigate to a view with a grid of discounts for a chosen company. In the list of company discounts there is a foreign key to the product. When an edit of one of these discount records is performed the popup opens and the dropdown is populated with all products and the dropdown is made readonly. When a new "discount" record is added, the popup opens and it needs to filter the dropdown items to just those products where the company doesn't already have a discount. We have all the controller code deriving the correct data but we have an issue. When the popup opens for an edit the dropdown data source "read" action executes but at that point in time the id of the parent object hasn't been initialised so it always looks like we are adding a new record - the id is showing as 0. We've added an additional call to the datasource.read on document.ready effectively forcing it to derive the data twice and that then populates the dropdown successfully but it no longer seems to be bound to the field as the current value is not selected. Additionally, when we open the popup for a new record we need to pass in the company id which we know from the grid view but can't seem to get to populate the model object that the popup is bound to. I've searched the web and forums and so far not managed to find a matching scenario. Do you have some advice on how to resolve these issues?

Thanks in advance

DropDownList

Grid