Telerik Forums
UI for ASP.NET Core Forum
0 answers
34 views

I have a multiselect whose items cascade from the the selected value of a drop down list.

When the page is loaded, the drop down list selection defaults to the first item in the list, which results in two items in the multiselect and the multiselect popup height shows the two items.

If a different drop down list option is selected, there are 15 items in the multiselect but the popup height still shows two items at a time. The scroll buttons work, but I would like to increase the height so that more options are visible. I have tried setting the height of the multiselect, but it has no effect.

Is there a way to resize the popup height when the items in the multiselect changes or to specify a minimum height of say 4 lines?

Thank you

Tim
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 15 Nov 2023
1 answer
142 views

I want to use this demo:  https://demos.telerik.com/aspnet-core/multiselect and have a checkbox on left side of the list.
Upon selecting the tag I want to see the count of items selected instead of showing them as chips with names as selected.

I want to use this demo : https://demos.telerik.com/kendo-ui/dropdownlist/index and have a checkbox and show count for no of tags selected as in this demo: Kendo UI Snippet | Kendo UI Dojo (telerik.com).

I see a jquery approach but I want to implement a html tag helper approach in both cases for asp net core
I have attached a image that I have as UI

 
Peter
Telerik team
 answered on 13 Oct 2023
1 answer
94 views

Hello,

How do I disable popup if no DropDownList/Multiselect contains no data or filtering does not find any items using html helpers:

    @(
        Html.Kendo().DropDownList()
                  .Name("Testi")
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(Source)
     )

If I instantate controls using jQuery I would get this done setting noDataTemplate to false:
$("#Testi").kendoDropDownList({ noDataTemplate: false, ..

On html helpers there is no option to set NoDataTemplate boolean value and setting string value empty or null does not work.

Mikko

Aleksandar
Telerik team
 answered on 21 Mar 2023
1 answer
125 views

After converting my project from .NET 4.7.2 to .NET 6.0 I am facing below JS error for Kendo UI multiselect

readyException.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at init._editable (kendo.multiselect.js:537:40)
    at init.readonly (kendo.list.js:201:18)
    at new init (kendo.ts:796:30)
    at HTMLSelectElement.eval (kendo.core.js:3469:32)
    at Function.each (core.js:260:19)
    at jQuery.fn.init.each (core.js:82:17)
    at $.fn.<computed> [as kendoMultiSelect] (kendo.core.js:3468:26)
    at HTMLDocument.<anonymous> (List:668:63)
    at mightThrow (deferred.js:124:29)
    at process (deferred.js:192:12)

Aleksandar
Telerik team
 answered on 20 Feb 2023
1 answer
65 views

Hello,

I have following MultiSelectFor:


    @(Html.Kendo().MultiSelectFor(x => x.TitleAttachmentForm.AuthorsList)
                                                    .AutoBind(true)
                                                    .DataTextField("SearchValue")
                                                    .DownArrow()
                                                    .DataValueField("Id")
                                                    .DataSource(ds => ds
                                                    .Custom()
                                                    .Transport(transport => transport
                                                    .Read(r => r
                                                    .Url("?handler=AuthorPublisherRead").Data("authorDataFunction")
                                                    ))
                                                    .ServerFiltering(true)
                                                    )
                                                    .Filter(FilterType.StartsWith)
                                                    .Height(400)
                                                    .ItemTemplate("<span class=\"k-state-default \"><strong>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</strong><p>#: data.SubDisplayValue #</p></span>")
                                                    .TagTemplate("<span>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</span>")
                                                    )


 

The MultiSelectFor is binded to following remote api:

  public async Task<JsonResult> OnGetAuthorPublisherRead([CanBeNull] string filterValue, [CanBeNull] string bindedvalue)

    {
      //Deleted
    }

This is used to filter for items on the remote site and get the binded value.

In my DropDownListFor I can use authorDataFunction to receive the value and the text of my DropDown:


   function authorDataFunction() {
            
            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: $("#mydropdown").getKendoDropDownList().filterInput.val(),
                bindedvalue: $("#mydropdown").getKendoDropDownList().value()

            };
        }

I played around with the api, however, I am not able to receive the input text and value(s):


    function authorDataFunction() {
            var multiselect = $("#TitleAttachmentForm_AuthorsList").data("kendoMultiSelect");
          

            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: multiselect.filterInput.val(),
                bindedvalue:multiselect.value()
            };
        }

