Hi All,

We have been using Kendo UI for ASPNET MVC product to build up our WebApp during the past 5 years. We would like now to migrate to kendo UI ASP Core. Is there some guidance, documentation or tooling from Telerik that would ease the process ? 
This would be great help.

Hi, I am trying to add an upload control to a defult Telerik UI for ASP:Net Core Razor Page but it is not working.

This is all I have in Index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@using HelloAspNetCore.Data
@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<div class="text-center">
    <h2>Telerik UI DatePicker for ASP.Net Core</h2>
    @(Html.Kendo().DatePicker()
    .Name("my-picker")
    )
</div>

<br />

<div>
    @(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("Save", "Upload")
        .Remove("Remove", "Upload")
        .AutoUpload(true)
        )
    )
</div>

<br />

<div>
@(Html.Kendo().Grid<OrderViewModel>
                                ().Name("grid")
                                .Groupable()
                                .Sortable()
                                .Editable()
                                .Scrollable()
                                .ToolBar(x => x.Create())
                                .Columns(columns =>
                                {
                                    columns.Bound(column => column.Freight);
                                    columns.Bound(column => column.ShipName);
                                    columns.Bound(column => column.ShipCity);
                                    columns.Command(column =>
                                    {
                                        column.Edit();
                                        column.Destroy();
                                    }).Width(230);
                                })
                                .DataSource(ds => ds.Ajax()
                                .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
                                .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
                                .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
                                .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
                                .Model(m => m.Id(id => id.OrderID))
                                .PageSize(10)
                                )
                                .Pageable()
)

</div>

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

    function onChange() {
        $("form").submit();
    }
    
</script>

Hi I am testing the Upload control using the following page: Link

I tried to drag & drop a folder with subfolders and files, but the control displays an error "File type not allowed" and it displays the main folder name.

Does the Upload control allows to drag & drop a folder with subfolders and files in it?

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 }
    }

Hello guys,

is there any example showing how to achieve the virtualization on multicolumncombobox (or dropdownlist or combobox) but with local data and not with remote?

Thanks.

*How do I troubleshoot this error:  Uncaught RangeError: Maximum call stack size exceeded

I am attempting to cascade/filter my time zones by the selected country.  The country drop-down works fine.  On selection, there is a long pause and the time zones are not populated.  Break points don't stop the code in the "GetTimeZones" method so it seems to not be called.  When I look at the browser tools I see this error.

Controller:

        public async Task<ICollection<Country>> GetCountries()
        {
            var response =
                await countriesClient.GetAllAsync();

            if (response.IsSuccess)
            {
                return response.Result;
            }
            else
            {
                throw new Exception(
                    $"Error getting countries.  {response.Message}");
            }
        }

        public JsonResult GetTimeZones(string countryCode)
        {
            TimeZones timeZones = new TimeZones();
            timeZones.Refresh();

            TimeZones result = timeZones.GetByCountry(countryCode);

            return Json(result);
        }

View

            <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().ComboBox()
                    .Name("timeZones")
                    .Placeholder("Select Time Zone...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .Filter(FilterType.Contains)
                    .CascadeFrom("countries")
                    .Enable(false)
                    .AutoBind(false)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTimeZones", "Persons")
                                .Data("filterTimeZones");
                        });
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>

Part 2:  How do I bind this to the Model?  Do I need to pull the values from these controls in JavaScript to populate the Model?

<input type="submit" value="Save" class="btn-primary btn-default" onclick="showIsBusy()" />

    function showIsBusy() {

        var countryCode = $("#countries").data("kendoComboBox");
        var timeZoneName = $("#timeZones").data("kendoComboBox");

        //alert(countryCode);
        //alert(timeZoneName);

        @Model.Item.CountryCode = countryCode;
        @Model.Item.TimeZoneName = timeZoneName;

        //alert("isBusy");
        $("#isbusy").show();
        $("form").submit();
    }

Hi,

I am trying to use Kendo Tabstrip in my ASP.NET Core Razor page. I used the example code provided by telerik UI. But its still not displayed. its displaying as plain text. This is my code. Please help if I need to include any other namespace or missing any reference?

--------index.cshtml---------------------------------------------------------------------------------------------------------------------------------------------

@page
@model IndexModel
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{
    ViewData["Title"] = "Home page";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style type="text/css">
  #wrapper {width: 760px;margin: 250px 25px; text-align: center;font-weight: bold }
  #content{background-color:#e5eecc}
      .k-tabstrip > .k-content {
        padding: 1em;
    }
    .specification {
        max-width: 670px;
        margin: 10px 0;
        padding: 0;
    }
    .specification dt, dd {
        max-width: 140px;
        float: left;
        margin: 0;
        padding: 5px 0 8px 0;
    }
    .specification dt {
        clear: left;
        width: 100px;
        margin-right: 7px;
        padding-right: 0;
        opacity: 0.7;
    }
    .specification:after, .wrapper:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
  </style>

  <body>
  <form id="form1" runat="server">
    <div class="demo-section k-content">
@(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Events(events => events
            .Show("onShow")
            .Select("onSelect")
            .Activate("onActivate")
            .ContentLoad("onContentLoad")
            .Error("onError")
        )
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("First Tab")
                .Selected(true)
                .Content(@<text>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci. Proin sagittis elementum odio, eu vestibulum arcu rhoncus eu. Pellentesque lorem arcu, tempus at dapibus nec, tincidunt a ante. Cras eget arcu id augue sollicitudin fermentum. Quisque ullamcorper ultrices ante, ut mollis neque tincidunt nec. Aenean sollicitudin lobortis nibh, vitae sagittis justo placerat et. Fusce laoreet consequat arcu, quis placerat massa lacinia vel. Etiam fringilla purus ac ipsum euismod nec aliquet lorem aliquet. Aliquam a nunc ac lorem lobortis pulvinar. Integer eleifend lobortis risus vel commodo. Integer nisl turpis, facilisis a porttitor nec, tempus ac enim. Proin pulvinar vestibulum ligula id mattis. Integer posuere faucibus accumsan.</p>
                </text>);

            tabstrip.Add().Text("Ajax Tab")
                .LoadContentFrom(Url.Content("~/shared/web/tabstrip/ajax/ajaxContent1.html"));

            tabstrip.Add().Text("Error Tab")
                .LoadContentFrom("error.html");
        })
)
</div>


  </form>
  </body>
  <script>
    function onShow(e) {
        kendoConsole.log("Shown: " + $(e.item).find("> .k-link").text());
    }

    function onSelect(e) {
        kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());
    }

    function onActivate(e) {
        kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());
    }

    function onContentLoad(e) {
        kendoConsole.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
    }

    function onError(e) {
        kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
    }
</script>

-----------------------------------------------------------------------------------------------------------------------------------------------------

---------------index.cshtml.cs--------------------------------------------------------------------------------------------------------------------------------------

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace DotNETSharedEnvironmentPortal.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public void OnGet()
        { }


    }
}

------------------------------------------------------------------------------------------------------------------------------------------------

------------------O/P displayed------------------------------------------------------------------------------------------------------------------

Is there a built-in method like jQuery's serializeArray to pull the values for all the Kendo controls in a form? I recently found that the Html helper and Kendo CheckBox control creates hidden input tags for each CheckBox. The hidden fields are always set to "false". When I construct the model object after retrieving the values using serializeArray, the user input is overridden with the false values from the hidden fields. I cannot reject hidden fields as I have other hidden fields needed for my scenario. Some of our models are pretty big and it is tedious to construct each control in order to retrieve the user inputs.

The forms are mostly templates within a dialog invoked on Grid change event as the popup edit does not work with a custom template.