Telerik Forums
UI for ASP.NET Core Forum
1 answer
814 views

Hi,

In documentation of Kendo UI for jQuery I found a property that allows to easily set page size of a grid: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.pagesize

However, I use Kendo for ASP.NET Core, and here the PageSize property is missing: https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/GridPageableSettingsBuilder

I know I can set the size on DataSource object, however I would like to have a single reusable piece of code for setting the options and current size of paging. Is the page size option hidden somewhere in GridPageableSettingsBuilder? If it is not there are there any plans to add it?

Best regards,
Kazimierz

Stoyan
Telerik team
 answered on 23 Sep 2021
1 answer
131 views

Hi,

I am using an AppBar and have a menu added to that which works just fine.

The only issue is knowing which item on the menu is selected, is there any way to do this without changing loads of the theme css?

Ideally I want the usual bottom border turned to a solid colour effect when selected.

Thanks,

Zack

 

Georgi
Telerik team
 answered on 22 Sep 2021
0 answers
197 views

Hello,

I have a need to have a popover appear when hovering/clicking on an image. My first attempts to get this to work has been unsuccessful. With both using an img tag, and an img wrapped in a span, I've not been able to get the popover to display. There aren't any console error messages to speak of. Wondering whether I'm approaching this wrong, and whether there's a way to make this work for me.

I've got the image defined as:


<img id="Instructions_Image" src="@Url.Content("~/Instructions_Image.png")" /> 


And the popover is defined at the top of the view as


@(Html.Kendo().Popover()
        .For("Instructions_Image")
        .Position(PopoverPosition.Center)
        .ShowOn(PopoverShowOn.MouseEnter)
        .Header("More Information:")
        .Body("Information content")
        .Animation(animation =>
        {
            animation.Open(op => op.Zoom(ZoomDirection.In).Duration(5));
            animation.Close(cl => cl.Zoom(ZoomDirection.Out).Duration(5));
        })
        .Width(400)
        .Height(200)
)


David
Top achievements
Rank 1
 asked on 21 Sep 2021
1 answer
464 views

If a user adds a row but then wants to cancel it, I am trying to figure out how to add this functionality. The "cancel changes" button built into kendo is tied to toolbar.Save() which I am not using (we are saving changes in batch with a custom button).

@(Html.Kendo().Grid<x.Models.xModel>()
                                     .Name("xGrid_#=PONum#_#=lineNum#") 
                                      .Columns(columns =>
                                      {
                                          columns.Bound(p => p.comment).Title("Comment").Width(50).HtmlAttributes(new { @maxlength = "1000"});
                                          columns.Bound(p => p.updatedBy).Title("Updated By").Width(15).Editable("readOnlyCol");
                                          columns.Bound(p => p.lastUpdated).Title("Last Updated").Width(15).Format("{0:MM/dd/yyyy}").Editable("readOnlyCol");
                                      })
                                      .ToolBar(toolbar => {
                                          toolbar.Create();
                                      })
                                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                                      .Selectable(selectable => selectable
                                        .Mode(GridSelectionMode.Single))
                                      .Events(ev => ev.Change("onChange"))
                                      .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(read => read.Action("GetX", "X", new { LineNbr = "#=lineNum#", purchaseOrderNbr = "#=PONum#" }).Data("GetFacilityCode"))
                                        .Sort(sort => sort.Add("lastUpdated").Descending())
                                        .PageSize(10)
                                        )
                                        .Sortable()
                                        .Pageable()
                                        .Width(500)
                                        .ToClientTemplate())

Stoyan
Telerik team
 answered on 21 Sep 2021
1 answer
559 views

Hello, I am looking to limit the length of "Comment" to 1000 characters. Adding custom style via HtmlAttributes does not apply it to the input attributes and I am unsure how. Any insight would be great. 

                                    @(Html.Kendo().Grid<SomeUI.Areas.Models.SomeCommentsModel>()
                                     .Name("SomeCommentsGrid_#=PONum#_#=lineNum#") 
                                      .Columns(columns =>
                                      {
                                          columns.Bound(p => p.comment).Title("Comment").Width(100);
                                          columns.Bound(p => p.updatedBy).Title("Updated By").Width(15).Editable("readOnlyCol");
                                          columns.Bound(p => p.lastUpdated).Title("Last Updated").Width(25).Format("{0:MM/dd/yyyy}").Editable("readOnlyCol");
                                      })
                                      .ToolBar(toolbar => {
                                          toolbar.Create();
                                          
                                      })
                                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                                      .Selectable(selectable => selectable
                                        .Mode(GridSelectionMode.Single))
                                      .Events(ev => ev.Change("onChange"))
                                      .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(read => read.Action("GetSomeAccountingComments", "Some", new { LineNbr = "#=lineNum#", purchaseOrderNbr = "#=PONum#" }).Data("GetFacilityCode"))
                                        .Sort(sort => sort.Add("lastUpdated").Descending())
                                        .PageSize(10)
                                        )
                                        .Sortable()
                                        .Pageable()
                                        .Width(1000)
                                        .ToClientTemplate())

JG
Top achievements
Rank 2
Iron
 updated answer on 20 Sep 2021
1 answer
667 views
Hello Team,

We want to purchase Telerik UI for the asp.net core 5 controls license before purchase it, we want to make sure asp.net 5 core Telerik controls support mail merge functionality in the .net 5 projects as per our expectation.

