Questions on UI for ASP.NET Core Forum

1 answer

118 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

126 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

168 views

Support Captcha for linux hosting

System.Drawing is not support in linux OS

Captcha

answered on 05 Feb 2024

0 answers

80 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

140 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

161 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

answered on 31 Jan 2024

1 answer

92 views

Prevent PDFViewer from saving anything local

I would like to ensure that no trace of the PDF is saved to the local machine in any kind of cache etc.
Is this how the PDFViewer works?

General Discussions

PDFViewer

answered on 30 Jan 2024

1 answer

65 views

Serverfiltering is not sending text after selecting an item from MultiColumnComboBox component

Hi,

on your demo page for ASP.NET Core MultiColumnComboBox Server Filtering when I enter Ali, then a request is sent to the server with querystring text=Ali and two records are shown.

When I click on one of the records and then expand the combox box again using the down arrow, then another request is send to the server but with empty text, so all records are returned.

This is problem when server contains a lot of records.

Is there a way how to send to the server the text shown in the input field? I need it to show just the one record like if I just entered the text in the field manually.

Regards,

Petr

MultiColumnComboBox

answered on 23 Jan 2024

1 answer

180 views

Kendo Grid using Signal R

im attempting to have a grid update based on records in a DB

i have a log4net service sending messages to a DB

i keep getting an error

Uncaught (in promise) Objectmessage: "The message port closed before a response was received."[[Prototype]]: Object
BatchInsights:59 Uncaught ReferenceError: hub is not defined
at HTMLDocument.<anonymous> (BatchInsights:59:1560)
at i (jquery.min.js:2:27466)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
at Function.ready (jquery.min.js:2:30023)
at HTMLDocument.K (jquery.min.js:2:30385)
jquery.simulate.js:331 Uncaught ReferenceError: jQuery is not defined
at jquery.simulate.js:331:5

I followed the demo and still get this error ...here is the view

@model IEnumerable<FMM.Core.DataModel.Pharmpix.LogModel>
@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@using FMM.Core.DataModel.Pharmpix;

@{
ViewData["Title"] = $"Batch Insights Logs";
Layout = "~/Views/Shared/_Layout.cshtml";

}

<div>
@(Html.Kendo().Notification()
.Name("notification")
.Width("100%")
.Position(position => position
.Top(50)
.Left(50))
)

@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.Logger).Width(150);
columns.Bound(p => p.Message).Width(120).Filterable(false);

})
.ToolBar(toolbar =>
{
toolbar.Search();
})
.Groupable()
.Pageable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.HtmlAttributes(new { style = "height:100%;" })
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.PageSize(20)
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read")
)
.Server(s => s
.Read("read")
))
.Schema(schema => schema
.Model(model =>
{
model.Id("Id");
model.Field("Logger", typeof(string)).Editable(false);
model.Field("Message", typeof(string));

})
)
))

</div>

<script src="https://unpkg.com/@@aspnet/signalr@1.0.0/dist/browser/signalr.js"></script>
<script>
$(document).ready(function () {
var hubUrl = "logHub";
var hub = new signalR.HubConnectionBuilder()
.withUrl(hubUrl, {
transport: signalR.HttpTransportType.LongPolling
})
.build();

var hubStart = hub.start();
});

function onPush(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
}
</script>

here is the hub

using FMM.Core.DataModel.Pharmpix;
using FMM.Core.Interfaces;
using FMM.DataAccess;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Linq;

namespace Financial_Management_Module.Hubs
{
public class LogHub : Hub
{
private readonly PharmpixDbContext _context;
private readonly IConfiguration _configuration;
private readonly ILogging _log;

public LogHub(PharmpixDbContext context, IConfiguration configuration, ILogging log)
{
_context = context;
_configuration = configuration;
_log = log;

}

public override System.Threading.Tasks.Task OnConnectedAsync()
{
Groups.AddToGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnConnectedAsync();
}

public override System.Threading.Tasks.Task OnDisconnectedAsync(Exception e)
{
Groups.RemoveFromGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnDisconnectedAsync(e);
}

public IEnumerable<LogModel> Read()
{
var result = _context.LogModel.Select(i => new LogModel
{
Id = i.Id,
Logger = i.Logger,
Message = i.Message
}

).ToList();

return result;

}

public string GetGroupName()
{
return GetRemoteIpAddress();
}

public string GetRemoteIpAddress()
{
return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString();
}

}
}

here is the log hub

using FMM.Core.DataModel.Pharmpix;
using FMM.Core.Interfaces;
using FMM.DataAccess;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Linq;

namespace Financial_Management_Module.Hubs
{
public class LogHub : Hub
{
private readonly PharmpixDbContext _context;
private readonly IConfiguration _configuration;
private readonly ILogging _log;

public LogHub(PharmpixDbContext context, IConfiguration configuration, ILogging log)
{
_context = context;
_configuration = configuration;
_log = log;

}

public override System.Threading.Tasks.Task OnConnectedAsync()
{
Groups.AddToGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnConnectedAsync();
}

public override System.Threading.Tasks.Task OnDisconnectedAsync(Exception e)
{
Groups.RemoveFromGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnDisconnectedAsync(e);
}

public IEnumerable<LogModel> Read()
{
var result = _context.LogModel.Select(i => new LogModel
{
Id = i.Id,
Logger = i.Logger,
Message = i.Message
}

).ToList();

return result;

}

public string GetGroupName()
{
return GetRemoteIpAddress();
}

public string GetRemoteIpAddress()
{
return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString();
}

}
}

the code gets called if i comment out the "signal" stuff but when new entries are inserted it doesnt up date the the grid any help is appreciated!

Grid

answered on 17 Jan 2024

1 answer

142 views

Issue with ASP.NET Core Upload Asynchronous Upload - Save-Url doesnt see handler on code [Code Behind] ( iam using Razor page)

Razor code-behind method: I made the razor method as simple as possible, just to see if we could get in there / or hit onpostUploadFile
public async Task<ActionResult> OnPostUploadFile(IEnumerable<IFormFile> files, string metaData)
{
AllowedExtensions = new string[] { "fpd", "pdf" };

return Page();
}

Razor page :

@addTagHelper *, Kendo.Mvc
<div>
    <div class="demo-section">
        <kendo-upload name="files">
            <async auto-upload="true" save-url="@Url.Action("Upload","UploadFile")" chunk-size="11000" />
            <validation max-file-size="20000000" />
        </kendo-upload>
    </div>
</div>

The issue is i am not able to hit the hander from the razor page when i pass the url to <async save-url="">, Despite many efforts, the handler specified in the save-url attribute doesn't seem to be hit and returns 404.

Not Working:

1. save-url: "/Upload/UploadFile",

2. save-url="./Upload?handler=UploadFile"

I also found Forum where it discussed the same problem but that didn't help us :https://www.telerik.com/forums/upload-using-tag-helpers

Upload

answered on 17 Jan 2024