Questions on UI for ASP.NET Core Forum

1 answer

32 views

Html.Kendo().Grid checkbox selection not working

Hello,

I have Html.Kendo().Grid with checkbox column based on field(IsEnabled) is true that particular grid cell with check box needs to allow the user selection. if field(IsEnabled) is false that particular cell should be disabled and not allow the user to select or deselect.

The issue I'm facing is, it is allow to select the check box in second click only. not allowing to select in single click on that check box

sample code which I am using:

columns.Bound(c => c.IsEnabled)
.Title(Localizer["EnableDisableFlag", "PSFPro"].Value)
.ClientTemplate("<input type='checkbox' class='check-state enableDisableFlagCB'" +
$"onclick = 'handleEnableDisableFlagCheckBoxClicked(this);'" +
$"#= {nameof(TransactionTypeMappingParameterViewModel.IsEnabled)} ? " +
"'checked=checked' : '' # />")
.Sortable(false);

Grid

answered on 19 Feb 2024

1 answer

65 views

Cannot read properties of undefined (reading 'field') from grid.DataSource

I've pulled ViewModel objects into my selectable grid. After a user selects rows, a submit button allows an ajax call which will post the selected objects (rows) to a controller method:

    function submitAddressImport() {
         var grid = $("#groupAddressesImportGrid").data('kendoGrid');
         var selectedItems = grid.selectedKeyNames();
         var actualItems = [];

         if (selectedItems.length > 0) {
           selectedItems.forEach(function(key) {
            actualItems.push(grid.dataSource.get(key));
           });
         }

        kendo.ui.progress($("#groupAddressesImportGrid"), true);
        for (var i = 0; i < actualItems.length; i++) {
                $.ajax({
                type: "POST",
                url: "@Url.Action("AddAddress", "Address")",
                contentType: "application/json;",
                data: actualItems[i],  // JSON.stringify(actualItems[i]) avoids console error
                traditional: false,
                success: function (data) {
                 ...
                },
                error: function (data) {
                  ...
                },
                timeout: function (data) {
                   ...
                }, complete: function () {
                   ...
                }
            });
        }
        closeGroupAddresspopup()
    }

What is most curious about this error is that it is avoided if I use JSON.stringify() to convert the object to a JSON string. My model expects an object of a class, and if a stringified object is sent the object itself will not be null but will have all properties set to null.

When troubleshooting this, I removed the call to JSON.stringify() and encountered the console error:

Uncaught TypeError: Cannot read properties of undefined (reading 'field')

Why does this error occur when JSON.stringify() is not used, and how can it be avoided?

My grid is configured as follows:

            @(
                Html.Kendo().Grid(Model.groupAddresses)
                .Name("groupAddressesImportGrid")
                .HtmlAttributes(new { @class = "table-cell" })
                .Columns(columns =>
                {
                    columns.Select().Width(50);
                    columns.Bound(obj => obj.AddressType).Title("Type").Width(60);
                    columns.Bound(obj => obj.PrimaryField).Title("Primary");
                    columns.Bound(obj => obj.Address1).Title("Address");
                    columns.Bound(obj => obj.AddressCity).Title("City");
                    columns.Bound(obj => obj.State).Title("State");
                    columns.Bound(obj => obj.ZipCode).Title("Zip Code");
                    columns.Bound(obj => obj.County).Title("County");
                })
                .Sortable(_ => _.AllowUnsort(true))
                .Resizable(resizable => resizable.Columns(true))
                .Navigatable()
                .Filterable()
                .Scrollable()
                .Resizable(resize => resize.Columns(true))
                .Events(ev=>ev.Change("handleCheckBox"))
                .PersistSelection()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.AddressId)) 
                )
                )

Grid

answered on 19 Feb 2024

0 answers

19 views

Menu Rendering Issue

I'm using a Razor partial to create a navigation menu being served from a database. It's rendering the data from the database without issue, however, the children items are being displayed instead of only showing on hover / click.

When I load the app, the children items are already showing and attempting to collapse the About Root by clicking it has no result. Is it possible that the issue is related to Partial rendering?

@using Data.Tables
@using Data.Repositories
@using Microsoft.Extensions.Caching.Memory
@using Kendo.Mvc.UI
@inject NavigationRepository NavigationRepository
@inject IMemoryCache memoryCache

