I have the following code :
<div overflow:auto class="chart-wrapper">
#(Html.Kendo().Chart(Model).Name("chart")
.Title(title => title
.Text("Comments per day")
.Align(ChartTextAlignment.Left)
).Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Column(
model => model.SE
);
series.Column(model => model.SL)
.Labels(labels => labels.Background("transparent").Visible(true));
})
.CategoryAxis(axis => axis
.Categories(model => model.Year )
.MajorGridLines(lines => lines.Visible(false))
.Line(line => line.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Max(28)
.MajorGridLines(lines => lines.Visible(false))
.Visible(false)
)
)
</div>
I would like to add vertical scrolling to this chart. How would I go about this?
Kendo has scrolling and panning, which is very effective in my experience. I would note, you must set min/max counts on the category axis to make it work.
https://demos.telerik.com/aspnet-mvc/bar-charts/pan-and-zoom
Related
I have a kendo grid with filter operators on it. the problem is that the filters are extending beyond the grid with and resulting in a view which makes them look cut off where the column ends. Here is an image:
Code:
<div id="gridDiv">
#(Html.Kendo().Grid<Website.Models.VisitModel.VisitGridModel>()
.Name("grid")
.ToolBar(toolbar =>
{
toolbar.Custom().Text("Create").Action("AddPatient", "Patient").HtmlAttributes(new { #class = "k-primary k-button" });
})
.Columns(column =>
{
column.Bound(c => c.DateS);
column.Bound(c => c.PreScreening);
column.Bound(c => c.Screening);
column.Bound(c => c.ReadyMadeReaders);
column.Bound(c => c.EyeExam);
column.Bound(c => c.Glasses);
column.Bound(c => c.Contacts);
column.Bound(c => c.RetinalGrading);
})
.Events(e =>
{
})
.Sortable()
.Scrollable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.NoRecords("No data")
//.ClientDetailTemplateId("template")
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Filterable(f => f.Operators(o => o.ForString(fs => fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
.Pageable(page => page
.Refresh(true)
.ButtonCount(5)
.PageSizes(new string[] { "5", "10", "20", "100", "All" })
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Sort(s =>
{
s.Add(a => a.ID).Ascending();
})
.Model(model =>
{
model.Id(i => i.ID);
})
.Read("ReadAllVisits", "EyeTestReport")
.Events(events => events.Error("Shared.onGridDataSourceError").RequestEnd("Shared.onGridRequestEnd"))
)
)
How can I get the columns to be the right size?
I found out you simply have to override kendo's styling in the pages own styling file or styling tag. like this:
.k-grid-header .k-header:first-child {
border-left-width: 0;
width: 50% !important;
}
Screen:
column.Bound(c => c.DateS).Width(150);
column.Bound(c => c.PreScreening).Width(150);
column.Bound(c => c.Screening).Width(150);
try adding width to the column bound and see will resolve your issue...
I wanna draw a scatter kendo chart with four area(Quadrant).
How i can draw custom lines across xAxis and YAxix?
and How i can paint each area different?
(i'm using MVC wrapper but any help is useful)
<div class="demo-section k-content wide" dir="ltr">
#(Html.Kendo().Chart(Model)
.Name("chart")
.Title("chart")
.Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Scatter(model => model.QuestionsAVG, model => model.Weight);
})
.XAxis(x => x
.Numeric()
.Title(title => title.Text("Average"))
.Labels(labels => labels.Format("{0}")).Min(0).Max(10)
//.PlotBands(bands =>
//{
// bands.Add().From(5).To(10).Color("#c00").Opacity(0.1);
//})
.YAxis(y => y
.Numeric()
.Title(title => title.Text("Weight"))
.PlotBands(bands =>
{
bands.Add().From(5).To(10).Color("#c00").Opacity(0.1);
})
.Labels(labels => labels.Format("{0}")).Max(10)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.Question #")
)
)
</div>
I want somthing like
this.
Kendo grid is too slow when grouping. My first grouping took one minute approximately and second grouping not working. when I made second grouping,I got maxjsonlength error. How can I faster kendo grid grouping on big data? My grid is clasic grid code without paging and virtual paging in mvc. and my data is select * from mytable. Data count is 2800. here is the code;
#(Html.Kendo().Grid<DoktorModel>()
.Name("DoktorGrid")
//.HtmlAttributes(new { style = "height: 600px;" })
.Columns(columns =>
{
columns.Bound(p => p.Fotograf).ClientTemplate(#"<img class='doktor_photo' src='" + Url.Content("~/Photo/#:data.Fotograf#") + "'/>").Width(100).Title("Fotoğraf").Filterable(false).IncludeInMenu(false);
columns.Bound(p => p.Ad).Width(200).ClientGroupHeaderTemplate("Ad: #= value # (Sayı: #= count#)");
columns.Bound(p => p.Soyad).Width(200);
columns.Bound(p => p.DogumTarihi).Format("{0:dd/MM/yyyy}").Width(150);
...
})
.ToolBar(X => X.Template(#<text>
<div class="toolbar">
<div>
<a class="k-button k-button-icontext k-grid-excel" href="\#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
<a class="k-button" id="GrupAc"><span class="k-icon k-i-close"></span>Grupları Aç</a>
<a class="k-button" id="GrupKapat"><span class="k-icon k-i-close"></span>Grupları Kapat</a>
<div id="menu"></div>
</div>
</div>
</text>))
.Resizable(x => x.Columns(true))
.Selectable()
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.AllPages(true)
.ProxyURL(Url.Action("Doktor_Excel_Export_Save", "Doktor"))
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("İçerir")
)).Mode(GridFilterMode.Menu))
.Groupable()
.Events(events => events.DataBound("datachange")
)
.DataSource(dataSource => dataSource
.Ajax()
//.Batch(false)
.Events(e => e.Error("error_handler"))
.Read(read => read.Action("Doktor_Read", "Doktor").Type(HttpVerbs.Post))
.Aggregates(aggregates =>
{
aggregates.Add(p => p.AkademikUnvanKodId).Count();
...
})
.Model(m =>
{
m.Id(p => p.DoktorId);
m.Field(p => p.TCKimlikNo);
...
})))
And my controller code;
[HttpPost]
public JsonResult Doktor_Read([DataSourceRequest] DataSourceRequest request)
{
var result = Business.Doktor.GetDoktorList().ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
AND ERROR İS;
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
I'm relatively new in kendo chart. I have a chart as following;
#(Html.Kendo().Chart<PlodWareWeb.Models.TotalDrilledBySize>()
.Name("totalDrilledBySizeChart")
.Title("Total Drilled By Size")
.ChartArea(chartArea => chartArea.Background("transparent").Height(350))
.DataSource(dataSource => dataSource.Read(read => read.Action("GetTotalDrilledBySizeChartData", "Home")))
.Legend(legend => legend.Visible(false))
.Series(series =>
{
series.Column(model => model.TotalDrilled, model => model.GroupName);
})
.CategoryAxis(axis => axis.Categories(model => model.HoleSize).Line(line => line.Visible(true)).Labels(labels => labels.Rotation(0)))
.CategoryAxis(axis => axis.Categories(model => model.DisplayName)
.Line(line => line.Visible(false))
.Labels(labels => labels.Rotation(-90).Format("{0}")))
.ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}")))
.Tooltip(tooltip => tooltip.Visible(true).Format("{0}%").Template("#= series.name #: #= value #")
)
)
How can I show "model.DisplayName" and "model.HoleSize" as a Tooltip in Template? I've tried the following but it gives me "undefined". Can anyone help? Thank you.
.Template("#= model.DisplayName #: #= series.name #: #= value #")
or
.Template("#= CategoryAxis.model.DisplayName #: #= series.name #: #= value #")
To access the data of the chart you need to use "dataItem" as follows;
.Tooltip(tooltip => tooltip.Visible(true).Format("{0}%").Template("#= dataItem.DisplayName # #= dataItem.HoleSize #: #= series.name #: #= value #")
Hope this helps.
in my kendo grid, I have 3 columns, balance, adjustment, and adjustment balance. adjustment balance is the total of balance and adjustment. it will be calculated. If I make a change to adjustment field. adjustment balance should automatically changed.
I am binding save event to grid.
$("#DebtGrid").data("kendoGrid").bind("save", onDebtGridEditComplete);
function onDebtGridEditComplete(e) {
debugger;
var grid = $('#NonrecourseDebtGrid').data().kendoGrid;
var dataItem = e.model;
e.model.set('TaxAdjustments', e.values.TaxAdjustments);
var newBalance = getAdjBalance(dataItem.TaxBalance, e.values.TaxAdjustments);
e.model.set('TaxAdjustmentBalance', newBalance);
//grid.refresh();
}
I debugged the following function, I see the newBalance is calcualted and after I set the textadjustmentbalance. I checked the e.model, nothing changed. it still has the old value there.
e.model.set('TaxAdjustmentBalance', newBalance);
here's my grid.
#(Html.Kendo().Grid<LiabilityVM>()
.Name("DebtGrid")
.HtmlAttributes(new { style = "height: 300px;" })
.Columns(columns =>
{
columns.Bound(i => i.Id).Visible(false);
columns.Bound(i => i.AccountId).Visible(false);
columns.Bound(i => i.AccountNumber)
.Title("Account #")
.HtmlAttributes(new { nowrap = "nowrap" })
.Width(70);
columns.Bound(i => i.TaxBalance)
.Title("Balance")
.HtmlAttributes(textAlign)
.Width(70);
columns.Bound(i => i.TaxAdjustments)
.Title("Adjustments")
.EditorTemplateName("AmountEditor")
.HtmlAttributes(textAlign)
.Width(70)
.ClientFooterTemplate("<span><b> Total: </b></span>")
.FooterHtmlAttributes(textAlign);
columns.Bound(i => i.TaxAdjustmentBalance)
.Title("Adj. Balance")
.ClientTemplate("<span href='\\#' style='white-space:nowrap'>#= TaxAdjustmentBalance #</span>")
.HtmlAttributes(textAlign)
.Width(70)
.ClientFooterTemplate("#= formatAmount(getTotalAdjBalance('NonrecourseDebtGrid'), '{0:c0}') #").FooterHtmlAttributes(textAlign);
columns.Bound(i => i.IsSuppressed)
.Title("Suppress")
.ClientTemplate("#= showCheckBox(IsSuppressed,Source, Id) #")
.Width(50)
.Sortable(false)
.Filterable(false);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(grid => grid.Ajax()
.Batch(true)
.Model(model => {
model.Id(i => i.Id);
model.Field(p => p.AccountNumber).Editable(false);
model.Field(p => p.TaxBalance).Editable(false);
model.Field(p => p.TaxAdjustmentBalance).Editable(false);
})
.ServerOperation(true)
.Create(create => create.Action("Update", "test", parameters))
.Read(read => read.Action("Get", "test", parameters))
.Update(update => update.Action("Update", "test", parameters))
.Aggregates(aggregates =>
{
aggregates.Add(p => p.TaxAdjustmentBalance).Sum();
})
)
.Sortable()
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.Scrollable()
)
This is happening because you have set the field to be non-editable.
model.Field(p => p.TaxAdjustmentBalance).Editable(false);
You can try to make the field editable and create custom editor which just displays the value, so the users cant edit it.