Telerik Forums
UI for ASP.NET Core Forum
4 answers
131 views

Hi,

I'm loading dynamically a view from MVC inside my angular application, all the kendo controls renders ok but if the view contains a window the window content apears 2 times , one inside the window and other at the end of the body (Image attached).

The same problem happens with a grid with editor popup (image 2 atached)

 

I followed the net core mvc getting started tutorial but for include all the js files I added this lines inside angular.json

"scripts": [
  {
    "input":  "../Scripts/AppScripts/jquery.js",
    "inject": false,
    "bundleName": "jquery"
  },
  {
    "input": "../Scripts/AppScripts/kendo.all.min.js",
    "inject": false,
    "bundleName": "kendo.all.min"
  },
  {
    "input": "../Scripts/AppScripts/kendo.aspnetmvc.min.js",
    "inject": false,
    "bundleName": "kendo.aspnetmvc.min"
  },
  {
    "input":  "../Scripts/AppScripts/kendo.culture.de-DE.min.js",
    "inject": false,
    "bundleName": "kendo.culture.de-DE.min"
  }
]

 

and in my index file inside head tag:

<script src="jquery.js"></script>
<script src="kendo.all.min.js"></script>
<script src="kendo.aspnetmvc.min.js"></script>
<script src="kendo.culture.de-DE.min.js"></script>

 

I created a sample project to reproduce the problem:
https://drive.google.com/file/d/1rydILf7WvVDiLUGZGRBfl4wjZihw2kbw/view?usp=sharing

 

inside home component.ts comment or un comment the lines :

this.loadUrl('/home/windowDemo');
// this.loadUrl('/home/index');

to see the problem in a view with a single window or in a sample table 

Jochen
Top achievements
Rank 1
 answered on 10 Aug 2020
1 answer
243 views

Hi there,

Recently started using breadcrumb in a ASP.net core application, so far i have no issues with the rendering side of things nor adding items to the breadcrumb.

 

The main issue i am having is with the breadcrumb persisting during the session, meaning that i cant seem to be able to add to the list of items on entering a new page without the previous ones (except for the root item) being forgotten about.

in _layout.cshtml:

@(Html.Kendo().Breadcrumb()
                .Name("breadcrumb")
                .Navigational(true
                 
                )
                .Items(items =>
                {
                    items.Add()
                        .Type(BreadcrumbItemType.RootItem)
                        .Href("/")
                        .Text("Home")
                        .Icon("home")
                        .ShowIcon(true)
                        .ItemClass("root")
                        .IconClass("root")
                        .LinkClass("root");
                })
            )

 

script present in other pages (specifics in this code change based on the page of course):

$(function () {
            var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
            breadcrumb.items().push({ href: "/Product/Groups", itemClass: "item", type: "item", text: "Product Groups", showText: true, showIcon: false });
            breadcrumb.refresh();
        });
Neli
Telerik team
 answered on 10 Aug 2020
1 answer
408 views

I have a grid that I want to bind to local data.  When I try to add a record, the widget tries to make an Ajax post back, instead of adding to the IEnumerable<T>.

I'm running ASP Dot Net Core 3.1 with Razor Pages and Telerik 2020.2.617

My Razor Page is as follows:

@(Html.Kendo().Grid<CreateModel.ModelItem>().Name("grid")
    .AutoBind(true)
    .BindTo((IEnumerable<CreateModel.ModelItem>)Model.Data.LineItems)
    .Columns(cols =>
    {
        cols.Bound(c => c.Id);
        cols.Bound(c => c.Line);
        cols.Bound(c => c.Description);
        cols.Bound(c => c.Qty);
        cols.Bound(c => c.Value);
        cols.Command(c =>
        {
            c.Edit();
            c.Destroy();
        });
    })
    .Editable(GridEditMode.InLine)
    .Pageable()
    .DataSource(ds=>
        ds.Ajax()
        .Batch(false)
        .ServerOperation(false)
        .Model(m=>
        {
            m.Id(id => id.Id);
            m.Field(f => f.Id).DefaultValue(Guid.Empty);
            m.Field(f => f.Line).DefaultValue(1);
            m.Field(f => f.Description);
            m.Field(f => f.Qty).DefaultValue(1);
            m.Field(f => f.Value).DefaultValue(0.00m);
        })
    )
    .ToolBar(t=>
    {
        t.Create().Text("Add Line Item");
        t.Save();
    })
)
Anton Mironov
Telerik team
 answered on 07 Aug 2020
6 answers
1.3K+ views

hi ..

i have a dto class called GroupListDto with just three fields

public class GroupListDto
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

 

i use this class as kendo grid model ..

when i write my actionresult in below manner . my model field is empty

public ActionResult Create([DataSourceRequest] DataSourceRequest request, GroupListDto group)

 

but when is use GroupListDto class fields instead , the fields are filled with correct datas

