Questions on UI for ASP.NET Core Forum

1 answer

377 views

I would like to create the following type of chart:

I have set the BaseUnit to weeks but the label prints as 10/31, 11/7, 11/14 etc

   @(Html.Kendo().Chart<FlightLog.Models.Charts.HoursByWeek>()
        .Name("chart")
        .Theme("bootstrap")
        .Title("Monthly Hours")
        .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        )
        .DataSource(ds => ds
        .Read(r => r.Url(Url.Page("./DashBoard", "HoursPerWeek")).Type(HttpVerbs.Post))
        )
        .Series(series =>
        {
            series.Column(model => model.Hours).CategoryField("Date");
        })
        .CategoryAxis(axis => axis.Date()
        .Labels(labels => labels.Rotation(-45))
        .Labels(labels => labels.DateFormats(dateFormat => dateFormat.Months("MMM")))
        .BaseUnit(ChartAxisBaseUnit.Weeks)

        .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
        )
        )

Chart

answered on 24 May 2023

1 answer

189 views

Display Child Records in Grid Within Window

Hi,

I have a use case where a user can click on a link or button in a parent record in a Kendo Grid, which causes a Kendo Window to become visible and display within it another Kendo Grid listing the child records corresponding to the record clicked in the parent page. In this case, the parent Grid would display a list of Document records; When the user clicks on a link or button in the row of a particular Document, a Window pops up with the Version History records for the Document in another Grid.

Should the Version History Grid be in a partial view, as suggested in https://stackoverflow.com/questions/28772589/load-kendo-grid-in-kendo-window, and then brought into the Window, which is constructed in JavaScript, or is there a better/more standard approach, preferably one that uses html helpers?

Also, how do I set it up so that the Grid in the Window only displays Version History pertaining to the Document that was clicked?

If anybody has links to examples/samples that I can research, or can answer my questions, I'd be most appreciative. I think that similar use cases just use the Grid Hierarchy, but unfortunately it's not an option for my use case.

Thanks!

Taylor

Grid

Window

updated answer on 23 May 2023

1 answer

257 views

Is it possible to use the file manager component to manage a SharePoint document library?

I have a request to add SharePoint document management to an existing ASP .NET Core web application and since the project already has Telerik UI in it I'd like to use the File Manager component. I can't find any samples or guidance on how I would attempt to achieve this. Is it even possible?

FileManager

answered on 23 May 2023

1 answer

299 views

Dynamically adding/removing icons to tab headers at runtime

I have a tab strip with several tabs that contains various input fields for a user to modify and I'd like to show some sort of "edit" icon in the header of those tabs which have been modified to give the user a more visual indication of what has been changed before they save any changes.

I can see from the docs that you can set "ImageUrl" or "SpriteCssClasses" on a tab header when setting it up, but in this case, I'm looking at adding/removing images based on changed events from the widgets contained within the tab and can't seem to find any documented way of doing this.

Playing around with things I can do something like the following (where #TabStrip is the name given to my tab strip widget) to add a pencil icon to the header:

$("#TabStrip-tab-1 .k-link").prepend("<span class=\"k-icon k-i-edit\"></span>")

Which will give the following:

This is what I'm after, but I'm ideally looking for a way that is more "official" and supported rather than having to poke around inside the DOM of the tab strip itself.

Is there anything that could be used here or is that JS snippet above the best way to do this?

TabStrip

answered on 22 May 2023

1 answer

87 views

Calendar culture in Grid ASP Core

I'm having problem setting culture in a calendar called from Grid.
Below is my sample:

<script>
     kendo.culture("@Model.userSetting.culture");
</script>

....

       @(Html.Kendo().Grid<MyProject.Model.ModelName>()
                        .Name("gTasks")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Width(100).Visible(false);
                            columns.Bound(p => p.taskID).Width(100).Visible(false);
                            columns.Bound(p => p.Start).Format("{0:" + Model.userSetting.dateFormat + "}").Sortable(true).Width(100).Title("Start").EditorTemplateName("GridCalendarTemplate");
                            columns.Bound(p => p.End).Format("{0:" + Model.userSetting.dateFormat + "}").Sortable(true).Width(100).Title("End").EditorTemplateName("GridCalendarTemplate");
                         })
)

