Questions on UI for ASP.NET Core Forum

0 answers

133 views

Confused about ASP .Net Core and its use with Angular for frontend

Hi,

I'm pretty new to ASP .Net Core but I have read on microsoft site that code written with it can be run on the browswer and can be used to create UI. So, If all this can be done with ASP .Net Core why is people pairing it with Angular? I known there's something I'm missing here but don't know what.

I would really appreciate it if anyone could clarify it.

Cheers!

General Discussions

asked on 23 Feb 2022

1 answer

317 views

No records to display in Telerik's TreeList With Razor Page

Template code:

@(Html.Kendo().TreeList<EmployeeDirectoryModel>()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Add().Field(e => e.FirstName).Title("First Name").Width(220);
        columns.Add().Field(e => e.LastName).Title("Last Name").Width(200);
        columns.Add().Field(e => e.Position);
        columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
        columns.Add().Width(350).Command(c =>
        {
            c.CreateChild().Text("Add child");
            c.Edit();
            c.Destroy();
        })
        .HtmlAttributes(new
        {
            style = "text-align: center;"
        });
    })
    .Editable()
    .DataSource(dataSource => dataSource
        .Read(r => r.Url("/Employees/Index?handler=Read").Data("forgeryToken")) // Specify the url to the OnPostRead method.
        .Update(u => u.Url("/Employees/Index?handler=Update").Data("forgeryToken"))
        .Create(c => c.Url("/Employees/Index?handler=Create").Data("forgeryToken"))
        .Destroy(d => d.Url("/Employees/Index?handler=Destroy").Data("forgeryToken"))
        .Model(m =>
        {
            m.Id(f => f.EmployeeId); // Provide the Id property of the model.
            m.ParentId(f => f.ReportsTo); // Provide the Child Id property of the model.
            m.Expanded(false); // Set to true if you want the TreeList to be expanded by default.
            m.Field(f => f.FirstName);
            m.Field(f => f.LastName);
            m.Field(f => f.ReportsTo);
            m.Field(f => f.HireDate);
            m.Field(f => f.Position);
        })
    )
    .Height(540)
)

Headers request:

Response:

{
    "data": [
        {
            "employeeId": 1,
            "firstName": "Daryl",
            "lastName": "Sweeney",
            "reportsTo": null,
            "position": "CEO",
            "hasChildren": false,
            "hireDate": "2022-02-19T14:02:27.590078+07:00"
        },
        {
            "employeeId": 2,
            "firstName": "Guy",
            "lastName": "Wooten",
            "reportsTo": 1,
            "position": "Chief Technical Officer",
            "hasChildren": false,
            "hireDate": "2022-02-20T14:02:27.590084+07:00"
        },
        {
            "employeeId": 3,
            "firstName": "Buffy",
            "lastName": "Weber",
            "reportsTo": 2,
            "position": "VP, Engineering",
            "hasChildren": false,
            "hireDate": "2022-02-21T14:02:27.5900853+07:00"
        },
        {
            "employeeId": 4,
            "firstName": "Hyacinth",
            "lastName": "Hood",
            "reportsTo": 3,
            "position": "Team Lead",
            "hasChildren": false,
            "hireDate": "2022-02-22T14:02:27.5900856+07:00"
        },
        {
            "employeeId": 5,
            "firstName": "Akeem",
            "lastName": "Carr",
            "reportsTo": 4,
            "position": "Junior Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-23T14:02:27.590086+07:00"
        },
        {
            "employeeId": 6,
            "firstName": "Rinah",
            "lastName": "Simon",
            "reportsTo": null,
            "position": "Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-24T14:02:27.5900865+07:00"
        },
        {
            "employeeId": 7,
            "firstName": "Gage",
            "lastName": "Daniels",
            "reportsTo": 6,
            "position": "Software Architect",
            "hasChildren": false,
            "hireDate": "2022-02-25T14:02:27.5900868+07:00"
        },
        {
            "employeeId": 8,
            "firstName": "Constance",
            "lastName": "Vazquez",
            "reportsTo": 6,
            "position": "Director, Engineering",
            "hasChildren": false,
            "hireDate": "2022-02-26T14:02:27.5900871+07:00"
        },
        {
            "employeeId": 9,
            "firstName": "Darrel",
            "lastName": "Solis",
            "reportsTo": 8,
            "position": "Team Lead",
            "hasChildren": false,
            "hireDate": "2022-02-27T14:02:27.5900874+07:00"
        },
        {
            "employeeId": 10,
            "firstName": "Brian",
            "lastName": "Yang",
            "reportsTo": 9,
            "position": "Senior Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-28T14:02:27.5900878+07:00"
        },
        {
            "employeeId": 11,
            "firstName": "Lillian",
            "lastName": "Bradshaw",
            "reportsTo": 9,
            "position": "Software Developer",
            "hasChildren": false,
            "hireDate": "2022-03-01T14:02:27.5900882+07:00"
        }
    ],
    "total": 11,
    "aggregateResults": {},
    "errors": null
}