if (memoryCache.TryGetValue(NavigationRepository.cacheKey, out List<Navigation> navItems))
{
@(
Html.Kendo().Menu()
.Name("navigation")
.Items(items =>
{ //Render data that is loaded into .NET IMemoryCache on startup and kept up-to-date through the repository
foreach (var nav in navItems.Where(q => q.ParentNavigationId == null)) //Renders top level objects only
{
items.Add()
.Text(nav.Text)
.Url(nav.Link)
.Items(children =>
{ //Render child objects by matching elements that reference the top level object Id
foreach (var subNav in navItems.Where(q => q.ParentNavigationId == nav.Id))
{
children.Add()
.Text(subNav.Text)
.Url(subNav.Link);
}
});
}
})
.Direction(MenuDirection.Bottom)
.Orientation(MenuOrientation.Horizontal)
.OpenOnClick(true)
.CloseOnClick(true)
.HoverDelay(100)
.Animation(a =>
{
a.Enable(true);
a.Open(effect =>
{
effect.Expand(ExpandDirection.Vertical);
effect.Duration(500);
});
a.Close(effect =>
{
effect.Duration(300);
});
})
.Deferred(true) // JS error of kendo not found if this is not enabled
)
}

This partial is then rendered into the _Layout.cshtml through the below code.

Menu

asked on 18 Feb 2024

2 answers

25 views

Issue with Grid Drag and Drop

When row dragging and dropping the second time the UI doesnt refelct the change.

If I have an event I can see the drag and drop correctly, but the UI leaves the dragged row where it was

the code is simple

@(Html.Kendo().Grid<OncostVM>()
.Name("OncostGrid")
.DataSource(data => data
.Ajax()
.Read(read => read.Action("Read", "Oncost"))
.PageSize(10)
)
.Columns(columns =>
{
columns.Bound(c => c.OncostId).Title("Id").Width(80).Filterable(false);
columns.Template(@<text> </text>).Draggable(true).Width(50);
columns.Bound(c => c.Name).Filterable(false);
columns.Bound(c => c.Visible).Width(120).Filterable(false).YesNo("Visible");
columns.Bound(c => c.Active).Width(120).YesNo("Active");
})
.Filterable()
.Sortable()
.Pageable(page => page.Refresh(true))
.Reorderable(order => order.Rows(true))
@* .Events(ev => { ev.RowReorder("dragRow"); }) *@
)

https://i.imgur.com/GiD6Pi2.gif

Grid

answered on 13 Feb 2024

1 answer

33 views

Accept "#" inside form builder text boxes fields

Hi!

I use a lot of forms (created using HtmlHelper) inside templates used by various other elements (mainly inside TileLayouts).

e.g.:

public record SettingsViewModel
{
    [DataType(DataType.Password)]
    public string Password { get; set; } = null!;
}

<script id="settings-template" type="text/x-kendo-template">
    @(Html.Kendo().Form<settingsViewModel>()
        .Name("settingsForm")
        .FormData(Model.Settings)
        .Layout("grid")
        .Grid(g => g.Cols(2).Gutter(5))
        .HtmlAttributes(new { method = "POST", style = "width: 100%;" })
        .Validatable(v =>
        {
            v.ValidateOnBlur(false);
            v.ValidationSummary(true);
        })
        .Items(items =>
        {
                
            items.Add().Field(f => f.Password).Label("Password");
        })
        .ToClientTemplate()
        @* .ToString()
        .Replace("#", "\\#") *@
    )
</script>

<div class="k-d-flex-col k-justify-content-center">
    @(Html.Kendo().TileLayout()
        .Name("settings")
        .Columns(5)
        .RowsHeight("auto")
        .Containers(c =>
        {
            ...
            c.Add().BodyTemplateId("settings-template").ColSpan(4).RowSpan(1);
            ...
        })
    )
</div>

Many of these forms requires to accept text boxes (like passwords) which should accept "#" in their content.

Saving works perfect but when rendering the Form I always get an exception. Please see below error:

Uncaught Error: Invalid template:'
        <form id="settingsForm" method="POST" name="settingsForm" style="width: 100%;"></form><script>kendo.syncReady(function(){jQuery("\#settingsForm").kendoForm({"validatable":{"validateOnBlur":false,"validationSummary":{}},"formData":{"Password":"bla#bla","Id":0},"layout":"grid","grid":{"cols":2,"gutter":5},"serverErrors":{},"items":[{"field":"Password","label":{"text":"Password"},"editorOptions":{},"validation":{"data-val":"true","data-val-required":"The Password field is required.","type":"password"},"shouldRenderHidden":true}]});});<\/script>
    ' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n        <form id="settingsForm" method="POST" name="settingsForm" style="width: 100%;"></form><script>kendo.syncReady(function(){jQuery("#settingsForm").kendoForm({"validatable":{"validateOnBlur":false,"validationSummary":{}},"formData":{"Password":"bla';bla","Id":0},"layout":"grid","grid":{"cols":2,"gutter":5},"serverErrors":{},"items":[{"field":"Password","label":{"text":"Password"},"editorOptions":{},"validation":{"data-val":"true","data-val-required":"The Password field is required.","type":"password"},"shouldRenderHidden":true}]});});<\/script>
    ;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.js:322401:19)
    at init._initContainers (kendo.all.js:322401:19)
    at new init (kendo.all.js:322401:19)
    at HTMLDivElement.<anonymous> (kendo.all.js:322401:19)
    at Function.each (jquery.min.js:2:2898)
    at n.fn.init.each (jquery.min.js:2:846)
    at e.fn.<computed> [as kendoTileLayout] (kendo.all.js:322401:19)
    .......