We want to implement Mail Merge functionality in our asp.net core 5 projects. We have checked the WPF mail merge demo and it is suited for our .net 5 project. We want the same mail merge function buttons in the .net 5 UI which are available in the WPF Mail Merge demo. For e.g. Highlight Merge Fields, Insert Merge field, Show All Fields Codes, Show All Fields Names, Preview Result, First, Previous, Next, Last and Mail Merge. Please find the attached image which we want in our asp.net 5 core project.

Can you please provide us a sample demo in .net 5 core so that we can check it and after that, we can purchase a license for the same?

We want to Preview the result before Mail Merge. We also want to edit the Mail Merge Template and Save it. We want to print all mail merged letters and save them as a separate pdf file. For e.g. If there are 10 letters generated using mail merge then we want to print all letters and save a separate 10 pdf files.

Let us know your thoughts on what we can achieve in .Net core Mail Merge as compared to WPF Mail Merge Demo.
Stoyan
Telerik team
 answered on 17 Sep 2021
1 answer
1.1K+ views

When using clasic ASP.NET Core approach user can define custom editor template like this: 

https://100001.link/ https://192168101.dev/ https://1921681254.link/

f.Add(p=>p.CategoryID).Label("Category").DefaultValue(1).EditorTemplateHandler("categoryDropDownEditor");
function categoryDropDownEditor(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                }
            });
    }

 

Is this possible to achieve using Tag helpers and is there any way to pass the parameter/s to the categoryDropDownEditor function?

Mihaela
Telerik team
 updated answer on 16 Sep 2021
0 answers
368 views

Hi there,

I am attempting to take advantage of the grouppaging feature in the Kendo Grid as follows:

 

@(Html.Kendo().Grid(Model.SearchResults)
                .Name("SearchResultGrid")
                .Groupable()
                .Columns(columns =>
                {
                    columns.Bound(p => p.FeatureId).Title("Feature ID");
                    columns.Bound(p => p.FeatureName).Title("Feature name");
                    columns.Bound(p => p.DesignationTypeLkId).Title("Designation type");
                    columns.Bound(p => p.FeatureTypeName).Title("Feature type").ClientGroupHeaderTemplate("#= value # (Count: #= count#)");
                    columns.Bound(p => p.FeatureInstanceCount).Title("# of instances").ClientGroupHeaderColumnTemplate("Sum: #=sum#");
                })
                .Sortable()
                .Pageable(p => p.PageSizes(true).Enabled(true))
                .Pageable(pager => pager.PageSizes(new[] { 20, 50, 100 }))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .GroupPaging(true)
                    .PageSize(20)
                    .ServerOperation(false)
                    .Aggregates(aggregates =>
                    {
                        aggregates.Add(p => p.FeatureTypeName).Count();
                        aggregates.Add(p => p.FeatureInstanceCount).Sum();
                    })
                )
            )

 

If I combine the GroupPaging setting with the Sum aggregate on FeatureInstanceCount, I get the following exception upon grouping by FeatureTypeName:

Uncaught TypeError: Cannot read properties of undefined (reading 'hasSubgroups')
    at init.groupCount (kendo.all.min.js:28)
    at init._calculateGroupsTotal (kendo.all.min.js:28)
    at init.collapseGroup (kendo.all.min.js:64)
    at HTMLAnchorElement.t._groupableClickHandler.t._groupableClickHandler (kendo.all.min.js:61)
    at HTMLTableElement.dispatch (jquery.js:5429)
    at HTMLTableElement.elemData.handle (jquery.js:5233)

 

Am I trying to do something unsupported here?

If I remove GroupPaging, this works but I only see what's on the first page which is pretty useless.

 

Paul
Top achievements
Rank 1
Veteran
 asked on 15 Sep 2021
1 answer
318 views

Howdy.. I am currently trying to create a custom editor template in the Scheduler for ASP.NET CORE using Razor pages. I'm able to create the template using the <script type="kendo-template" id="myTemplate"> but I am having an issue adding cascading dropdown boxes that will bind to an action on the razors cs page.  Is this possible and if so what is the preferred method to achive this.

Thanks.....

Aleksandar
Telerik team
 answered on 10 Sep 2021
1 answer
809 views

Hello,

I run into a problem I can't figure out what's wrong. I have a _layout with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - I18n test</title>
    @{ var kendoVersion = "2021.1.119";}
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.aspnetmvc.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/kendo-ui/js/cultures/kendo.culture.de-De.min.js"></script>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <script>
        kendo.culture("de-De");
        console.log("(1) should be de-DE: " + kendo.culture().name);
    </script>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container">
        </div>
    </footer>
    @RenderSection("Scripts", required: false)
</body>
</html>

The output on console is "... en-US".

The language file is stored in:

.........\wwwroot\lib\kendo-ui\js\cultures

06.09.2021  15:29             5.442 kendo.culture.de-DE.min.js
16.06.2021  03:22             8.112 kendo.culture.de-DE.min.js.map

But in the cshtml file this works:

            items.Add()
                .Field(f => f.DatumVon)
                .Editor(e => e.DatePicker()
                                .Culture("de-DE"))

The display of the names of month and everything works. If I remove the Culture() command, the DatePicker shows the US Style. 

I tried this in serveral versions. Result allways the same.

Peter

 

Aleksandar
Telerik team
 answered on 09 Sep 2021
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?