Its telling me, that filterInput is undefined. also multiselect.text() does not work.

How can I access the binded value and the input in the .net core component?

Aleksandar
Telerik team
 answered on 30 Nov 2022
1 answer
78 views
Please can you advice if there is a way to enable 
  1. Components/
  2. MultiSelect/ to be clickable.

 

Thanks,

 

Mihaela
Telerik team
 answered on 31 Oct 2022
1 answer
204 views

Hello,

I have followed various examples and my very minimal knowledge of Kendo to attempt to filter a large dataset on the server side Razor Pages Page. 

I have used this: https://docs.telerik.com/aspnet-core/html-helpers/editors/multiselect/binding/razor-page

However, I cannot get the filtered data to return correctly without type arguments being thrown by the method.

Things I have checked

  1. Pascal Case is being returned despite getting a Splice error.
  2. An empty array is being returned on from the server as a default

Code

1. MultiSelect Component

@model Guid

@(Html.Kendo().MultiSelectFor(x => x)
    .DataTextField("OrderNumber")
    .DataValueField("Id")
    .Placeholder("Start typing order numbers...")
    .Filter(FilterType.Contains)
    .DataSource(dataSource =>
    {
        dataSource.Ajax();
        dataSource.Read(r => r.Url("/XXXX/XXXX/Index?handler=OrderMultiSelectRead")
            .Data("forgeryToken")
            .Type(HttpVerbs.Post))
            .ServerFiltering(true);
    }
    ).HtmlAttributes(new {style ="width: 100%" }))

2. Server Side Code

public async Task<IActionResult> OnPostOrderMultiSelectRead([DataSourceRequest] DataSourceRequest request, string text)
        {
            var result = new List<Order>();
            try
            {

                var filters = request?.Filters?.Cast<FilterDescriptor>().ToList();

                var firstFilter = filters.FirstOrDefault();

                if (firstFilter == null) return new JsonResult(await result.ToDataSourceResultAsync(request));
                
                firstFilter.MemberType = typeof(int?);

                var firstFilterValue = firstFilter.Value.ToString();

                if (string.IsNullOrEmpty(firstFilterValue) || firstFilterValue.Length < 5)
                    return new JsonResult(await result.ToDataSourceResultAsync(request));

                var orderNumberParsedAsInt = int.Parse(firstFilterValue);

                var matchingOrders =
                    (await this.orderRepository.GetModelsAsync(x => x.OrderNumber == orderNumberParsedAsInt))
                    .OrderByDescending(x => x.OrderNumber).ToList();

                return new JsonResult(await matchingOrders.ToDataSourceResultAsync(request));
            }
            catch(Exception exception)
            {
                var resultPayload = await result.ToDataSourceResultAsync(request);

                resultPayload.Errors = new List<Exception> { exception };

                return new JsonResult(resultPayload);
            }
        }
Really struggling with this!
Momchil
Telerik team
 answered on 24 Aug 2022
0 answers
125 views

Using the Multiselect works great but the delete icon for the items overlay the text. In trouble shooting this, if I remove the "k-multiselect" class from the div wrapping the the Multiselect, it looks fine. I don't think I am missing a stylesheet but is the a way to exclude/remove this class by a configuration or am I doing something wrong? 

I have attached a screenshot of the displayed Multiselect and the html wrapping the Multiselect when it is generated.

Bob
Top achievements
Rank 1
 asked on 19 May 2022
1 answer
67 views