Any idea how to fix that on the client-side (and not need to escape each property I want to accept "#" at server-side) ?

Thanks

Form

answered on 13 Feb 2024

0 answers

14 views

Securing the License File

Has anyone or does anyone do anything to secure their license file outside of what Telerik recommends? This way the plain text file isn't just available to anyone accessing your website.

Licensing

asked on 06 Feb 2024

1 answer

48 views

Support Captcha for linux hosting

System.Drawing is not support in linux OS

Captcha

answered on 05 Feb 2024

0 answers

23 views

ImageEditor upload and show TIFF image

Hello,

I want to ask how to upload a TIFF image and show it using ImageEditor, i tried the Demo page on ASP.NET Core ImageEditor Key Features Demo | Telerik UI for ASP.NET Core but the TIFF not showing.

Is it not supported ? are there any workaround ?

Thanks.

ImageEditor

asked on 05 Feb 2024

1 answer

31 views

Chart Legend Property Not Working

The chart legend property is not working at all for my chart using Razor syntax. I'm using the latest version of Telerik.UI.for.AspNet.Core 2023.3.1114.

<chart-legend position="ChartLegendPosition.Top" visible="false" />

I'm trying to hide the legend and it still shows setting visible to false. Also, the property position is not working. No matter what I set it to the legend is on the bottom.

Here is the full code for the chart.

            <kendo-chart name="chartDeliveryOrder">
                <chart-area background="transparent"></chart-area>
                <category-axis>
                    <category-axis-item>
                        <labels font="16px 'Nunito Sans'" />
                        <major-grid-lines visible="false" />
                    </category-axis-item>
                </category-axis>
                <series>
                    <series-item type="ChartSeriesType.Column" category-field="DeliveryOrderNumber"
                                 field="SumTask1Through21Total" name="Tasks 1-21 Total" color="#1C355E" visible-in-legend="false" />
                </series>
                <value-axis>
                    <value-axis-item name="" type="numeric" min="0">
                        <labels format="C" font="16px 'Nunito Sans'" />
                        <line visible="false" />
                        <major-grid-lines visible="true" />
                    </value-axis-item>
                </value-axis>
                <datasource>
                    <transport>
                        <read type="post" url="@Url.Action("DeliveryOrderActualsSummaryChart", "Chart")" data="additionalInfo" />
                    </transport>
                </datasource>
                <chart-legend position="ChartLegendPosition.Top" visible="false" />
                <chart-title text="Delivery Order Summary" font="28px 'Nunito Sans, Bold'" />
                <tooltip visible="true" format="C" font="16px 'Nunito Sans'" />
            </kendo-chart>

Chart

answered on 02 Feb 2024

1 answer

23 views

Kendo UI Date Range Picker - Calendar won't close after updating to version 2023.3.1114

Hi there,

After updating to version 2023.3.1114, I found that the calendar at Kendo UI Date Range Picker won't closed automatically after selecting the start and end date. This happened particularly when I change the max date inside the "Change" Event.

$("#date-range-picker").data("kendoDateRangePicker").max(new Date(2024, 1, 14));

I was able to replicate the issue at Kendo UI JQuery dojo: https://dojo.telerik.com/UfOcUZaY/3

However the issue can't be replicated at the following REPL: https://netcorerepl.telerik.com/?_gl=1*12uzyp6*_ga*ODY4MDY0MTk4LjE3MDY0NzY2ODc.*_ga_9JSNBCSF54*MTcwNjQ3NjY4Ni4xLjEuMTcwNjQ3NzM2NC44LjAuMA..*_gcl_au*MTM5NDI2ODE3Ny4xNzA2NDc2Njg3

Turned out the page still using version 2023.3.1010.

Is this change intended?

Is there a workaround? I have tried to close the calendar manually after checking if the range.start and range.end available. But didn't quite work well. It may close the calendar even if I only select the start date.

Appreciate your support. Thank you.

Calendar

DateRangePicker

Popover