public ActionResult Create([DataSourceRequest] DataSourceRequest request, string Title , string Description)

 

does anyone know what is the problem ?

why i cant get data in my dto model , but i get data in its fields !?


Petar
Telerik team
 answered on 06 Aug 2020
1 answer
234 views

I am using .net core 3.5 and razor pages.   I have a file upload control that is calling OnPost even when the control explicitly says to call a different method name.

  @(Html.Kendo().Upload()
            .Name("files")
            .Multiple(false)
            .Async(a => a
                .Save("Async_Save", "New", new { Question = DebtorDropBox.Web.UI.Code.Question.DriversLicense })
                .AutoUpload(true)
            )
            .Events(e => e
                .Success("onSuccess")
                .Upload("onUpload")
                .Error("onError")
            )
            .Validation(validation => validation.AllowedExtensions(new string[] { ".jpg" }))
            .Validation(validation => validation.MaxFileSize(4000000))
        )

      for testing purposes I have added the following three methods to my page and no matter what It keeps calling OnPost.    Is there something I should be doing? 

        public async Task<ActionResult> Async_Save(IEnumerable<IFormFile> files, Question question)
        {
            return Page();
        }

        public async Task<ActionResult> OnPostAsync_Save(IEnumerable<IFormFile> files, Question question)
        {
            return Page();
        }

        public async Task<ActionResult> OnPost(IEnumerable<IFormFile> files, Question question)
        {
            return Page();
        }

Martin
Telerik team
 answered on 05 Aug 2020
9 answers
1.6K+ views

How do I handle an exception that occurs when generating the data to be sent to the grid?  I've seen an example of a call to a Javascript "error_handler" method.  Is that my only option?

<kendo-grid name="grid">
    <datasource type="DataSourceTagHelperType.Ajax" on-error="Error">
        <transport>
            <read url="Home/GetOrgs" />
        </transport>
    </datasource>
    ...
</kendo-grid>

 

public IActionResult GetOrgs([DataSourceRequest] DataSourceRequest request)
{
    int x = 0; int r = 10 / x;
}

 

 

Anton Mironov
Telerik team
 answered on 04 Aug 2020
1 answer
173 views

I have a grid very similar to the one in this telerik example where I am using 3 different client templates to populate and bind 3 drop downs in my grid:

https://demos.telerik.com/aspnet-core/grid/editing-custom

My dropdowns are: Category, Department, Configuration

 

So my grid is defined like this with custom editors

columns.Bound(e => e.Category).ClientTemplate("#=Category.CategoryName#").Title("Category");
columns.Bound(e => e.Department).ClientTemplate("#=Department.DepartmentName#").Title("Department");
columns.Bound(e => e.Configuration).ClientTemplate("#=Configuration.ConfigurationName#").Title("Configuration");

And the model I'm binding to looks just like in the example:

[System.ComponentModel.DataAnnotations.UIHint("Category")]
public CategoryViewModel Category {
    get;
    set;
}
 
[System.ComponentModel.DataAnnotations.UIHint("Department")]
public DepartmentViewModel Department {
    get;
    set;
}
 
[System.ComponentModel.DataAnnotations.UIHint("Configuration")]
public ConfigurationViewModel Configuration{
    get;
    set;
}

 

I need the dropdowns to cascade.....choose a Category, it loads Departments associated with that category, choose a Department, it loads configurations associated with that department. So my code in the custom editor is simply (this is for category, for department it passes the selected categoryId in the read action , etc)

@model DMA.Model.CategoryViewModel
<script>
    function onCategoryChange(e) {
       $("#Department").data("kendoDropDownList").dataSource.read();   
    }
</script>
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .DataSource(source => {
         source.Read(read =>
            {
                read.Action("GetCategories", "Wizard");
            });
        }).Events(e => e.Change("onCategoryChange"))
)

 

And visually works correctly, choosing a category will re-fill the department options and by default the first item is now selected. But if you go to save it at this point, even though the first item is selected, the model does not reflect that: e.model.Department = null. You have to physically choose an item from the Department drop down to get it to set that model value correctly. What is going on here? Why is not binding the model to the selected item when it refills? 

 

 

Anton Mironov
Telerik team
 answered on 03 Aug 2020
3 answers
798 views

Afternoon

 

Using Package Telerik.UI.for.AspNet.Core(2020.2.617)

 

Goal: 

I want to switch Kendo Menu to use k-i-menu rather than font awsome icon.

 

Problem

It is always blank when i reference the k-i-menu. This is because it adds k-sprite into the span it generates and that seems to cause the issues

e.g. <span class="k-sprite k-icon k-i-menu k-icon-32"></span>

Example Code

