Hello.
I have the following DataTable (dataTable.JPG attached file), I want to generate a chart that looks similar to the attached file (Chart.png)
It has up to 3 levels of grouping as you can see in the chart, how can I accomplish this in charts for ASP.NET MVC?
Thank you.
Hi,
I'm having a problem with the aggregates on my server-bound grid. Here's my code:
@(Html.Kendo().Grid(Model[j].BusinessUnitTimesheets) .Name("BU_Time" + j) .DataSource(d => d .Server() .Aggregates(ag => { ag.Add(a => a.Amount).Sum(); ag.Add(a => a.Hours).Sum(); }) ) .Columns(columns => { columns.Bound(c => c.BusinessUnitId) .Hidden(); columns.Bound(c => c.BusinessUnitCodeAndName) .Title("Business Unit") .ClientFooterTemplate("Total"); columns.Bound(c => c.Hours) .Format("{0:N2}") .HtmlAttributes(new { style = "text-align:right;" }) .ClientFooterTemplate("#=sum#") .FooterHtmlAttributes(new { style = "text-align:right;" }); columns.Bound(c => c.Amount) .Width(100).Format("{0:N2}") .HtmlAttributes(new { style = "text-align:right;" }) .ClientFooterTemplate("#=kendo.toString(sum,'N2')#") .FooterHtmlAttributes(new { style = "text-align:right;" }); }) .DetailTemplate( @<text> @(Html.Kendo().Grid(item.UserTime) .Name(string.Format("BU_U_Time{0}_{1}", j, item.BusinessUnitId)) .DataSource(d => d .Server() .Aggregates(ag => { ag.Add(a => a.Hours).Sum(); ag.Add(a => a.Amount).Sum(); }) ) .Events(e => e.DataBinding("splitBound")) .Columns(columns => { columns.Bound(c => c.UserName) .Title("User"); columns.Bound(c => c.Hours) .Format("{0:N2}") .HtmlAttributes(new { style = "text-align:right;" }) .ClientFooterTemplate("#=sum#") .FooterHtmlAttributes(new { style = "text-align:right;" }); columns.Bound(c => c.Amount) .Width(100) .Format("{0:N2}") .HtmlAttributes(new { style = "text-align:right;" }) .ClientFooterTemplate("#=kendo.toString(sum,'N2')#") .FooterHtmlAttributes(new { style = "text-align:right;" }); }) ) </text> ))
I've attached a screenshot of the rendered grid. The totals are in the wrong columns for the parent grid, and both parent and child have sums that are zero.
Thanks
Hi, what am I doing wrong here? I can get the data out properly, but it won't sort. It seems to work the same in both MVC (razor) and in javascript.
It should have all the names (Resource) in alpha order... but it seems to be sorting by the PriorityColorString
MVC
@(Html.Kendo().Chart<Model>() .Name("Resources") .Title("Resource") .Legend(leg => leg.Visible(false)) .DataSource(ds => ds.Read( read => read.Action("GetAlertResources", "Hierarchy")) .Group(grp => { grp.Add(x => x.AlertTypeCount); } ).Sort(x => x.Add(srt => srt.Resource))) //) .ChartArea(chart => chart .Width(600).Height(600)) .SeriesDefaults(seriesDefaults => seriesDefaults .Bar().Gap(0) .Stack(true)) .Series(series => { series.Bar(x => x.AlertTypeCount) .Labels(lab => lab.Position(ChartBarLabelsPosition.Center).Opacity(0).Visible(true)) .Field("AlertTypeCount") .CategoryField("Resource") .ColorField("ColorField"); }) .CategoryAxis(ct => ct.MajorGridLines(maj => maj.Visible(false))) .Tooltip(tooltip => tooltip .Visible(true) .Template("<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" + "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" + "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #") ))javascript:
var data = [{ AlertTypeCount:1,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },{ AlertTypeCount:6,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Simon },{ AlertTypeCount:12,ColorField:"#FF7F0E",ColorText:"4=Other",PriorityColorString:"4",Resource:Theodore },{ AlertTypeCount:9,ColorField:"#BCBD22",ColorText:"3=Low",PriorityColorString:"3",Resource:Albert },{ AlertTypeCount:30,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },{ AlertTypeCount:10,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Theodore },{ AlertTypeCount:3,ColorField:"#1F77B4",ColorText:"2=Low",PriorityColorString:"3",Resource:Simon },{ AlertTypeCount:1,ColorField:"#1F77B4",ColorText:"3=Low",PriorityColorString:"3",Resource:Pedro },{ AlertTypeCount:4,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Marvin }]$("#chart").kendoChart({ dataSource: { transport: { read: { url: "/Hierarchy/GetAlertResources", dataType: "json" } }, group: [ { field: "AlertTypeCount" } ], sort: [ { field: "Resource", dir: "asc" }, ] }, chartArea: { width: 600, height: 600 }, title: { align: "left", text: "Resources" }, legend: { visible: false }, seriesDefaults: { type: "bar", gap: 0.1, stack: true }, series: [{ field: "PriorityColorString", categoryField: "Resource", colorField: "ColorField", labels: { visible: true, opacity: 0, position: "center" } }], categoryAxis: { majorGridLines: { visible: false } }, tooltip: { visible: true, template: "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" + "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" + "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #" } });Hello,
We are currently developing with the Diagram control.
I have a question, how do we customize the ribbon's toolbar above it? (see screenshot)
I am reading conflicting tutorials about this, some say it is a WIDGET, but then i read toolbar in some places.
Is there an example somewhere how to, for example add a button with an customized onclick?
Gr from John
Hello!I have a problem, where I try to insert color picker in grid
.CSHTML:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title(Resources.Resource.Id);
columns.Bound(p => p.Name).Title(Resources.Resource.Name);
columns.Bound(p => p.Text).Title(Resources.Resource.Text);
columns.Bound(p => p.Color).Title(Resources.Resource.Color)
.ClientTemplate("<div style='background-color: #: Color#;padding:10px; border: 1px solid black;'></div>")
.EditorTemplateName("Color");
columns.Bound(p => p.Description).Title(Resources.Resource.Description);
columns.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(m => m.Id);
model.Field(m => m.Id).Editable(false);
model.Field(m => m.Name).Editable(false);
})
.Read(read => read.Action("Read", "OrderStatus"))
.Update(update => update.Action("Update", "OrderStatus"))
)
)
Color Editor Template:
@model string
@(Html.Kendo().ColorPickerFor(
m => m))
As a result i get any nonsence (1.jpg)
I want to get this(2.png)
Please, help me.
My grid shows only 1 page of data until I apply a filter and then clear it. Having done that, it instantly shows all 28 pages.
1. does anyone have any idea what might be causing this?
2. is there any way to get it to recalculate the page list at the bottom of the grid after loading using a javascript command?
Here is the grid:
@(Html.Kendo().Grid<tpnconnect.com.AdminService.DeviceDataEdit>()
.Name("deviceGrid")
.Columns(columns =>
{
columns.Bound(d => d.DepotNumber).Width(60);
columns.Bound(d => d.DeviceName).Width(150);
columns.Bound(d => d.DeviceAlias).Width(150);
columns.Bound(d => d.AutoMode).Width(100).Title("Auto Mode").EditorTemplateName("AutoMode").ClientTemplate("#:AutoModeDisplay#");
columns.Bound(d => d.CreatedDate).Title("Created").Format("{0:dd-MMM-yy HH:mm}").Width(80);
columns.Bound(d => d.Active).Width(40).Filterable(true);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(d => d.DeviceID))
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Create(update => update.Action("AddDevice", "Printer"))
.Read(read => read.Action("GetAllDevicesForEdit", "Printer"))
.Update(update => update.Action("UpdateDevice", "Printer"))
.Destroy(update => update.Action("DeleteDevice", "Printer"))
)
)
Hi,
I have a chart,
Purpose of the chart will say total of male & female, based on the country & nationality wise. Successfully generate the chart
Here is the fiddle, i created.
jsFiddle example
For the reference
How to categories the series label.
I am trying to position the series name similar like this (Capture.JPG)..
Suggest me how can i generate
@(Html.Kendo().Chart() .Name("chart") .Title("Gender Summay based on the total") .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .Series(series => { series.Column(new double[] { 54, 5 }).Name("2010 Bah") .Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); series.Column(new double[] { 24, 21 }).Name("2010 Non Bah").Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); series.Column(new double[] { 54, 5 }).Name("2011 Bah").Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); series.Column(new double[] { 24, 21 }).Name("2011 Non Bah") .Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); series.Column(new double[] { 10, 52 }).Name("2012 Bah") .Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); series.Column(new double[] { 12, 65 }).Name("2012 Non Bah") .Labels(labels => labels.Template("#= series.name #") .Background("transparent") .Visible(true)); }) .CategoryAxis(axis => axis .Categories("Male", "FeMale") .Justify(true) ) .Tooltip(tooltip => tooltip .Visible(true) .Format("{0}") .Template("#= series.name # : #= value #") ) )I have a requirement where the user needs to be able to Clone or Add & Clone lots and lots of records from within the modal Kendo window. Currently, there are only two buttons at the bottom of the window: Update and Cancel. I've looked all over the web and the support area here, but cannot find any example or docs on how to accomplish adding custom actions and buttons within the modal Kendo window.
As you can see, the basic scenario is pretty straightforward and very handy for working with lots of similar data. The form should NOT close, but stay open after the submit occurs.
How can I achieve this functionality within a modal Kendo window control (using the toolbar)?
Thanks.
Hello,
I created a custom editor for my Scheduler, and I now need to add some custom validation.
My goal is to ensure that:
1) The start and end date must be in the same day (cannot spawn multiple days)
2) The smaller possible unit is 15 min. So the valid hours are xx:00, xx:15, xx:30 and xx:45.
A valid Input would for example be:
from 01.01.2000 11:15
to 01.01.2000 22:45
Invalid examples would be:
from 01.01.2000 11:15
to 02.01.2000 08:45 (not the same day)
from 01.01.2000 11:23 (not multiple of 15min)
to 01.01.2000 14:30
How can I achieve this behavior?
Cheers
Hi there,
Were using a custom filter for statuses.
Its working fine when were only using this in the grid properties:
1.//Column code in grid2. 3.columns.Bound(la => la.StatusName)4..Filterable(s => s.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetStatuses", "Status").Data("{ field: 'StatusName' }"))))5. 6.//Grid propert7..Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
but when i add the .ColumnMenu() property to the grid the filtering on the status column doesnt show at all. I need the show/hide column functions in the columnmenu but cant sacrifice the custom status filter.
The serverside code for the datasource looks like this:
01.public ActionResult GetStatuses(string field)02.{03. var statuses = Context.GetAll<Status>(false);04. 05. var viewModels = (from s in statuses06. select new StatusVm() { StatusName = s.Key })07. .ToList();08. 09. return Json(viewModels, JsonRequestBehavior.AllowGet);10.}
Am i missing something obvious here?
Thankful for any input.