....

In Views/Shared/EditorTemplates/GridCalendarTemplate.cshtml

@model DateTime?
@{
    var culture = Context.Session.GetString("culture");

}
<script>
    kendo.culture("@culture");
</script>
@(Html.Kendo().DatePickerFor(m => m)
    .Culture("@culture")
    .HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }))

Unfortunately, the calendar format does not accept culture "pl-PL"

Calendar

Grid

answered on 21 May 2023

1 answer

82 views

Expanding 2nd level hierarchy in Kendo Grid removes column headers

Hi Telerik,

I'm back with the next question :).

I have a Kendo Grid displaying Main Orders. This Grid has 2 levels of hierarchy. Each Main Order has at least one order, but can have multiple orders.
Each of these orders has at least one guy working on the order, but there could be multiple people working an this specific order => this is the 2nd level of hierarchy.

As long as the 2nd level contains more than 1 person, everything is fine, everything is unfolding properly and displaying properly.

But when there is only one person in the 2nd level (no matter how many orders in the 1 level), unfolding the 2nd level removes the column headers from 2nd level, and all data from 1st level (the order).

So:
1 main > 1 order > 1 person > error
1 main > 10 orders > 1 person only per order > error
1 main > x orders > 2+ persons > ok

And to make it even more curious, this is not a static issue. It happens at 80% of the entries, but not at all of them.

When the issue appears, My Grid shows the main order perfectly, but it only shows the column headers from level 1, filled with the data of level 2.....

Attached is a picture of the issue. Surrounded in red you will see the issue, one row below, surrounded in yellow, the proper display.

Grid:

@(
Html.Kendo().Grid<UfaMainOrder>()
        .Name("grid")
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MainOrderComment"))
        .Columns(columns =>
        {
            columns.Bound(e => e.MainOrderNumber).Width(300).Title("Hauptauftragsnummer").Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true));
            columns.Bound(e => e.InvoiceDateMainOrder).Format("{0: dd.MM.yyyy}").Width(300).Title("Rechnungsdatum (Hauptauftrag)");
            columns.Bound(e => e.TargetFruSum).Width(200).Title("Summe AW Soll");
            columns.Bound(e => e.ActualFruSumEval).Width(200).Title("Summe AW Ist (Bew)");
            columns.Bound(e => e.FruSumDiffEval).Width(200).Width(200).Title("Δ Summe Soll-Ist (Bew)");
            columns.Bound(e => e.MainOrderResearchComment).Width(200).Title("Recherche-Ergebnis").ClientTemplate("#= MainItems_Databound(MainOrderResearchComment)#");
            columns.Command(command => { command.Edit(); }).Width(150).HtmlAttributes(new { style = "text-align: center" });
            columns.Bound(e => e.MainOrderComment).Width(500).Title("Bemerkung");
        })
        .Pageable(p => p
            .ButtonCount(5)
            .PageSizes(new[] { 10, 25, 50 })
            .Refresh(true)
            .Input(true)
        )
        .ColumnResizeHandleWidth(5)
        .ColumnMenu()
        .Sortable()
        .Resizable(resize => resize.Columns(true))
        .Scrollable(s => s.Height("auto"))
        .Filterable()
        .Reorderable(reorder => reorder.Columns(true))
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Import DMS").IconClass("k-icon k-i-file-excel").HtmlAttributes(new { id = "customCommand" });
            toolbar.Custom().Text("Ansicht speichern").IconClass("k-icon k-i-export").HtmlAttributes(new { id = "save" });
            toolbar.Custom().Text("Ansicht laden").IconClass("k-icon k-i-import").HtmlAttributes(new { id = "load" });
            toolbar.Search();

        })
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(50)
            .Model(model => 
            {
                model.Id(o => o.MainOrderNumber);
                model.Field(p => p.MainOrderNumber).Editable(false);
                model.Field(p => p.InvoiceDateMainOrder).Editable(false);
                model.Field(p => p.TargetFruSum).Editable(false);
                model.Field(p => p.ActualFruSumEval).Editable(false);
                model.Field(p => p.FruSumDiffEval).Editable(false);
                model.Field(p => p.MainOrderResearchComment).Editable(false);
                model.Field(p => p.MainOrderComment).Editable(true).DefaultValue("");
            })
            .Read("Read", "UFA")
            .Update("Update", "UFA")
        )
        
)