<span class="k-icon k-i-menu k-icon-32"></span> <-- this shows bars
<div style="padding-right: 5px" class="k-content">
    @(Html.Kendo().Menu().Name("NavMenu").Items(items =>
    {items.Add()
            .Items(innerChilderen =>
            {
                innerChilderen.Add().Text("Reports").Url("/Something");
            }).SpriteCssClasses("k-icon k-i-menu k-icon-32");  <--- this is blank
    }))
</div>

 

I assumed it would be an easy switch since it was already working with font awesome. Not sure if i'm missing something as far as using the kendo icons with this menu. Looking forward to your thoughts.

 

 

 

 

 

Dimitar
Telerik team
 answered on 03 Aug 2020
3 answers
484 views

After upgrading from 2.2 to 3.1 my grid control no longer works.  I am available for a phone call if that is easier.

Note: I have success with Html.Kendo().Menu() but also failure on Html.Kendo().TreeList<Group>().  I verified I have valid data.

Project:

<Project Sdk="Microsoft.NET.Sdk.Web" ToolsVersion="15.0">
 
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
    <AssemblyName>Gsi.Portal</AssemblyName>
  </PropertyGroup>
 
  <ItemGroup>
    <Content Update="nlog.config" CopyToOutputDirectory="PreserveNewest" />
  </ItemGroup>
 
  <ItemGroup>
    <PackageReference Include="bootstrap" Version="4.5.0" />
    <PackageReference Include="IdentityModel" Version="4.3.1" />
    <PackageReference Include="IdentityServer4" Version="4.0.3" />
    <PackageReference Include="Microsoft.ApplicationInsights" Version="2.14.0" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Abstractions" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="3.1.6" />
    <PackageReference Include="Microsoft.AspNetCore.Http.Extensions" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Identity" Version="2.2.0" />
    <PackageReference Include="Microsoft.Azure.KeyVault.Core" Version="3.0.5" />
    <PackageReference Include="Microsoft.Azure.Storage.Blob" Version="11.1.7" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.3" />
    <PackageReference Include="System.Text.Encodings.Web" Version="4.7.1" />
    <PackageReference Include="System.Threading.Tasks.Extensions" Version="4.5.4" />
    <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2020.2.617" />
    <PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
    <PackageReference Include="Telerik.Web.PDF" Version="2020.2.617" />
    <PackageReference Include="NLog.Web.AspNetCore" Version="4.9.2" />
  </ItemGroup>

Shared._Layout:

I note that on this training your header looks different than mine.  Do I need to completely rework this?

https://docs.telerik.com/aspnet-core/getting-started/first-steps#adding-reference-to-kendomvcui

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Glossary.Company Portal - @ViewData["Title"]</title>
 
    <link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
 
 
    <environment names="Development">
        <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
              asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    <link rel="stylesheet" type="text/css" href="~/css/GsiWebPortalBootstrapTheme.css" />
</head>

_ViewImports.cshtml

@using Gsi.Portal
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc

 

 

Grid:

@(Html.Kendo().Grid<Person>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(command => command
            .Custom("Detail")
            .Click("goDetail"))
            .Width(Glossary.Portal.ButtonWidth);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("IndexJson", "Users")
            .Data("getGridData"))
        .Model(m => m.Id(p => p.Id))
    ))

Callback:

if (response.IsSuccess)
{
    var persons = response.Result;
    if (persons != null)
    {
        var dsResult = await persons.ToDataSourceResultAsync(request);
        return Json(dsResult);
    }
    else
    {
        return CustomResponseToError(response);
    }
}

 

Nikolay
Telerik team
 answered on 30 Jul 2020
5 answers
302 views

I'm migrating some code from netFramework asp.net to asp.net core and I found some unexpected behavior with an editor used everywhere in my old code.

I'm bounding a timestamp property in a table like this:

columns.Bound(m => m.TimeSpan);

 

And I have an editor template for timestamps:

@model TimeSpan
 
@Html.Kendo().IntegerTextBoxFor(model=>model.Hours).Spinners(false).HtmlAttributes(new {style = "width: 30px" }).Placeholder("HH").Format("00") :
@Html.Kendo().IntegerTextBoxFor(model => model.Minutes).Min(0).Max(59).HtmlAttributes(new {style = "width: 30px;" }).Placeholder("MM").Spinners(false).Format("00")

 

If I load the page containing the table y get an exception:

System.NullReferenceException: Object reference not set to an instance of an object.
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ExpressionMetadataProvider.<>c__DisplayClass0_0`2.<FromLambdaExpression>g__modelAccessor|0(Object container)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExplorer.get_Model()
   at Kendo.Mvc.UI.Fluent.WidgetFactory`1.NumericTextBoxFor[TValue](Expression`1 expression)
   at Kendo.Mvc.UI.Fluent.WidgetFactory`1.IntegerTextBoxFor(Expression`1 expression)
.....

 

The EditorTemplate works normally if I use in other pages like:

@Html.EditorFor(m=>m.TimeSpan)

 

 

Thanks

Petar
Telerik team
 answered on 29 Jul 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?