UI result:

Grid

TreeList

answered on 18 Feb 2022

2 answers

1.2K+ views

Set "maxlength" to a field in forms

Hi,

I'm trying to set the maximum length of input characters using HtmlAttributes in a form. But it seems it doesn't work; I can still type more than 4 characters. Here is an example in REPL:

https://netcorerepl.telerik.com/wmkmbflo51nxiZPb01

                   i.Add()
                        .Field(f => f.FirstName)
                        .Editor(e=> e.TextBox().HtmlAttributes(new { maxlength = "4" }))
                        .Label(l => l.Text("First Name:"));

Thanks,

Humberto

Form

TextBox

answered on 18 Feb 2022

1 answer

147 views

ComboBox Strict Selection

I don't want the user to be able to type in the Text part of the combo box. They are required to select from the options provided. How do I prevent typing?

ComboBox

answered on 18 Feb 2022

1 answer

101 views

Timeline - Pick left or right side

Trying to figure out if there is a way to pick if the items will be on the left or right, i dont want to alternate but rather pick which ones will be on each side. If anyone knows how and could pass on the info that would be great!

Timeline

answered on 17 Feb 2022

1 answer

52 views

Search not working in modal

Hello,

PDF search is not working when PDF viewer is placed in modal. Is there any workaround for this?

Thanks.

PDFViewer

answered on 17 Feb 2022

5 answers

818 views

No records to display even when I can see data in Network Monitor

I'm using the MVC extensions to setup my Tree List

@(Html.Kendo().TreeList<SiteMapTreeModel>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(c => c.Title).Title("Title").Width(250);

columns.Add().Field(c => c.Url).Title("URL");

})

.DataSource(dataSource => dataSource

.Read(read => read.Action("SiteMapTree", "HomeAjax").Data("getServiceAndLocale"))

.Model(model =>

{

model.Id(m => m.Id);

model.ParentId(m => m.ParentId);

model.Field(m => m.Title);

model.Field(m => m.Url);

})

)

.AutoBind(false)

.Selectable(true)

.Deferred()

.Height(540))

... and using Chrome Dev Tools > Network, I see the following data in the AJAX method SiteMapTree, but the Tree List says "No records to display":

{"Data":[{"Id":1602,"ParentId":1000,"Title":"Dashboard","Url":"~/Dashboard/Start","hasChildren":true},{"Id":22,"ParentId":1000,"Title":"Rules","Url":"~/Rules/Start","hasChildren":true},{"Id":1,"ParentId":1000,"Title":"Administration","Url":"~/Admin/Start","hasChildren":true}],"AggregateResults":{},"Errors":null}

... and I am using ToTreeDataSourceResult() in the AJAX method to format the data (and ParentId of 1000 is the root of the tree).

What am I doing incorrectly?

FYI: I have set the AutoBind of the TreeList to false because I am calling dataSource.read(); when a dropdownlist item is selected. The Tree List has no context until the dropdown is selected.

Thanks,
--John

TreeList

answered on 17 Feb 2022

1 answer

90 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