Hi
Can we achieve sticky header on the grid with page scroll instead of having a scrollbar within a grid.
If you refer to any example: https://demos.telerik.com/aspnet-core/grid they have one scrollbar for grid n one for page. Can we eliminate grid n display all data rows n have a sticky header as we goes down?
Is there a way to refresh an Asp.Net Core PivotGri?
i.e.: I have a PivotGrid open. I know that there are changes to the underlying tables and I want to see the changes in the PivotGrid without having to close it and then re-open it.
Using Asp.Net Core 6, C# and Telerik 2323.1.307
Thanks
Hi
We are having a grid with editable field option which triggers when you click on the field.
I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.
When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.
ANY help appreciated. Thanks!
How do you specify the default sort order of rows/columns in a PivotGrid?
My controller has this method
public IActionResult PivotGrid()
{
IEnumerable<ResponseReportPivot> objResponseList = _db.ResponseReportPivot;
var sortedResponseList = objResponseList.OrderBy(s => s.EventYear).ThenBy(s => s.Venue);
return View(sortedResponseList);
}
When I run the pivot I get the display in Pivot Display.jpg attached.
If I change the OrderBy clauses, I get the display in Pivot display 2.jpg.
I know the user can change the sort but I want the column display to default to be Event Year ascending and the row display to default to Venue ascending.
I haven't seen anywhere how that can be accomplished.
Here's the pivot grid code
@*For local binding*@
@using Application.Models;
@using Kendo.Mvc.Extensions;
@using Kendo.Mvc.UI;
@model IEnumerable<ResponseReportPivot>
@{
ViewBag.Title = "Response Report Pivot Grid";
}
@Html.AntiForgeryToken()
<style>
.k-pivot-table .k-grid-content td {
text-align: left;
}
</style>
<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<ResponseReportPivot>()
.Name("pivotgrid")
.Configurator("#configurator")
.ColumnWidth(120)
.Filterable(true)
.Height(570)
.Sortable(true)
.BindTo(Model)
.DataSource(dataSource => dataSource
.Ajax()
.Schema(schema => schema
.Cube(cube => cube
.Dimensions(dimensions =>
{
dimensions.Add(model => model.Venue).Caption("All Venues");
dimensions.Add(model => model.EventYear).Caption("All Years");
})
.Measures(measures =>
{
measures.Add("Count").Field(model => model.Venue).AggregateName("count");
})
))
.Columns(columns =>
{
columns.Add("EventYear").Expand(true);
})
.Rows(rows => rows.Add("Venue").Expand(true))
.Measures(measures => measures.Values("Count"))
.Events(e => e.Error("onError"))
)
)
</div>
<div class="responsive-message"></div>
<script>
function onError(e) {
alert("error: " + kendo.stringify(e.errors[0]));
}
</script>
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:
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
PivotGrid/TreeList control:
Expand/collapse button's mouseover cursor is text style,not arrow or hand icon,like the treeview control/grid control
Hi, I am working with the api for test and I can't expand or collapse the field in the pivot.
Somebody can help me with this issue.
Hello again Team Telerik,
As I continue my project, a Pivot Grind with AngularJS at APS.Net Core, I have new difficulties. At the beginning, I was saving the strings of rows, columns and measures in a database as three different columns. But in this way, I couldn't save the "state", meaning the "expand", "filter", "sort" etc values. So I looked around for a persist state and I found that getOptions() and setOptions() are working for Kendo Grid, so I thought that it would work on Pivot Grid also. But after many tries with different methods, I think that it doesn't work, or I'm doing something clearly wrong. My goal is to save the state as one column in a database per user. So I need a "save" button and a "load" button. There is no need to give you my code for this. I just like to see a working example in the sample code, because I can't make it work even in this. Please, give me an example of saving and loading to/from a local var for the code below, so I can find out what I'm doing wrong...
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=
"stylesheet"
href=
"styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"styles/kendo.default.min.css"
/>
<link rel=
"stylesheet"
href=
"styles/kendo.default.mobile.min.css"
/>
<script src=
"js/jquery.min.js"
></script>
<script src=
"js/angular.min.js"
></script>
<script src=
"js/kendo.all.min.js"
></script>
</head>
<body>
<div id=
"example"
>
<div ng-app=
"KendoDemo"
ng-controller=
"MyCtrl"
>
<div kendo-pivot-configurator k-height=
"580"
k-data-source=
"dataSource"
id=
"configurator"
class=
"hidden-on-narrow"
></div>
<div kendo-pivot-grid=
"pivot"
k-options=
"options"
id=
"pivotgrid"
class=
"hidden-on-narrow"
></div>
<div class=
"responsive-message"
></div>
</div>
</div>
<script>
angular.module(
"KendoDemo"
, [
"kendo.directives"
])
.controller(
"MyCtrl"
,
function
($scope){
$scope.dataSource =
new
kendo.data.PivotDataSource({
type:
"xmla"
,
columns: [{ name:
"[Date].[Calendar]"
, expand:
true
}, { name:
"[Product].[Category]"
} ],
rows: [{ name:
"[Geography].[City]"
}],
measures: [
"[Measures].[Reseller Freight Cost]"
],
transport: {
connection: {
catalog:
"Adventure Works DW 2008R2"
,
cube:
"Adventure Works"
},
read:
"//demos.telerik.com/olap/msmdpump.dll"
},
schema: {
type:
"xmla"
},
error:
function
(e) {
alert(
"error: "
+ kendo.stringify(e.errors[0]));
}
});
$scope.options = {
groupable:
true
,
sortable:
true
,
reorderable:
true
,
filterable:
true
,
columnWidth: 200,
height: 580,
dataSource: $scope.dataSource
};
})
</script>
<style>
#pivotgrid {
width: 70%;
}
.hidden-on-narrow {
display: inline-block;
vertical-align: top;
}
</style>
</body>
</html>
Thanks in advance for your time and help,
Regards,
Stelios