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.
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.
GRİD CODE
I run the program grid height too small but when I minimize or mazimize page grid cover page and normal height. How to grid height 100% when page load?
<div class="portlet-body form" >
#(Html.Kendo().Grid<DoktorModel>()
.Name("DoktorGrid")
.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.ForeignKey(p => p.AkademikUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.AkademikUnvan), "KodId", "Aciklama").Width(200).ClientGroupHeaderTemplate("Akademik Unvan: #= foreignAkademikValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.Bound(p => p.Ad).Width(200).ClientGroupHeaderTemplate("Ad: #= value # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.Bound(p => p.Soyad).Width(200).Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.AnadalUzmanlikId, Uzmanlik.GetUzmanlikList(), "UzmanlikId", "UzmanlikAdi").Width(215).ClientGroupHeaderTemplate("Anadal Uzmanlik: #:foreignAnadalValues[value]# (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.GorevKurumId, Kurum.GetKurumCombo(), "KurumId", "Ad").Width(215).ClientGroupHeaderTemplate("Gorevli Olduğu Kurum: #= foreignGorevKValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.KadroKurumId, Kurum.GetKurumCombo(), "KurumId", "Ad").Width(215).ClientGroupHeaderTemplate("Kadro Kurum: #= foreignKadroKValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.KadroUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.ÇalıştığıUnvan), "KodId", "Aciklama").Width(215).ClientGroupHeaderTemplate("Kadro Unvan: #= foreignKadroUValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.CalistigiUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.ÇalıştığıUnvan), "KodId", "Aciklama").Width(180).ClientGroupHeaderTemplate("Çalıştığı Unvan: #= foreignCalisanUValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.ForeignKey(p => p.IdariGorevUnvan, Kod.GetKodList((int)Enums.KodGrup.IdariGorevUnvan), "KodId", "Aciklama").Width(180).ClientGroupHeaderTemplate("İdari Görev Unvan: #= foreignIdariGorevValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
columns.Bound(p => p.DocentlikTarihi).Format("{0:dd/MM/yyyy}")
;
})
.ToolBar(tools => tools.Excel().Text("Excel Dosyası Olarak Kaydet"))
.ToolBar(t=>t.Custom().Text("Grupları Aç").HtmlAttributes(new { id = "GrupAc" }))
.ToolBar(t=>t.Custom().Text("Grupları Kapat").HtmlAttributes(new { id = "GrupKapat", type = "button", onclick = "GrupKapat(); return false;" }))
//.Pageable(x => x.Info(true))
.Resizable(x => x.Columns(true))
.ColumnMenu()
.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.Row))
.Groupable()
.Events(events => events.DataBound("datachange")
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
//.Batch(false)
.Events(e => e.Error("error_handler"))
.Read(read => read.Action("Doktor_Read", "Doktor").Type(HttpVerbs.Post))
//.PageSize(20)
.Aggregates(aggregates =>
{
aggregates.Add(p => p.AkademikUnvanKodId).Count();
aggregates.Add(p => p.Ad).Count();
aggregates.Add(p => p.AnadalUzmanlikId).Count();
aggregates.Add(p => p.GorevKurumId).Count();
aggregates.Add(p => p.KadroKurumId).Count();
aggregates.Add(p => p.CalistigiUnvanKodId).Count();
aggregates.Add(p => p.KadroUnvanKodId).Count();
aggregates.Add(p => p.IdariGorevUnvan).Count();
})
.Model(m =>
{
m.Id(p => p.DoktorId);
m.Field(p => p.TCKimlikNo);
m.Field(p => p.Ad);
m.Field(p => p.Soyad);
m.Field(p => p.AkademikUnvanKodId);
m.Field(p => p.DocentlikTarihi);
m.Field(p => p.AnadalUzmanlikId);
m.Field(p => p.AnadalUzmanlikId2);
m.Field(p => p.YandalUzmanlikId);
m.Field(p => p.YandalUzmanlikId2);
m.Field(p => p.GorevKurumId);
m.Field(p => p.KadroKurumId);
m.Field(p => p.KadroUnvanKodId);
m.Field(p => p.CalistigiUnvanKodId);
m.Field(p => p.CalistigiUnvanKodId2);
m.Field(p => p.DayanakDurumKodId);
m.Field(p => p.Fotograf);
})))
</div>
MY SCREENSHOT
this is my screenshot when page loaded...
I put the resize function in ondatabund function but it is not working. function ondatabund () { $(window).resize(function () { var gridElement = $("#DoktorGrid"), ... }); }
You are attaching a window.resize handler in dataBound, but this does not mean it will be executed - it won't. So execute the Grid's resizing routine manually in dataBound as well.
I solve the problem give heigth to grid in databound function.
function databound() {
var gridElement = $("#DoktorGrid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
//otherElements.each(function () {
otherElementsHeight += $(".page-content").outerHeight();
console.log("outerHeight" + $(".page-content").outerHeight() + "newHeight" + newHeight)
//});
gridElement.children(".k-grid-content").height( otherElementsHeight-290 );//290 grid outher elements height
}
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
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.