Level 1:

    @(
        Html.Kendo().Grid<UfaOrder>()
                .Name("grid_#=IdMainOrder#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderNumber).Title("Auftragsnummer");
                    columns.Bound(o => o.OrderType).Title("Auftragsart");
                    columns.Bound(o => o.InvoiceNo).Title("Rechnungsnummer");
                    columns.Bound(o => o.InvoiceDate).Format("{0: dd.MM.yyyy}").Title("Rechnungsdatum");
                    columns.Bound(o => o.TotalTargetFru).Title("Summe AW Soll");
                    columns.Bound(o => o.TotalActualFruEval).Title("Summe AW Ist (Bew)");
                    columns.Bound(o => o.TotalFruDiffEval).Title("Summe Δ Soll-Ist (Bew)");
                    columns.Bound(o => o.ResearchComment).Title("Recherchergebnis bei Faktura").ClientTemplate("\\#= LineItems_Databound(ResearchComment)\\#");
                    columns.Bound(o => o.OalComment).Title("Kommentar aus OAL");
                })
                .ClientDetailTemplateId("template2")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    @*.Sort(s => s.Add("OrderNumber").Ascending())*@
                    .Read(read => read.Action("ReadOrders", "UFA", new { idMainOrder = "#=IdMainOrder#" })
                    )
                )

                .ToClientTemplate()
        )

Level 2:

    @(Html.Kendo().Grid<UfaOrderMechanic>()
                    .Name("grid_#=IdOrder#")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.MechanicId).Title("Mitarbeiternummer");
                        columns.Bound(o => o.MechanicName).Title("Mitarbeitername");
                        columns.Bound(o => o.TargetFru).Title("AW Soll");
                        columns.Bound(o => o.ActualFru).Title("AW Ist");
                        columns.Bound(o => o.EvalMirror).Title("Bewertung");
                        columns.Bound(o => o.ActualFruEval).Title("AW Ist (Bew)");
                        columns.Bound(o => o.FruDiffEval).Title("Δ Soll-Ist (Bew)");
                        })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Read(read => read.Action("ReadMechanics", "UFA", new { idOrder = "#=IdOrder#" }))
                    )

                    .ToClientTemplate()
            )

Did you ever see a behaviour like this? Any tipps how to solve this? :)

Thanks
Thomas

Grid

answered on 18 May 2023

0 answers

123 views

Solved- Custom Rule for Remote Validation in Custom PopUpEditor with Additional Field

Hi,

I'm posting this in case anybody else has had issues with remote validation + grid custom popupeditor + additional field.

I'm working on a grid with a custom PopUpEditor made up of Kendo TextBoxes. The viewmodel specifies remote validation with an additional field that is in the PopUpEditor. To implement remote validation, I am following https://demos.telerik.com/aspnet-mvc/grid/editing-remote-validation, including using the javascript custom validation rule. This demo works well for remote validation without additional fields, but it appears to not generate the data payload correctly if an additional field is specified.

