Hi everyone.

I've got a grid on my razor page populated from a list of API-sourced records and none of the fields are displaying on there.  I'm using local binding direct from an incoming model property...

@(
Html.Kendo().Grid(Model.AllAccounts)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(b => b.AccountId).Visible(false);
columns.Bound(b => b.AccountDescription).Title(Model.AccountDescriptionLabel);
columns.Bound(b => b.AccountHolder).Title(Model.AccountHolderLabel);
columns.Bound(b => b.ContractsCount  ).Title("Total Contract(s)");
columns.Bound(b => b.ContactsCount).Title("Total Contact(s)");
columns.Bound(b => b.UsersCount).Title("Total User(s)");
columns.Command(command => command.Custom(Model.AccountDetailsButtonText).Click("showDetails"));
})
.Pageable()
.Sortable()
.Scrollable(scr=>scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler")
)
)
)

If I look at the records in debug then everything is populated, but the fields aren't showing on the grid row (Empty Grid Row.jpg).

I've got a button on the row linked to the record and if I intercept the dataitem in the script you can see that the camel case fields are populated but the pascal case ones aren't (which is definitely not the case when viewing records in debug!) (Data Item Grab.jpg).

I've followed the first two options in the guidance about the camel case issue from the JSON Serialisation Page but nothing is working for me (snippet of Program.cs follows).

// Add services to the container.
services.AddControllersWithViews()
    .AddJsonOptions(options =>
                options.JsonSerializerOptions.PropertyNamingPolicy = null);

Can anyone advise me what to do here? I've lost most of today on this issue.

Thanks for your time!

I have a Telerik Window with an Telerik Wizard as its content.

I've implemented 7 steps. In the first step I have an Radiogroup. Depending of the groups value i disable step 2 and 3 and if I click "Next"-Button I want to skip them and jump to step 4.

Here are some code snippets:

function onChangeCancelType(radioGrp) { 

        var $j = jQuery.noConflict(); 
        var wizard = $j("#CancelWizard").data("kendoWizard"); 

        if (radioGrp.newValue === '1') { 
            wizard.enableStep(1, true); 
            wizard.enableStep(2, true); 
        } else { 
            wizard.enableStep(1, false); 
            wizard.enableStep(2, false); 
        } 
    } 

function onClickStep1(e) { 
        e.preventDefault(); 
        var $j = jQuery.noConflict(); 
        var wizard = $j("#CancelWizard").data("kendoWizard"); 
        var radioGrp = $j("#CancelType").data("kendoRadioGroup"); 

        if (radioGrp.value() === '2') { 
            wizard.select(3); 
        } else {
            wizard.select(1);
        }
    } 

What happens is, that in case of selecting Radiogroup value 2 the wizard jumps to step 5 instead of step 4.

I'm sure there is something stupid I oversee here.

Thank's for help

Timo

I'm basing my code on this example: Remote binding in ASP.NET Core PivotGrid Component Demo | Telerik UI for ASP.NET Core

I'm modifying someone else's app working with Asp.Net Core 5

My code is;

    @(Html.Kendo().PivotConfigurator()
        .Name("configurator")
        .Filterable(true)
        .Height(570)
    )

When I try to run it, I get this error:

II get a similar error for @(Html.Kendo().PivotGrid<CommissionReceivedViewModel>()

What would be causing this?

Thanks in advance

I'm having some issues with pivot grid and need some assistance. 

I'm trying to create a pivot grid that looks something like this.  It's a simple example that I would be expanding on.  It shows the total commission received from a company by year.

 I've two questions:

• 1) Can I get the data directly from the SQL Table without going into a list
• 2) Why is nothing showing up in the pivot grid

Right now I'm testing in Asp.Net Core .Net 6 and Telerik.UI.for.AspNet.Core 2022.1.301

The model looks like this

    public class CommRecd
    {
        public Guid Id { get; set; }
        public DateTime ReceivedDate { get; set; }
        public string? CompanyName { get; set; }
        public Decimal ReceivedAmount { get; set; }
        public int ReceivedYear { get; set; }
    }

The controller method is below and I've confirmed that objCommList contains the data

        public IActionResult PivotGrid()
        {
            IEnumerable<CommRecd> objCommList = _db.CommRecd;
            return View(objCommList);
        }

I'm basing my code on this example Remote binding in ASP.NET Core PivotGrid Component Demo | Telerik UI for ASP.NET Core with the code shown below.

@using Application.Models;
@model IEnumerable<CommRecd>
@{ ViewBag.Title = "Commission Received Report"; }
@Html.AntiForgeryToken()