I have two multiselects (vendors and buyers) that are required selections to load a grid which lists POs when a user presses a "search" button. I am trying to learn about how to add validation so that you cannot load the grid unless the two multiselects have something selected. The documentation that I've found deals with forms so trying to figure out how to implement validation for my usecase. 

                    <label for="vendorslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Vendors</label>
                    <div class="nav-item dropdown" style="padding-right:10px;">
                        @(Html.Kendo().MultiSelect()
                        .Name("vendorslist")
                        .Filter(FilterType.Contains)
                        .Placeholder("Select Vendor...")
                        .AutoClose(false)
                        .AutoBind(false)
                        .DataTextField("displayvalue")
                        .DataValueField("keyvalue")
                        .AutoWidth(true)
                        .HtmlAttributes(new { style = " font-size:inherit; width:250px" })
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetVendorList", "UVL").Data("GetFacilityCode");
                            }).ServerFiltering(false);
                        })
                        .Events(events => events.Open("vendorsListOpen"))
                        )
                    </div>

                    <label for="buyerslist" style="color:white; line-height:3.2; padding-right:3px; padding-top:5px">Buyers</label>
                    <div class="nav-item dropdown" style="padding-right:10px;">
                        @(Html.Kendo().MultiSelect()
                        .Name("buyerslist")
                        .AutoClose(false)
                        .AutoBind(false)
                        .Placeholder("Select Buyer...")
                        .Filter(FilterType.Contains)
                        .DataTextField("agent")
                        .AutoWidth(true)
                        .HtmlAttributes(new { style = " font-size:inherit; width:150px" })
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetBuyers", "PODashboard").Data("GetFacilityCode").Type(HttpVerbs.Get);
                            }).ServerFiltering(false);
                        })
                        )
                    </div>

 

Function ran when reading grid that pulls selections to use for params when calling API:

function getPOParams() {
    //grab facility
    var dataText = $("#Facility").data("kendoDropDownList").text();
    var facility = dataText.split('-');
    var _facilityCode = $.trim(facility[0]);
    var _facilityDesc = $.trim(facility[1]);

    //grab vendor
    var multiselect = $("#vendorslist").data("kendoMultiSelect");
    var _vendors = [];
    var items = multiselect.value();
    for (var i = 0; i < items.length; i++) {
        _vendors.push(items[i].trim());
    }

    //grab buyer
    var buyerMultiselect = $("#buyerslist").data("kendoMultiSelect");
    var _buyers = [];
    var buyerItems = buyerMultiselect.value();
    for (var i = 0; i < buyerItems.length; i++) {
        _buyers.push(buyerItems[i].agent.trim());
    }

    //grab PO#
    var _poText = $("#poNumTextbox").data("kendoMaskedTextBox").value().toString();

    //grab status
    var _statusText = $("#StatusDropDownList").data("kendoDropDownList").value();

    return {
        vendorCode: _vendors,
        buyer: _buyers,
        facilityCode: _facilityCode,
        facilityDesc: _facilityDesc,
        statusText: _statusText,
        poNumText: _poText
    };
}

 

Mihaela
Telerik team
 answered on 24 Jan 2022
1 answer
2.9K+ views

I am having trouble getting the multi select to work in a .NET 5 project. I believe the code below is the relevant portion. This is copied directly from the official Telerik demo with a few modifications, and it works in the official Telerik demo project. The problem is that I can't get this code to work in any other project. It seems to be unable to read the data coming from Virtualization_Read. Since this works fine in the demo project, I am thinking it must be something outside of the code shown below, but I have no idea what it could be.

 

@(Html.Kendo().MultiSelect() .Name("orders") .DataTextField("text") .DataValueField("value") .Placeholder("Select addresses...") .Height(450) .Filter("contains") .DataSource(source => { source .Ajax() .PageSize(10) .Read("Virtualization_Read", "Home"); }) .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper")) )

 public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetOrders().ToDataSourceResult(request));
        }
 private List<SelectListItem> GetOrders()
        {
            var list = new List<SelectListItem>();
            list.Add(new SelectListItem() { Text = "Item 1", Value = "1" });
            list.Add(new SelectListItem() { Text = "Item 2", Value = "2" });

            return list;
        }
Tsvetomir
Telerik team
 answered on 10 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?