Questions on UI for ASP.NET Core Forum

1 answer

84 views

*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

0 answers

144 views

TabStrip not displayed on a .NET Core Razor Page

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

TabStrip

asked on 03 Feb 2022

1 answer

308 views

Is there an equivalent for jQuery.serializeArray in Kendo?

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.

Form

Grid

answered on 03 Feb 2022

1 answer

156 views

How do I make a dialog moveable and constrained like a window control?

I want the dialog control to be moveable and constrained just like the window control so I can see some values hidden behind in a grid.

Dialog

answered on 03 Feb 2022

1 answer

222 views

How to display a fixed tabstip content height?

I need to have a fixed tabstip content body instead of collapsing based on the content size. Like minimum height or fixed height with scrollbars on overflow.

TabStrip

answered on 03 Feb 2022

1 answer

1.6K+ views

Checkbox in grid column automatically unchecks when selecting another row + tying value of field to check status of checkbox

Question 1: I have a bool field that I want to show as a checkbox (checked if true, unchecked if false). I added it to grid as far as I know how to but I know it isn't reflecting true or false because the checkbox is unchecked even if the value is true.

Question 2: when I check a checkbox and move on to another row, it does not stay checked and instead it reverts back to unchecked. How do I set it up so that it remains checked when I select another row?

 @(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
                        .Name("poGrid")
                        .Columns(columns =>
                        {
                            columns.Command(command => command
                                    .Custom("Print")
                                    .Click("printRow"))
                                .HtmlAttributes(new { title = "PO" })
                                .Width(150);
                            columns.Bound(p => p.resend)
                                .Title("Resend")
                                .Editable("isResendEditable")
                                .ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input id='resend_' onclick='resendSelect(this)' name='resend_#=poNum#_#=poReleaseNbr#_#=poRevisionNbr#' value='#=resend#' class='k-checkbox' type='checkbox' /> #} else {# <p> </p> #}#")
                                .Width(135)
                                .Filterable(ftb => ftb.Multi(true))
                                .HtmlAttributes(new { style = "text-align:center;" });
                            columns.Bound(p => p.resend)
                                .Width(110)
                                .HtmlAttributes(new { @class = "kendo-column", style = "text-align:center;" })
                                .Editable("isResendEditable")
                                .ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input type ='checkbox' id='poResend_#=poNum#' class='k-checkbox' /> #} else {# <input type ='checkbox'id='poResend_#=poNum#' class='k-checkbox' disabled='disabled' /> #}#");
                            columns.Bound(p => p.poNum).Width(130).Editable("readOnlyCol").HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poReleaseNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poRevisionNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poIssueDT)
                                .Width(150)
                                .Format("{0:MM/dd/yyyy}")
                                .HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poEdiObjectMode)
                                .Width(100)
                                .Filterable(ftb => ftb.Multi(true))
                                .HtmlAttributes(new { @class = "disabled-kendo-column" });
                        })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Selectable(selectable => selectable
                                        .Mode(GridSelectionMode.Single))
                            .Scrollable(scrollable => scrollable.Endless(true))
                            .Scrollable(a => a.Height("650px"))
                            .PersistSelection(true)
                            .Navigatable()
                            .Sortable()
                            .Filterable(filterable => filterable
                                .Extra(true)
                                .Operators(ops => ops
                                .ForString(str => str.Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                                .StartsWith("Starts with")
                                .EndsWith("Ends with")
                                .IsNull("Is null")
                                .IsNotNull("Is not null")
                                .IsEmpty("Is empty")
                                .IsNotEmpty("Is not empty"))))
                        .AutoBind(false)
                        .Excel(excel => excel
                            .FileName("PODashboard.xlsx")
                            .Filterable(true)
                            .AllPages(true)
                            .ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
                        .Reorderable(reorder => reorder.Columns(true))
                        .ClientDetailTemplateId("template")
                        .Events(e => e.DataBound("poGridDataBound"))
                        .Events(e => e.CellClose("POGridCellClose"))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .PageSize(25)
                        .Events(x => x.Error("onGridError"))
                        .Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
                        .Model(model =>
                        {
                            model.Id(m => m.poNum);
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            model.Field(field => field.poIssueDT).Editable(false);
                            model.Field(field => field.poEdiObjectMode).Editable(false);
                            model.Field(field => field.resend).Editable(true);
                        })
                        ).Resizable(resize => resize.Columns(true))
                        )

function isResendEditable(e) {
    var ediType = e.poEdiObjectMode; var editable = false;
    if (ediType == "EMAIL") { editable = true; }

    return editable;
}

public class POModel
    {
        [DisplayName("Vendor")]
        public string vendorName { get; set; }
        [DisplayName("PO #")]
        public string poNum { get; set; }

        [DisplayName("Buyer")]
        public string buyer { get; set; }

        [DisplayName("Release #")]
        public string poReleaseNbr { get; set; }

        [DisplayName("Revision #")]
        public string poRevisionNbr { get; set; }

        [DisplayName("Original Issue")]
        public string poIssueDT { get; set; }

        [DisplayName("EDI Type")]
        public string poEdiObjectMode { get; set; }
  
        public bool resend { get; set; }
    }

\

Checkbox

Grid

answered on 02 Feb 2022

1 answer

2.0K+ views

Grid Popup Editing using Custom Template

I am currently using a Dialog and Template on Grid change event for a custom edit form. How do I let the popup editor know to use my template for popup edit?

Grid

answered on 02 Feb 2022

1 answer

352 views

How to disable a maskedtextbox

I am using a form in a .net Core project. I want to disable/enable a maskedtextbox based on ViewBag properties. It works for regular text boxes, but not a masked text box. Here is a portion of my code:

i.Add()
    .Field(f => f.LastName)
    .Label(l => l.Text("Last Name:"))
    .Editor(e =>
    {
        e.TextBox().Enable(ViewBag.canEdit);
    });
i.Add()
    .Field(f => f.CellPhone)
    .Label(l => l.Text("Cell Phone:"))
    .Editor(e =>
    {
        e.MaskedTextBox().Mask("(000) 000-0000").Enable(ViewBag.canEdit);
    });

MaskedTextBox

answered on 02 Feb 2022

1 answer

693 views

Button is always rendered as type button

Hey guys,

I know that your intention with the kendo button was always to render a button of type "button". Also I know you're providing a kendo form widget to render a full form with a submit button.

But isn't there any solution to achive a basic html form and then render a kendo button of type "submit"? I know I can change it with jquery manually afterwords or by registrating an function which will fire the submit again, but i would only use this when there isn't any built in solution to force it as type submit.

My intention was to render the kendo button with the tag helper and then manually set the type but it will be always overridden back to type "button" instead of keeping it as "submit".

<kendo-button name="btnSubmit" theme-color="ThemeColor.Primary" class="float-right" type="submit">
                Speichern
                @(Html.Kendo().Loader()
                    .Name("loader")
                    .HtmlAttributes(new { aria_busy = "false", aria_description = InfoMessages.LoadingOperation, aria_live = "polite" })
                    .Size(LoaderSize.Small)
                    .ThemeColor(LoaderThemeColor.Light)
                    .Type(LoaderType.InfiniteSpinner)
                    .Visible(false)
                )
            </kendo-button>