Telerik Forums
UI for ASP.NET Core Forum
0 answers
345 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
302 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
782 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
1 answer
264 views
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?
Mihaela
Telerik team
 answered on 08 Sep 2021
1 answer
222 views

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


Tsvetomir
Telerik team
 answered on 07 Sep 2021
1 answer
197 views

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.

Tsvetomir
Telerik team
 answered on 06 Sep 2021
1 answer
972 views

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

 

 

Tsvetomir
Telerik team
 updated answer on 02 Sep 2021
0 answers
146 views

I have the below example:

As you can see, I check and pre Save Changes, everything works ok. I check, hit Cancel Changes and we get back to its original state.

After I save/commit to the db and then hit cancel changes, the grid updates some check boxes (incorrectly) and also updates the items.

What's going on here?!

Here's my grid code


@(Html.Kendo().Grid<BinWithType>
    ()
    .Name("gridBins")
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => {
    model.Id(p => p.Bin_ID);
    model.Field(p => p.SiteHasBin).Editable(true);
    model.Field(p => p.Bin_Type_Name).Editable(false);
    model.Field(p => p.Bin_Type_Group).Editable(false);
    })
    .Batch(true)
    .ServerOperation(false)
    .Read("Bins_Read", "MySites", new { site_Id = Model.Site_Id })
    .Update("Bins_Update", "MySites", new { site_Id = Model.Site_Id })
    )
    .Columns(columns =>
    {
    columns.Bound(site => site.SiteHasBin).Filterable(false);
    columns.Bound(site => site.Bin_Type_Name).Filterable(false);
    columns.Bound(site => site.Bin_Type_Group).Filterable(filterable => filterable.UI("groupFilter"));
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()))
    )
    .Sortable()
    .ToolBar(toolbar =>
    {
    toolbar.Save();
    })
    )

Further strange behaviour: 

When I do a 'standard' batch update this works as expected see first half of gif above. However, when I do one by one, I appear to just replicate the first.

 

Here is my my Read & Update code:

 


   public ActionResult Bins_Read(int site_Id, [DataSourceRequest]DataSourceRequest request)
        {
            return Json(Read(site_Id).ToDataSourceResult(request));
        }


        public IEnumerable<BinWithType> Read(int siteId)
        {
            return GetAllAsync(siteId).Result.ToList();
        }

        public async Task<IList<BinWithType>> GetAllAsync(int siteId)
        {
            if (Session.GetObjectFromJson<IList<BinWithType>>("BinWithType") != null)
            {
                Session.Remove("BinWithType");
                _session.Clear();
            }

            var result = Session.GetObjectFromJson<IList<BinWithType>>("BinWithType");

            var client = new BinsClient(new HttpClient());
            var bins = await client.GetBinsWithTypeBySiteIdAsync(siteId);

            result = bins.ToList();
            Session.SetObjectAsJson("BinWithType", result);
            return result;
        }

        public ActionResult Bins_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<BinWithType> bins)
        {
            var client = new BinsClient(new HttpClient());
            foreach (var bin in bins)
            {
                if (bin.Bin_ID > 300)
                {
                    DeleteBin(bin, client);
                }


                if (bin.Bin_ID < 300)
                {
                    PostNewBin(bin, client);
                }
            }
            return Json(Read(bins.FirstOrDefault().Site_ID).ToDataSourceResult(request));
        }

        private static Task<Bin> DeleteBin(BinWithType bin, BinsClient client)
        {
            return client.DeleteBinByIdAsync(bin.Bin_ID);
        }

        [HttpPost]
        private static Task<Bin> PostNewBin(BinWithType bin, BinsClient client)
        {
            var thisBin = new Bin
            {
                Site_ID = bin.Site_ID,
                Bin_Type_ID = bin.Bin_Type_ID,
                Comments = $"Added { DateTime.Now.ToShortDateString() }"
            };
            return client.PostBinAsync(thisBin);
        }


 

Richard
Top achievements
Rank 1
 updated question on 02 Sep 2021
1 answer
1.0K+ views

Hey everybody,

I'm experimenting with the Kendo Forms and I recognized that building/rendering the form with razor all labels showing the property name itself instead the display name I set in the model.

@(Html.Kendo().Form<Provider>()
            .Name("form")
            .Validatable(v =>
            {
                v.ValidateOnBlur(true);
                v.ValidationSummary(vs => vs.Enable(false));
            })
            .Items(items =>
            {
                items.Add().Field(x => x.Description).Editor(x => x.Editor());
                items.Add().Field(x => x.Url);
            })
        )

My model has set a display name for the properties.

    public class Provider
    {
        [Display(Name = "Kurzbeschreibung")]
        public string Description { get; set; }

        [Display(Name = "Link zur Website")]
        public string Url { get; set; }
    }
The view is showing the property name "Description" als label text instead the display name "Kurzbeschreibung". Is this behavior expected? If not I have to set for all fields I'm gonna use a title text for the frondend. It would be easier und beautiful when the form could automatically use the display name.
Aleksandar
Telerik team
 answered on 02 Sep 2021
1 answer
632 views

I am using a nested grid. The nested grid is inside of script tags and looks like this. For some reason when rendering it throws "Unexpected Token '<'. Im unsure why. It renders fine if I pull it out and remove .ToClientTemplate()

<script id="template"> @(Html.Kendo().Grid<Student>() .Name("Student#=Student_ID#") .Width(1500) .HtmlAttributes(new { style="margin-right:20px;height: fit-content;font-size:small" }) .Columns(columns => {

columns.Bound(o => o.StudentName).Width(300) columns.Bound(o => o.TimeStamp).Width(300).Title("Date").Format("{0:G}"); columns.Bound(o => o.Details).Width(900); }) .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .PageSize(10) .Read(read => read.Action("GetDetails", "Grid", new{ studentName= "#=StudentName#" })) ) .Pageable(x => x.Refresh(true)) .Sortable() .ToClientTemplate() ) </script>


Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 30 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?