<div class="k-pivotgrid-wrapper">
    @(Html.Kendo().PivotConfigurator()
        .Name("configurator")
        .HtmlAttributes(new { @class = "hidden-on-narrow" })
        .Filterable(true)
        .Sortable(true)
        .Height(570)
    )

    @(Html.Kendo().PivotGrid<CommRecd>()
        .Name("pivotgrid")
        .Configurator("#configurator")
        .ColumnWidth(120)
        .Filterable(true)
        .Height(570)
        .DataSource(dataSource => dataSource
            .Ajax()
            .Schema(schema => schema
                .Cube(cube => cube
                    .Dimensions(dimensions => {
                        dimensions.Add(model => model.CompanyName).Caption("All Companies");
                        dimensions.Add(model => model.ReceivedAmount).Caption("All Amounts");
                        dimensions.Add(model => model.ReceivedYear).Caption("All Years");
                    })
                    .Measures(measures =>
                    {
                        measures.Add("Sum").Format("{0:c}").Field(model => model.ReceivedAmount).AggregateName("sum");
                    })
                ))
            .Columns(columns =>
            {
                columns.Add("ReceivedDate").Expand(true);
            })
            .Rows(rows => rows.Add("CompanyName").Expand(true))
            .Measures(measures => measures.Values("Sum"))
            .Events(e => e.Error("onError"))
        )
    )
</div>
<div class="responsive-message"></div>

<script>
    function onError(e) {
        alert("error: " + kendo.stringify(e.errors[0]));
    }
</script>

My output looks like this

Thanks for any suggestions

Hey guys,

I think it is a bug because the requried validation attribute is not rendered when using tag helper. Can you validate my problem?
Kendo version: 2022.1.119

Model:

[Required(ErrorMessage = "Hey, I am an error message.")]
public string Test { get; set; }

View (working example with html helper):

@Html.Kendo().TextAreaFor(x => x.Test).Rows(3)

View (not working example with tag helper):

<kendo-textarea name="Test" rows="3"></kendo-textarea>

The data-val="true" data-val-required="xxx" attributes are only rendered with html helper.

The user edits dates in a grid in D M Y format .. BUT when saved we see an error that indicates it is expecting M D Y format.

Please see attached files.

I think I'm close.  Its not throwing any errors but its also not displaying any data... Im just trying to get it to display a list of Company Names and Company IDs from my TblCompanyInfo table.

This is my controller:

        public async Task<IActionResult> Index()
            {
            var apptReminderContext = _context.TblCompanyInfos.Include(t => t.AcctType).Include(t => t.CompanyStatus).Include(t => t.OnHoldReason);
            return View(await apptReminderContext.ToListAsync());
            //return View();
        }

        public JsonResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            DataSourceResult result = _context.TblCompanyInfos.ToDataSourceResult(request,
                model => new TblCompanyInfo
                {
                    CompanyId = model.CompanyId,
                    CompanyName = model.CompanyName
                });
            return Json(result);
        }

and my view...

@model IEnumerable<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

@using AppointmentRemindersNetCoreMVC.Data
@using Kendo.Mvc.UI
@addTagHelper *, Kendo.Mvc

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

       @(Html.Kendo().Grid<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>()
        .Name("grid")
        .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read.Action("Products_Read", "Company"))
        .PageSize(20)
        //.ServerOperation(false)
        //.Model(model => model.Id(c => c.CompanyId))
        //.Read("Products_Read", "Company")
        //.Read(read => read.Action("Products_Read", "Company"))
        .Update("UpdateCustomer", "Home")
        .Create("InsertCustomer", "Home")
        .Destroy("DeleteCustomer", "Home"))

        .Columns(columns =>
        {
            columns.Bound(product => product.CompanyName);
            columns.Bound(product => product.CompanyId);
        })
        .Pageable()
        .Sortable()
        
    )

I know that the Products_Read function is being called by the view and I also know that the "result" contains 32 rows of data.  However, nothing is displayed in the grid

See the attached screenshot.

Thank you for any help you can provide!!

Hello,

I have a grid for my ASP.NET Core Razor page, and have it bound to the Model object.

In the interest of saving horizontal space, and for readability, we would like to split some cells to show Start date / End date in one cell, rather than have two columns for this data.  Both data should be editable.

Is this possible?

Thanks

Good afternoon,

I've used the following to get the date filter in my Grid to use the dd/MM/yyyy format:

columns.Bound(t => t.Datestamp).Title("Date").Format("{0:dd/MM/yyyy HH:mm:ss}").Filterable(f => f.UI("datestampFilter"));

    function datestampFilter(element) {
        element.kendoDatePicker({
            format: "{0:dd/MM/yyyy}",
            parseFormats: ["dd/MM/yyyy"]
        });
    }

This works but the class of the datepicker input is incorrect and, as as result, the button is not aligned right and the border of the input is darker:

It generates an input:

<input title="Value" data-bind="value:filters[0].value" class="" type="text" data-role="datepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" autocomplete="off" aria-disabled="false" aria-readonly="false">

It's missing class="k-input-inner" which is what is generated when no formatting is applied to the date column.

Have I missed something else which is causing the slightly incorrect styling?

Kind regards,

Richard