The code in the demo for creating the data payload is:

    //adding remote rule to handle validation based on Remote attribute set in the model.
    $(document).ready( function () {
        $.extend(true, kendo.ui.validator, {
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();
...

The last line in the above snippet appears to be the problem, because the attribute value is actually in the form "*.Field1,*.Field2" where Field1 is the name of the field to be validated, and Field2 is the additional field specified in the view model. The resulting array is ["*", "Field1*," "Field2"], and only "Field1*" gets assigned a value. It's not clear to me why the fields names are rendered in this manner.

The example in https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/using-remote-validation-in-grid handles the additional fields, as seen in this snippet from the code:

    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    var addFields = input.attr("data-val-remote-additionalfields").replace(/\*./g, "").split(",");
                    $.each(addFields, function (index, val) {
                        postData[val] = $("input[name='" + val + "']").val();
                    });
...

Here, "*." is stripped out of the field names, and the code iterates through the generated array, assigning values.

While this code worked for me, if you encounter issues, you can look at https://www.telerik.com/forums/remote-validation-with-additionalfields-when-editing-the-grid. It has a rule that handles remote validation for a specific field and a specific additional field:

$.extend(true, kendo.ui.validator, {
  rules: {
    remote: function (input) {
      if (input.is("[name=Code]") && input.val()) {
        var productId = $("input[name='Id']").val();
        var productCode = input.val();
        $.ajax({
          url: '@Url.Action("VerifyCode", "Products")',
          type: "GET",
          async: false,
          data: { "ProductCode": productCode, "id": productId},
...

Hopefully this information will help out others. Please feel free to comment with other details or corrections.

Thanks,

Taylor

Grid

asked on 17 May 2023

1 answer

143 views

Removing .k-grid-footer break column width

I've tracked the problem I'm facing down to removing the gridfooter. With the code I'm given it's easier to always create the gridfooter and then remove it in the cases it doesn't need to be there.

In the scenarios where I don't remove the gridfooter the column widths are fine. When I remove the gridfooter then the columns no longer respect the width. I tracked it down to one item.

If I leave the gridfooter alone this is on the web page. You can see the colgroup with the widths.

When I remove the gridfooter the colwidth values appeared to be wiped out.

Any idea why this is happening or another solution? Hiding the grid footer on document ready doesn't appear to be a good solution as when the grid refreshes due to a sort the footer reappears.

I should also add that removing the footer appears to prevent the grid from painting properly and that items in the grid do not appear until you sort a column.

I was just playing around more and found if I add the col entry back in the colgroup after removing the footer that it formats properly, however I need to know why removing the footer is removing the values in the colgroup.

Thanks

Grid

answered on 17 May 2023

1 answer

269 views

Tree View No records to display

Hi Telerik Team

I’m using ASP.NET CORE (.NET7) with
Telerik.UI.for.AspNet.Core Version="2023.1.425"

I'm trying to use TreeView and it always displays text: No records to display

My Code:

I configured json options

--- Program.cs --------------------------------------------------------------------------------------------
builder.Services.AddControllersWithViews()
    .AddJsonOptions(options => {
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
                });

----- Controller -------------------------------------------------------------------------------------------

public JsonResult GetTestTreeViewData([DataSourceRequest] DataSourceRequest request)
    {
        var result = GetDirectory().ToTreeDataSourceResult(request,
            e => e.ObjectId,
            e => e.ParentId,
            e => e
        );
        return Json(result);
    }

    private IEnumerable<TreeViewTest> GetDirectory()
    {
        return Enumerable.Range(start: 1, count: 10).Select(i => new TreeViewTest
        {
            ObjectId = i,
            ObjectName = "Object Name " + i,
            ParentId = i - 1,
            ParentName = "Parent Name " + (i - 1)
        });
    }

--- View -------------------------------------------------------------------------------------------

@using Kendo.Mvc.UI
@using MwTech.Domain.Entities;

@(Html.Kendo().TreeList<TreeViewTest>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(e => e.ObjectName).Width(200);
            columns.Add().Field(e => e.ObjectId).Width(100);
            columns.Add().Field(e => e.ParentName).Width(200);
            columns.Add().Field(e => e.ParentId).Width(100);
        })
        .Filterable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetTestTreeViewData", "Bom"))
            .ServerOperation(false)
            .Model(m =>
            {
                m.Id(f => f.ObjectId);
                m.ParentId(f => f.ParentId);
                m.Expanded(true);
                m.Field(f => f.ObjectName);
                m.Field(f => f.ParentName);

            })
        )
        .Height(540)
)

In DevTools I can see json object:

{Data: [{ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"},…],…}

AggregateResults: {}
Data: [{ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"},…]

0: {ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"}
1: {ObjectId: 2, ObjectName: "Object Name 2", ParentId: 1, ParentName: "Parent Name 1"}
2: {ObjectId: 3, ObjectName: "Object Name 3", ParentId: 2, ParentName: "Parent Name 2"}
3: {ObjectId: 4, ObjectName: "Object Name 4", ParentId: 3, ParentName: "Parent Name 3"}
4: {ObjectId: 5, ObjectName: "Object Name 5", ParentId: 4, ParentName: "Parent Name 4"}
5: {ObjectId: 6, ObjectName: "Object Name 6", ParentId: 5, ParentName: "Parent Name 5"}
6: {ObjectId: 7, ObjectName: "Object Name 7", ParentId: 6, ParentName: "Parent Name 6"}
7: {ObjectId: 8, ObjectName: "Object Name 8", ParentId: 7, ParentName: "Parent Name 7"}
8: {ObjectId: 9, ObjectName: "Object Name 9", ParentId: 8, ParentName: "Parent Name 8"}
9: {ObjectId: 10, ObjectName: "Object Name 10", ParentId: 9, ParentName: "Parent Name 9"}

Errors: null
Total: 10

but TreeView displays no data.

I ran a similar application in asp.net mvc
(the same view and the same controller)and it worked fine

Whatam I doing wrong ?

Grid

TreeList

answered on 12 May 2023

1 answer

394 views

Localstorage/Persistence not working with Kendo Grid

Hi Telerik,

I have a Grid with persistence implemented exactly like described here => https://demos.telerik.com/aspnet-core/grid/persist-state

Sequence of actions:

1) Start application
2) Reorder columns
3) Save state
4) Reorder columns again for testing purpose => another reorder, not reordering back to the original order
5) Load state

=> everything is working fine, order is back to saved state

But:
1) Start application
2) Reorder columns
3) Save state
4) Close app/browser
5) Run app again => original order is back
6) Load state

=> The order of the columns is changing to the saved state, but the Grid hangs in an infinite loop loading the data

Grid:

Html.Kendo().Grid<OalViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderNumber).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(100).Title("Auftrag").HtmlAttributes(new { style = "text-align: center" }).Locked(true);
                    columns.Command(command => { command.Edit(); }).Width(150).HtmlAttributes(new { style = "text-align: center" }).Locked(true);
                    columns.Bound(p => p.Split).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(80).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderType).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(80).Title("Art").HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OutletIndicator).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(80).Title("FIL").HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.AcceptanceDate).Format("{0: dd.MM.yyyy}").Filterable(ftb => ftb.Cell(y => y.Template("datePicker"))).Title("Angenommen am").Width(150).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.AcceptedBy).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("Angenommen von").Width(150).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.CreatedBy).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("Erstellt von").Width(125).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.Make).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("Marke").Width(80).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.Status).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(80).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.InvoiceDate).Format("{0: dd.MM.yyyy}").Filterable(ftb => ftb.Cell(y => y.Template("datePicker"))).Title("RG-Dat.").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.InvoicePrintedOk).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("RG-Druck").Width(80).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.LicenseNumber).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("Kennz.").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.CustomerNumber).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("KD-Nr").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.Customer).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Title("KD").Width(100);
                    columns.Group(x => x
                        .Title("Integration").HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F;" })
                        .Columns(info =>
                        {
                            info.Bound(p => p.ExactDescription).Width(250).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F; text-align: left" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("Genaue Beschreibung");
                            info.Bound(p => p.PlannedCompletionDate).Format("{0: dd.MM.yyyy}").Filterable(ftb => ftb.Cell(y => y.Template("datePicker"))).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F; text-align: center" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("Fertigstellung").Width(100);
                            info.Bound(p => p.PlannedSettlementDate).Format("{0: dd.MM.yyyy}").Filterable(ftb => ftb.Cell(y => y.Template("datePicker"))).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F; text-align: center" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("RG-Stellung").Width(100);
                            info.Bound(p => p.OrderAvailable).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F; text-align: center" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("Auftrag vorhanden?").Width(100);
                            info.Bound(p => p.OrderBillable).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F; text-align: center" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("Auftrag abrechenbar?").Width(100);
                            //info.Bound(p => p.OrderStatus).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).HtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).HeaderHtmlAttributes(new { style = "border-color:#642A3F; border: 1pt solid #642A3F" }).Title("Auftrags-Status?").Width(100);

                        }));
                    columns.Bound(p => p.OrderValueTotal).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.Tax).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Steuer").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueTotalNoTax).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert o. MwSt.").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueVehicle).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert Fzg").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueEquipment).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert Zubehör").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueFlatRateUnits).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert AW").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueParts).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert Teile").Width(100).HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.OrderValueSublets).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").Title("Auftragswert Sonstiges").Width(100).HtmlAttributes(new { style = "text-align: center" });
                })
                .ColumnResizeHandleWidth(20)
                .ColumnMenu()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .Filterable()
                .Reorderable(reorder => reorder.Columns(true))
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopupOAL"))
                .ToolBar(toolbar =>
                {
                     toolbar.Custom().Text("Import DMS").IconClass("k-icon k-i-file-excel").HtmlAttributes(new { id = "customCommand" });
                     toolbar.Excel();
                     toolbar.Pdf();
                     toolbar.Custom().Text("Ansicht speichern").IconClass("k-icon k-i-export").HtmlAttributes(new { id = "save" });
                     toolbar.Custom().Text("Ansicht laden").IconClass("k-icon k-i-import").HtmlAttributes(new { id = "load" });
                     toolbar.Search();
                })
                .Pdf(pdf => pdf.AllPages(true))
                .Excel(excel => excel.AllPages(true))
                .Pageable(p => p
                     .ButtonCount(5)
                     .PageSizes(new[] { 10, 25, 50 })
                     .Refresh(true)
                     .Input(true)
                )
                .HtmlAttributes(new { style = "height:600px;" })
                .DataSource(dataSource => dataSource
                    .SignalR()
                    .AutoSync(false)
                    .PageSize(10)
                    .Aggregates(aggregates =>
                    {
                        aggregates.Add(p => p.OrderValueTotal).Sum();
                        aggregates.Add(p => p.Tax).Sum();
                        aggregates.Add(p => p.OrderValueTotalNoTax).Sum();
                        aggregates.Add(p => p.OrderValueVehicle).Sum();
                        aggregates.Add(p => p.OrderValueEquipment).Sum();
                        aggregates.Add(p => p.OrderValueFlatRateUnits).Sum();
                        aggregates.Add(p => p.OrderValueParts).Sum();
                        aggregates.Add(p => p.OrderValueSublets).Sum();
                    }                    )
                    .Transport(tr => tr
                        .Promise("hubStart")
                        .Hub("hub")
                        .Client(c => c
                            .Read("read")
                            .Create("create")
                            .Update("update")
                            .Destroy("destroy"))
                        .Server(s => s
                            .Read("read")
                            .Create("create")
                            .Update("update")
                            .Destroy("destroy")))
                    .Schema(schema => schema
                        .Model(model =>
                        {
                            model.Id(order => order.OrderNumber);
                            model.Field(p => p.OrderNumber).Editable(false);
                            model.Field(p => p.Split).Editable(false);
                            model.Field(p => p.OrderType).Editable(false);
                            model.Field(p => p.OutletIndicator).Editable(false);
                            model.Field(p => p.AcceptanceDate).Editable(false);
                            model.Field(p => p.AcceptedBy).Editable(false);
                            model.Field(p => p.CreatedBy).Editable(false);
                            model.Field(p => p.Make).Editable(false);
                            model.Field(p => p.Status).Editable(false);
                            model.Field(p => p.InvoiceDate).Editable(false);
                            model.Field(p => p.InvoicePrintedOk).Editable(false);
                            model.Field(p => p.LicenseNumber).Editable(false);
                            model.Field(p => p.CustomerNumber).Editable(false);
                            model.Field(p => p.Customer).Editable(false);
                        }
                 )
              )
            )

Javascript:

<script>
    $(document).ready(function () {
        var grid = $("#grid").data("kendoGrid");

        $("#save").click(function (e) {
            e.preventDefault();
            localStorage.kendogridoptions = kendo.stringify(grid.getOptions());

        });

        $("#load").click(function (e) {
            e.preventDefault();
            var options = localStorage.kendogridoptions;
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        });

    });
</script>

Note: In the javascript code above you will see a difference to the demo code. I Changed

localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

to

localStorage.kendogridoptions = kendo.stringify(grid.getOptions());

Because I researched the problem and found a lot of sources telling that the proper/better way of accessing the localstorage would be by using "localStorage.<VALUE-NAME>".

But first I tried with the exaxt demo code, also running into the same problem.

What am I doing wrong? After restarting the app and loading the state, the order of the colums is changed, but the grid is unable to load the data.

Is it because I use SignalR binding? I need realtime updates as many users are working in the same grid at the same time, and this is only working with SignalR, correct?

Appreciate any tips!

Thanks

Thomas

Grid

answered on 10 May 2023