Questions on UI for ASP.NET Core Forum

1 answer

75 views

Chart is freezing on mousewheel (infinite loop in DateCategoryAxis.scaleRange)

version 2022.1.119

My chart is freezing due to an infinite loop in DateCategoryAxis.scaleRange upon scrolling the mouse wheel over the chart (in an attempt to just scroll the page itself).

I have Zoomable(false) and Pannable(false).

The while condition highlighted below is never false when "delta" is not a positive integer (>= 1) or zero.
In my case, the function was passed delta = 0.3, so the loop iterates 0.3, -0.7, -1.7, -2.7, etc.

            scaleRange: function (delta) {
                var rounds = Math.abs(delta);
                var result = this.range();
                var from = result.min;
                var to = result.max;
                if (from && to) {
                    while (rounds--) {
                        var range = dateDiff(from, to);
                        var step = Math.round(range * 0.1);
                        if (delta < 0) {
                            from = addTicks(from, step);
                            to = addTicks(to, -step);
                        } else {
                            from = addTicks(from, -step);
                            to = addTicks(to, step);
                        }
                    }
                    result = {
                        min: from,
                        max: to
                    };
                }
                return result;
            },

It looks like there are other definitions of scaleRange() that are using the same code that probably would also need fixing.

EDIT: it appears that the reason "delta" is being passed in as 0.3 is because in the handler Chart._mousewheel:

totalDelta = -1
this$1._mousewheelZoomRate() == 0.3
therefore: -totalDelta * this$1._mousewheelZoomRate() == 0.3

I haven't dug into the code enough to know whether or not this is an issue, or is expected.

Chart

answered on 14 Feb 2022

1 answer

105 views

Is there an infinite/endless scroll option for the task board?

I am loading a few task boards with up to 2000 items. It would useful to have a batch or paged scrolling option like on the grid. Is there such an option on the task board? Or a way to use the scroll view with it?

ScrollView

TaskBoard

answered on 11 Feb 2022

1 answer

274 views

Js Errors on Kendo Window

I am getting the following errors when I run the following example :https://demos.telerik.com/aspnet-core/window

In the index page I am trying to reference this kendo.window.min.js, here is my code for the view:

@page "/"
@model StaffPortalCore.Views.Home.CropperModel
@{
}
@* Make sure tag helpers are not available for the Window content *@
@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"
@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"
@using Kendo.Mvc.UI;
@using (Html.BeginForm("Index", "Cropper", FormMethod.Post))
{<head>
    <script type="text/javascript" src="@Url.Content("~/js/kendo.window.min.js")"></script>

</head>
    <div class="configurator">
        <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Animation Settings</h4>
         <ul class="options">
            <li>
                @Html.RadioButton("animation", "zoom")
                @Html.Label("zoom", "default/zoom animation")
            </li>
            <li>
                @Html.RadioButton("animation", "toggle")
                @Html.Label("toggle", "toggle animation")
            </li>
            <li>
                 @Html.RadioButton("animation", "expand")
                 @Html.Label("expand", "expand animation")
            </li>
            <li>
                 @Html.CheckBox("opacity")
                 @Html.Label("opacity", "animate opacity")
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Window Settings</h4>
        <ul class="options">
            <li>
                @Html.CheckBox("draggable")
                @Html.Label("draggable", "draggable")
            </li>
            <li>
                @Html.CheckBox("resizable")
                @Html.Label("resizable", "resizable")
            </li>
        </ul>
    </div>
    </div>

    <button >Apply</button>
}

@(Html.Kendo().Window()
    .Name("window")
    .Animation(animation =>
    {
        animation.Open(open =>
        {
            if (ViewBag.animation == "expand")
            {
                open.Expand(ExpandDirection.Vertical);
            }

            if (ViewBag.animation == "zoom")
            {
                open.Zoom(ZoomDirection.In);
            }

            if (ViewBag.opacity)
            {
                open.Fade(FadeDirection.In);
            }
        });

        animation.Close(close =>
        {
            close.Reverse(true);
            if (ViewBag.animation == "expand")
            {
                close.Expand(ExpandDirection.Vertical);
            }

            if (ViewBag.animation == "zoom")
            {
                close.Zoom(ZoomDirection.Out);
                close.Reverse(false);
            }

            if (ViewBag.opacity)
            {
                close.Fade(FadeDirection.In);
            }

        });
    })
    .Content(@<text>
        <div style="text-align: center;">
              
                <p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="https://www.conranshop.co.uk/" title="https://www.conranshop.co.uk/">https://www.conranshop.co.uk/</a></p>
            </div>
    </text>)
    .Width(500)
    .Draggable((bool)ViewBag.draggable)
    .Resizable(resize => resize.Enabled((bool)ViewBag.resizable))
    .Title("EGG CHAIR")
    .Actions(actions => actions
        .Custom("custom")
        .Minimize()
        .Maximize()
        .Close()
    )
    .Events(events=> events.Close("close"))
)


<div class="responsive-message"></div>

<script type="text/javascript">
        function close() {
            $("#undo").fadeIn(300);
        }

        $(document).ready( function () {
            var dialog = $("#window");
            $("#undo")
                .bind("click", function () {
                    $("#window").data("kendoWindow").open();
                    $("#undo").fadeOut(300);
                });

            dialog.data("kendoWindow").wrapper
                .find(".k-i-custom").parent().click(function (e) {
                    alert("Custom action button clicked");
                    e.preventDefault();
                });
        });

    </script>

<style>
    #example {
        min-height: 400px;
    }

    #undo {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
    }

    .k-window {
        z-index: 100000;
    }

    @@media screen and (max-width: 1023px) {
        div.k-window {
            display: none !important;
        }
    }
</style>

An here is code for the controller:

using Microsoft.AspNetCore.Mvc;

namespace StaffPortalCore.Controllers
{
    public class CropperController : Controller
    {
        public ActionResult Index(string animation, bool? opacity, bool? draggable, bool? resizable)
        {
            ViewBag.animation = animation ?? "expand";
            ViewBag.opacity = opacity ?? true;
            ViewBag.draggable = draggable ?? true;
            ViewBag.resizable = resizable ?? true;

            return View();
        }
    }
}

Can someone please advise which scripts I need to reference and how I should reference them. Thank in advance

Window

answered on 10 Feb 2022

1 answer

225 views

CheckBoxGroup inside Kendo Form

How can I change the selected checkbox to be highlighted in yellow when I checkbox is clicked inside the checkboxgroup? thanks.

Form

answered on 09 Feb 2022

1 answer

563 views

Guidance for migration from ASP.NET MVC kendo wrappers to ASP.NET Core kendo wrappers

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.

General Discussions

answered on 08 Feb 2022

1 answer

797 views

Is there an example on how to implement Upload control using Razor Pages?

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>

Upload

answered on 08 Feb 2022

1 answer

381 views

Unable to upload a folder with subfolders and files using the Upload control in a Razor Page.

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?

Upload

answered on 08 Feb 2022

1 answer

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

ComboBox

answered on 07 Feb 2022

1 answer

90 views

Virtualization with local data on multicolumncombobox

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.

MultiColumnComboBox

answered on 07 Feb 2022

1 answer

100 views

Cascade ComboBox: RangeError

*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();
    }

ComboBox

answered on 04 Feb 2022