Questions on UI for ASP.NET Core Forum

1 answer

101 views

NumericTextBox<decimal>() and ms sql server 2008

<div class="form-group">
                        <label asp-for="Summ">Стоимость от</label>
                        @(Html.Kendo().NumericTextBox<decimal>()
                            .Name("Summ")
                            .Min(0)
                            .Value(Model.Summ)
                            .HtmlAttributes(new { style = "width: 100%" })
                        )
                    </div>

public class ServiceViewModel
    {
        ......
        public decimal Summ { set; get; }.....
    }

var supportedCultures = new[] { new CultureInfo("ru-RU") };

            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture("ru-RU"),
                SupportedCultures = supportedCultures,
                SupportedUICultures = supportedCultures
            });

<script src="~/lib/kendo/js/cultures/kendo.culture.ru-RU.min.js"></script>

the database contains a value, but does not display it correctly.And also, when saving the form, it does not take a value in the model, therefore, in the controller, the value is 0.How to fix it all?

NumericTextBox

answered on 16 Feb 2022

1 answer

174 views

Grid column filter with multiple search keywords

Hi

I would like to filter a string column with multiple keyword, can you advice how I can do that?

example. country column, filter by entering "USA, UK, India";

I know I can set checkbox filter menu, but I would like user to enter the test instead.

Thank you.

Grid

answered on 16 Feb 2022

1 answer

877 views

how to set input type as password using forms tag helper

in the form using tag helpers, how can I set textbox-editor as password?

<form-item field="Password">
<item-label />
<textbox-editor ></textbox-editor> ???????????
</form-item>

Form

TextBox

answered on 15 Feb 2022

1 answer

1.7K+ views

How to hide label in form

Hi, I'm new to Telerik ASP.NET Core, so maybe this is a simple task. I'm using Razor Pages and would like to hide the label from one field, how can this be done? From the switch field.

Thanks,

Humberto

                    @(Html.Kendo().Form<ProfileModel>()
                            .Name("formExample")
                            .FormData(Model?.Input)
                            .HtmlAttributes(new { method = "POST" })
                            .Layout("grid")
                            .Grid(g => g.Cols(1).Gutter(0))
                            .Items(items => {
                                items.AddGroup()
                                    .Label("Security")
                                    .Layout("grid")
                                    .Grid(g => g.Cols(2))
                                    .Items(i =>
                                    { 
                                        i.Add()
                                            .Field(f=> f.TFA)
                                            .Editor(e => e.Switch());
                                });

                            })
                            .Validatable(v =>
                            {
                                v.ValidateOnBlur(false);
                                v.ValidationSummary(false);
                                v.ErrorTemplate("<span style='color: red'>#:message#</span>");
                            })
                    )

Form

Switch

answered on 15 Feb 2022

1 answer

74 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

103 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

265 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

219 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

552 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

777 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