Questions on UI for ASP.NET Core Forum

1 answer

553 views

How to set MaxLength of input in child grid (.net core)?

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())

Grid

updated answer on 20 Sep 2021

1 answer

657 views

Mail merge in ASP .net core 5

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.

Editor

answered on 17 Sep 2021

1 answer

1.0K+ views

Use editor template handler with tag helper

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?

General Discussions

updated answer on 16 Sep 2021

0 answers

347 views

Grid issue with GroupPaging and GroupHeader Aggregate

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.

Grid

asked on 15 Sep 2021

1 answer

302 views

Cascading Dropdown in Scheduler Editor for CORE Razor Pages

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.....

Scheduler

answered on 10 Sep 2021

1 answer

783 views

kendo.culture("de-De") does not change culture

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

Localization

answered on 09 Sep 2021

1 answer

265 views

How can I autosize a textarea in .net core depending on the text inside?

I have a textarea that displays a specific column's text depending on which row is selected. How can I have this textarea autosize depending on its contents?

TextArea

answered on 08 Sep 2021

1 answer

222 views

Responsive Panel (Core)

I'm new to telerik and MVC. I come from a webforms background.

I wanted to start out with a website that has a sidebar on the left and a menu across the top. The Responsive Panel seems to fit the bill. I'm accustomed to creating a master page in webforms. How do I create something similar to a master page in a core/MVC website where when I make a selection from the item list in the left side bar, it updates the content on the right (iframe?)

ResponsivePanel

answered on 07 Sep 2021

1 answer

198 views

Skeleton container on hierarchical grid

Hello guys,

I've noticed that when using the Skeleton container on hierarchical grid the last column in the grid doesn't show the loading animation. Is there a way around this problem?

Thanks.

Grid

SkeletonContainer

answered on 06 Sep 2021

1 answer

975 views

How do you make a cell/dataitem fully dirty?

Hello everyone

I have the following bound column set up:

  columns.Bound(site => site.SiteHasBin).ClientTemplate("#=dirtyField(data,'SiteHasBin')# #:SiteHasBin#").ClientHeaderTemplate("<a class='k-link'>Bin Present? - Select all</><input style='margin-left:10px;' id='checkAll' type='checkbox' onclick='checkAll(this)' />").Sortable(false);

With the associated js:

function dirtyField(data, fieldName) {
    if (data.dirty && data.dirtyFields[fieldName]) {
        return "<span class='k-dirty'></span>"
    }
    else {
        return "";
    }
}


function checkAll(input) {
    var grid = $("#gridBins").data("kendoGrid");
    var items = grid.items();
    items.each(function () {
        var dataItem = grid.dataItem(this);
          if (dataItem.SiteHasBin != input.checked) {
              dataItem.SiteHasBin = input.checked;
        }
        dataItem.dirty = true;
    })
    grid.saveChanges();
    grid.dataSource.sync();
}

However, I cannot for the life of me get the cell into it's dirty state properly which would then allow me to use the Save functionality.

As you can see from the above. It updates the values accordingly but unlike single clicking, doesn't dirty the cell / data item.

Could someone point me in the right direction please?

Rich

Grid

updated answer on 02 Sep 2021