I have a kendo chart with date time series on x-axis as below but i wanted to fix the number of labels on the axis. Could you please help me on this how to acheive.
#(Html.Kendo().Chart(Model.ParameterValueList)
.Name("chart")
.Title("Chart Title")
.DataSource(ds => ds
.Group(group => group.Add(model => model.Parameter.Name))
)
.Series(series =>
{
series.Line(Model.ParameterValueList).CategoryField("ReceiveTime").Field("Value").Stack(false);
})
.CategoryAxis(axis => axis
.Categories(model => model.ReceiveTime).Date().RoundToBaseUnit(true)
.Labels(l => l.Rotation(-45).Format("dd MMM yyyy hh:mm:ss").Step(2))
.MajorGridLines(x=>x.Step(5))
.MajorTicks(x=>x.Size(5))
)
.Legend(legend => legend
.Visible(true).Position(ChartLegendPosition.Right)
)
.ChartArea(a => a.Width(800).Height(250))
.Tooltip(t => t.Visible(true).Template("${series.name} : ${value}"))
)
Related
In MVC application I am using Kendo column charts and I have the data as below.
Type
Percentage
Date
Color
A
25.5
2/12
#2456C7
B
70
2/13
#2456C8
B
50
2/14
#2456C8
B
55.5
2/15
#2456C8
A
60.3
2/13
#2456C8
I want to create a column chart with this data, chart should be categorized by Date and there should be multiple columns depending on the type.
I wrote the below code snippet but it isn't working, cannot see the data on UI.
#(Html.Kendo().Chart<EntitiesA.Report>
()
.Name("Report")
.Title("ReportA")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("MethodReport", "ReportController"))
.Group(group => group.Add(model => model.Type))
.Sort(sort => sort.Add(model => model.Date).Ascending())
)
.Series(series =>
{
series.Column(model => model.Percentage)
.Name("#= group.value # (Percentage)").CategoryField("Date").ColorField("Color");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.CategoryAxis(axis => axis
.Labels(labels => labels.Format("MM/DD"))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(20)
.Max(100)
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)
I don't see any data in the graph it is blank how to fix it, am I missing any logic or piece of code.
If I'm not mistaken you want a Date axis, right? If so you can also specify that via the CategoryAxis configuration:
#(Html.Kendo().Chart<Report>()
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
.Labels(labels => labels.Format("MM/dd"))
)
...
)
Passing some sample data renders the Chart - example
I'm trying to set a min and max values for datetime picker control inside a grid. The value needs to be set dynamically, based on the value of another datepicker on the form.
I had try handling the onEdit event and trying to find the datetime picker control inside the row been edited to set those values without looking.
Whats is the proper way of restricting date ranges in Kendo Grid MVC inline editing?
This is how the grid is created:
<div>
#(Html.Kendo().Grid<CpcPrevisionUnidadesDto>()
.Name("gridListado")
.HtmlAttributes(new { #class = "kendo-grid-" })
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.IdCpcPrevisionParadasUnidadesDto).Hidden();
columns.Bound(c => c.IdCpcUnidadesProceso).Hidden();
columns.Bound(c => c.CodigoUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Unidad").ToString());
columns.Bound(c => c.DescripcionUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Nombre").ToString());
columns.Bound(c => c.FechaParada).Title(Html.Resource("CPC_CU_DP003_FechaParada").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
columns.Bound(c => c.FechaArranque).Title(Html.Resource("CPC_CU_DP003_FechaArranque").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
columns.Bound(c => c.Observaciones).Title(Html.Resource("CPC_CU_DP003_Observaciones").ToString());
columns.Template(c => { }).Title(" ").Width(40).ClientTemplate("#=menuRuedaTemplate([uid])#").HtmlAttributes(new { style = "overflow: visible;" });
})
.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.Read(read => read.Action("BuscarPrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Data("setParametrosListado"))
.Create(create => create.Action("CreatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
.Update(update => update.Action("UpdatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
.Sort(sort => sort.Add("CodigoUnidadProceso").Ascending())
.Events(e => e.Error("screenErrorHandling"))
.Model(model => model.Id(p => p.IdCpcPrevisionParadasUnidadesDto))
)
.Sortable()
.Navigatable()
.Pageable(pager => pager.Messages(messages => messages.Display(Html.Resource("Mensaje_Grid_Datos").ToString()))
.Messages(m => m.Empty(Html.Resource("Mensaje_Grid_SinDatos").ToString())))
.Resizable(r => r.Columns(true))
.Events(e => e.DataBound("dataBoundGrid").Edit("onEdit"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(toolbar => toolbar.Save().SaveText(Html.Resource("MAIN_Guardar").ToString()).CancelText(Html.Resource("MAIN_Cancelar").ToString())))
</div>
This is the date editor template:
#model DateTime?
#(Html.Kendo().DatePickerFor(m => m))
You need to edit the HTML for your DatePicker and specify values for Min and Max. In this example, you will only be able to choose past values from this year.
#(Html.Kendo().DatePickerFor(m => m)
.Min("01/01/2016")
.Max(DateTime.Now)
)
If you need to set the value dynamically, you can try this, just get the value you need:
$("#Date").data("kendoDatePicker").min(new Date(2015, 0, 1))
same for .max()
Try that on your "onEdit" event, when the datepicker is created, and let me know if you need more help
I am a new babie for Kendo UI for MVC, I am trying to customise row color when doing batch editing for a grid, I looked in the internet but couldn't find any info. After editing a cell for batch editing grid by default Kendo add a small red spot at the top left hand side of the cell , what I want to achieve after editing any cell the whole row for that record change change it color. I would like to change the row to green for example to give the user more visibility what row have been edited before click save. I would really app if someone could help me.
code
#(Html.Kendo().Grid<MvcKendo.Models.Availablity>().Name("grid")
.Columns( columns => {
columns.Bound(c => c.Id);
columns.Bound(c => c.TimeFrom);
columns.Bound(c => c.TimeTo);
})
.DataSource(datasource => datasource.Ajax().PageSize(5)
.Read("GetDataAvailablity","Home"))
.ClientDetailTemplateId("template")
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("TimeSheet Details").Content(#<text>#TimeSheetDetails()</text>);
})
.ToClientTemplate()
)
#helper TimeSheetDetails()
{
#(Html.Kendo().Grid<MvcKendo.Models.TimeSheet>()
.Name("grid_#=Id#")
.Events(e => {
e.DataBound("onDataBound");
e.Change("ChangeEvent");
})
.Columns(columns =>
{
columns.Bound(t => t.Id);
columns.Bound(t => t.WardName);
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(tb=>tb.Save())
.DataSource(dataSource => dataSource
.Ajax().Batch(true)
.PageSize(5)
.Model(model=>model.Id(x=>x.Id))
.Read(read => read.Action("GetDataTimeSheet", "Home", new { Id = "#=Id#" }))
.Update(update => update.Action("Editing_Update", "Home"))
.Events(events => events.Error("error_handler"))
)
.Pageable().Sortable().ToClientTemplate()
)
![enter image description here][2]}
You can make use of the save event in Kendo grid to achieve this
C#
.Events(events => events.Save("onSave")
Javascript
function(e) {
$(e.container).closest("tr").css("background-color","lightgreen");
}
Here's the fiddle for the sample in JS
i'm trying to show value labels at top of the my chart's columns. I use Kendo UI.
I find this example but i havent done it. It's example:
Label Example
How can i show 100 and 20 values like in the example chart?
I have tried this code but i failed.
.Labels(labels => labels
.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
)
Here is my chart code. What can i do? Thanks for your help.
#(Html.Kendo().Chart(Model.TarihVM)
.Name("chart")
.Title(title => title
.Text("my chart title")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Top))
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.date).Name("deneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.digerdeneme, categoryExpression: model => model.date).Name("digerdeneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.KapsamDisi, categoryExpression: model => model.date).Name("Kapsam Dışı Dosyalar")
.Aggregate(ChartSeriesAggregate.Count);
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Months)
.MajorGridLines(lines => lines.Visible(true))
)
.Theme("metro")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #"))
)
Please try below code in the label to resolve the issue:
.Labels(label => label.Visible(true)
.Format("{0:C0}")
.Position(ChartBarLabelsPosition.OutsideEnd))
Here is the answer thank you #D_Learning and #Nitin Mall!
Here is the solution if someone needs it:
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.EvrakTarih)
.Name("deneme")
.Aggregate(ChartSeriesAggregate.Count)
.Labels(labels => labels.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd);
);
I wrote the code to display the information in Kendo UI grid.
It's using the inline grid mode to update and insert the record.
Here the code:
Timesheet.cshtml
#model HalsionTimesheetWebApp.Models.TimesheetIndexData
#(Html.Kendo().Grid(Model.TimesheetPrinting)
.Name("InlineGrid")
.Columns(columns =>
{
columns.Bound(trans => trans.TimesheetId).Title("ID").Hidden(true)
.EditorTemplateName("TimesheetIdEditor");
columns.Bound(trans => trans.StartDate).Title("Date")
.Format("{0:dd MMM yyyy}").EditorTemplateName("DateEditor").Width(100));
columns.Bound(trans => trans.StartTime).Title("Start Time")
.Format("{0:hh:mm tt}").EditorTemplateName("TimeEditor").Width(85);
columns.Bound(trans => trans.FinishTime).Title("Finish Time")
.Format("{0:hh:mm tt}").EditorTemplateName("TimeEditor").Width(85); columns.Bound(trans => trans.TimeTaken).Title("Taken")
.Format("{0:n2}")
.EditorTemplateName("TimeTakenEditor").Width(70);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(250).Title("Action");
})
.ToolBar(toolbar => toolbar.Create().Text("New entry"))
.Editable(editable => editable.Mode(GridEditMode.InLine)
.Sortable()
.Pageable(pager => pager
.PageSizes(new int[] { 5, 10, 20, 50, 100 }).Info(true).Messages(messages => messages.Empty("No entry")
.Display("Showing entries from {0} to {1}. Total entries: {2}").ItemsPerPage("entries per page"))
)// Enable paging
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Events(events => events.Error("datasource_error_handler")
.Model(model =>
{
model.Id(p => p.TimesheetId);
})
.Read(read => read.Action("Read", "Timesheet))
.Create(update => update.Action("Create", "Timesheet"))
.Update(update => update.Action("Update", "Timesheet"))
.Destroy(update => update.Action("Destroy", "Timesheet"))
))
EditorTemplates/DateEditor.cshtml
#model DateTime
#(Html.Kendo().DatePickerFor(m => m)
.Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))
EditorTemplates/TimeEditor.cshtml
#model DateTime?
#(Html.Kendo().TimePickerFor(m => m))
EditorTemplates/TimeTakenEditor.cshtml
#model int
#(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min"))
In this code, each column has its own editor template.
What I need here is to combine some fields into a single cell in inline editing mode.
For example :
Start date and time into a single cell,finish time and time taken into another single cell.
EditorTemplates/StartDateTimeEditor.cshtml
#model DateTime?
#(Html.Kendo().DatePickerFor(m => m) // It's for Start Date
.Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))
#(Html.Kendo().TimePickerFor(m => m)) // It's for Start Time
EditorTemplates/FinishTimeAndTimeTakenEditor.cshtml
#model object
#(Html.Kendo().TimePickerFor(m => m)) // It's for Finish Time
#(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min")) // It's for Time Taken
Is it possible in Kendo UI Grid ?
I don't find any documentation to support this features in Telerik Kendo UI.
Any help is appreciated.
Thank you.
You are so close! Just put two or more of your fields in the same editor template. So maybe start and finish date in the same editor, then that column uses that editor template but only one cell, if you seen what I mean? Imagine the below in a single editor template:
#model DateTime?
#model object
#(Html.Kendo().DatePickerFor(m => m) // It's for Start Date
.Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))
#(Html.Kendo().TimePickerFor(m => m)) // It's for Start Time
EditorTemplates/FinishTimeAndTimeTakenEditor.cshtml
#(Html.Kendo().TimePickerFor(m => m)) // It's for Finish Time
#(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min")) // It's for Time Taken