Questions on UI for ASP.NET Core Forum

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

1 answer

51 views

Conditional Form Validation

Hello,

I'm looking to see if its possible to have the validation on one item in a form be dependent on another inputs selection.

.
.
.
        @(Html.Kendo().Form<EquipmentViewModel>()
            .Name("EquipmentForm")
            .Layout("grid")
            .Items(items =>
            {
                items.AddGroup()
                    .Label("Registration Form")
                    .Items(i =>
                    {
                        i.Add()
                            .Field(f => f.EquipmentType)
                            .Label(l => l.Text("Equipment Type"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentTypeID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentTypesByEquipmentClassID").Data("EquipmentClassData"); });
                                    })
                                    .Enable(isControlEnabled)
                                    .Events(e => { e.Change("OnChangeEquipmentTypeChange").DataBound("OnChangeEquipmentTypeChange"); })
                                    .CascadeFrom("EquipmentClass");
                            });
                        i.Add()
                            .Field(f => f.EquipmentDesign)
                            .Label(l => l.Text("Equipment Design"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentDesignID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentDesignByEquipmentTypeID").Data("EquipmentTypeData"); });
                                    })
                                    .CascadeFrom("EquipmentType")
                                    .Enable(false)
                                    .Events(e => { e.Change("OnChangeEquipmentDesignChange").DataBound("OnChangeEquipmentDesignChange"); });
                            });
.
.
.

This scenario loads EquipmentDesigns based on the EquipmentType the user has selected. I would like EquipmentDesigns to be required ONLY if the selected equipment type has equipment designs. In other words, only when the call to get the EquipmentDesigns actually returns data.

DropDownList

Form

answered on 16 Jan 2024

1 answer

72 views

Exporting Html to PDF Using MVC .NET CORE

I have a HTML form that has a body with data already populated in it. I want to export that data on a button click to then download that html to pdf. The form already has a method of post. I am stuck on how to get the Telerik Document process to hook up with it once the button is click.

It looks like this

index.cshtml

<body>

.... "Data and text here"

</form>

<button type="submit"> Download</button>

</body>

Currently I dont have a controller method to sync up with yet. Looking for example on how to get it to work

Form

General Discussions

PDFViewer

answered on 08 Dec 2023

1 answer

38 views

Custom Editor in Forms Component with TagHelper

Hi,

I need to create a custom editor to provide an upload field in my form component. I have seen posts and this documentation about creating custom editors with the HtmlHelper approach but can't find anything for the TagHelper approach.

Please can you point me in the right direction?

Form

answered on 01 Dec 2023

1 answer

64 views

Is there a way to make partial view editors for custom objects that suit both form and grid controls

I have grid and form, which are bound to Employee object. It has object property Department. To edit it, I use separate editors, because I didn't find the right format to allow editing in both places.

Usage in form:

i.Add().Field(e => e.DepartmentId).Label("Отдел").EditorTemplateView(Html.Partial("FormEditors/Department"));

Editor of the form's field:

@(Html.Kendo().DropDownList()
    .Name("DepartmentId")
    .DataTextField("Name")
    .DataValueField("Id")
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read => read.Action("GetDepartments", "Home"));
    }))

Usage in grid:

        columns.Bound(p => p.Department.Name).Width(230)
            .ClientTemplate("#=data.Department?.Name ?? ''#")
            .EditorTemplateName("Department")
            .Filterable(ftb => ftb.Cell(cell =>
            {
                cell.Operator("startswith");
                cell.ShowOperators(false);
            }));

Editor of the grid's column:

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("Id")
    .Filter(FilterType.Contains)
    .HtmlAttributes(new { data_bind = "value: Department" })
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");
        });
    }))

Form

Grid

answered on 12 Sep 2023

1 answer

235 views

Newtonsoft.Json.JsonSerializationException: Self referencing loop detected with type 'DMDPace.DataAccess.DomainModels.User'. Path 'Department.Users'.

The form throws this exception when a User has Department. View with form:

@model DMDPace.DataAccess.DomainModels.User;

    @(Html.Kendo().Form<User>()
        .Name("User")
        .HtmlAttributes(new { action = "/Directory/User_Update", method = "POST" })
        .Layout("grid")
        .Grid(g => g.Cols(12).Gutter(20))
        .Items(i =>
        {
            i.Add().Field(e => e.DepartmentId).Label("Отдел").Editor(e => e.DropDownList()
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(s =>
                {
                    s.Read(r => r.Action("GetDepartments", "Home"));
                }));
        }))

When I comment form code, it runs without errors.

User:

    public class User : Entity
    {
        public int? DepartmentId { get; set; }
        public Department Department { get; set; }
    }

Department:

public class Department : Entity
    {
        public virtual List<User> Users { get; set; }
    }

Startup:

services.AddControllers().AddNewtonsoftJson(options =>
            {
                options.SerializerSettings.ContractResolver = new DefaultContractResolver();
                options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
            });

Endpoint which returns view:

        [HttpGet("[controller]/User/{Id:int}")]
        public async Task<IActionResult> UserView(int id)
        {
            var entity = await _userObjectService.GetAll()
                .Include(e => e.Department)
                .Where(e => e.Id == id)
                .FirstOrDefaultAsync();

            return View("User", entity);
        }
 
Telerik version - 2022.1.301.

Form

updated question on 17 Aug 2023

1 answer

84 views

How to specify editor which is in partial view for the form's field

I have a dropdown editor in the partial view:

@(Html.Kendo().DropDownListFor(m => m.DepartmentId)
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");
        });
    })
    )

Which I use in grid by specifying partial view's file name:

 .EditorTemplateName("Department")

How to specify the same for the form's field?

Form

Grid

answered on 15 Aug 2023

1 answer

55 views

How to hide nodes related to id input

When I add input for Id as said here https://docs.telerik.com/aspnet-core/html-helpers/layout/form/hidden-fields

i.Add().Field(f => f.Id).Editor(e => e.Hidden());

I got this text on my

Id:
hidden

How to get rid of it?

Also, I don't see input in the DOM tree, how Id will be transferred to the server?

Form

answered on 11 Aug 2023

1 answer

158 views

Remove default handler of clear button

Default handler clears inputs values, but I want to set default values. I can accomplish this with my own handler, but I don't know how to remove default.

Form