Questions on UI for ASP.NET Core Forum

3 answers

718 views

Hi All,

We have been using the UI ASP AJAX product to build up our WebApp during the past 5 years. We would like now to migrate to UI ASP Core. Is there some kind of tool from Telerik that would ease the process ?

We are aware that will require code editing at some point, but if there was some kind of Analyzer or something to indicate what lib must be replaced / updated / deleted or what telerik object / class should be used instead of the current one to achieve similar behavior etc .... This would be great help.

Cheers

Chris

General Discussions

answered on 02 Mar 2022

1 answer

499 views

OrgChart: Custom fields / Template with edit button

Hello,

two questions regarding the OrgChart ...

is it possible to use additional custom fields in the OrgChart or is that limited to Id, ParentId, Name, Title, Avatar, Expanded?

If a template is used, how to get the edit, create, delete menu displayed? is it possible to use an EditorTemplate?

Thank you for your help.

Best regard, Oliver

OrgChart

answered on 02 Mar 2022

1 answer

120 views

Image size in Editor in % not in px size

Hi,

When adding a large image (>1000px width) in the Editor, it looks fine on a laptop/tablet.

But when showing it on a mobile, it doesn't.

Is it possible to enter the image size in % so it auto rescales depending on the screen size?
Or is there another way to solve this problem?

Thanks...

Editor

answered on 25 Feb 2022

1 answer

117 views

Remove buttons from Editor Toolbar when showing on mobile

Hi,

I'm using the Editor with a lot of options/buttons and that works fine on a 'large' screen.

On a mobile it will split over 4 lines.
(Hardly no room for editing text left)

Is it possible to reduce the number of options/buttons in the toolbar when showing it on a mobile phone?
(I only want to keep the Bold/Italic/Underline buttons)

Thanks....

Editor

Toolbar

answered on 25 Feb 2022

1 answer

442 views

Asp net Core Grid - aggregates not work

Hello I want to use aggregate function in my grid but it not work. I read examples here but no success.

Can someone tell me why?

Here is my code:

 @(Html.Kendo().Grid(Model.RecipeLinesdetail)
                .Name("#grid")
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Columns(c=>{
                    c.Bound(c=>c.RecipeLineId).Hidden(true);
                    c.Bound(c=>c.ChemistryRecipeViewModel.ChemistryName)
                        .EditorTemplateName("ChemistryEditor")
                        .Width(500)
                        .ClientTemplate("#= ChemistryRecipeViewModel.ChemistryName # <input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".ChemistryRecipeViewModel.ChemistryId' value='#= ChemistryRecipeViewModel.ChemistryId #' />"+
                                                        "<input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".ChemistryRecipeViewModel.ChemistryName' value='#= ChemistryRecipeViewModel.ChemistryName #' />");
                    c.Bound(c=>c.Dosage)
                          .EditorTemplateName("DosageEditor")                          
                          .ClientTemplate("#= kendo.toString(Dosage,\"n3\")# <input type='hidden' name='RecipeLinesdetail[#=index(data)#].Dosage' value='#= Dosage #' />")
                          .ClientFooterTemplate("Dávkování celkem: #=sum#");
                    c.Bound(c=>c.Units.UnitName)
                        .EditorTemplateName("UnitsEditor")
                        .Title("Jednotka výpočtu")
                        .ClientTemplate("#= Units.UnitName # <input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".Units.UnitId' value='#= Units.UnitId #' />"+
                            "<input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".Units.UnitName' value='#= Units.UnitName #' />");
                    c.Bound(c=>c.Rounded)
                        .EditorTemplateName("DosageEditor")
                        .ClientTemplate("#= kendo.toString(Rounded,\"n3\") # <input type='hidden' name='RecipeLinesdetail[#=index(data)#].Rounded' value='#= Rounded #' />");
                    c.Bound(c=>c.Units2.UnitName)
                        .EditorTemplateName("Units2Editor")
                        .Title("Jednotka vážení")
                        .ClientTemplate("#= Units2.UnitName # <input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".Units2.UnitId' value='#= Units2.UnitId #' />"+
                            "<input type='hidden' name='RecipeLinesdetail[#=index(data)#]"+
                            ".Units2.UnitName' value='#= Units2.UnitName #' />");
                    c.Bound(c=>c.Comment)
                        .ClientTemplate("#= Comment # <input type='hidden' name='RecipeLinesdetail[#=index(data)#].Comment' value='#= Comment #' />");
                    c.Command(command => command.Destroy()).Width(150);
                })
                .DataSource(dataSource => dataSource
                .Ajax()
                .Aggregates(agr=>{
                    agr.Add(c=>c.Dosage).Sum();
                })
                .Batch(true)
                .Create(create => create.Action("Create", "Recipes"))
                .Destroy(destroy => destroy.Action("Destroy", "Recipes"))
                .Model(m =>{
                    m.Id(id=>id.RecipeLineId);
                    m.Field(id=>id.RecipeLineId).Editable(false).DefaultValue(0);
                    m.Field(f=>f.ChemistryRecipeViewModel).DefaultValue(
                       new ChemistryRecipeViewModel{
                           ChemistryId="0",
                           ChemistryName=""
                       }); 
                   m.Field(f=>f.Units).DefaultValue(
                       new UnitRecipeViewModel{
                           UnitId=0,
                           UnitName=""
                       }); 
                    m.Field(f=>f.Units2).DefaultValue(
                       new UnitRecipeViewModel{
                            UnitId=0,
                           UnitName=""
                       });
                    m.Field(f=>f.Comment).DefaultValue("");
                }))

                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Excel();
                    toolbar.Search();
                })

                .Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
                .Editable())

And last point is I would like to have it works also when user add or change value

Is there possibility to update Sum when cell change?

Many thx in advance

Lukas

Grid

answered on 23 Feb 2022

0 answers

147 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

322 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.3K+ 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

160 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

107 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