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.
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...
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 have this telerik grid in a asp.net mvc project
<div class="actualGrid" id="actualGrid">
#(Html.Kendo().Grid<AVNO_KPMG.Models.Bench>() //Bench Grid
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Bench").Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Width(100);
columns.Bound(p => p.freeSeats).Title("Free Seats").Width(200).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte"))).HtmlAttributes(new { #class = "FreeSeats" })
.ClientTemplate("<div class='barthingy'><div class='bars_text'><div class='seatsText'><span class=\"bookNotfull\"></span> <b>#=bookedSeats#</b> USED SEATS</div><div class='seatsText'><span class=\"bookfull\"></span> <b>#=freeSeats#</b> TOTAL OFSEATS</div></div><div id='bigbar'><div class='bigbar' style='width:100%; float:left; background-color:rgb(142, 188, 0);'><div ' style='float:right; width:#=bookedSeats *100 / seatsCount#%; background-color:rgb(255, 99, 71); height:16px ' class='b_#=name#' id='temp-log'></div></div></div></div>");
//buttons
columns.Command(command => { command.Custom("checkBench1 ").Text(" AM ").Click("doCheckIn"); command.Custom("checkBench 2").Text(" PM ").Click("doCheckIn"); command.Custom("checkBench3").Text("All Day").Click("doCheckIn"); }).HtmlAttributes(new { #class = "comms#=freeSeats# freeAM#=seatsCount - (bookings_am + bookings_allday)# freePM#=seatsCount - (bookings_pm + bookings_allday)# freeALLDAY#=freeSeats#" }).Title("Check in").Width(200);
})
.Pageable()
.Sortable()
.Scrollable(scrolling => scrolling.Enabled(false))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
//.HtmlAttributes(new { style = "height:530px;" })
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
//.Sort(sort => sort.Add("freeSeats").Ascending())
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.id))
.Read(read => read.Action("GetBenches", "Deskcheckin"))
)
)
</div>
Everytime i press on of the buttons in the command column, the url gets a # in front of it, even if i set the buttons to do nothing.
my url is something like
http://www.aaaaaa.com/stuff
When i press one of the buttons i get
http://www.aaaaaa.com/stuff#
How can i disable this?
Please try with the below code snippet. For custom command button grid generate anchor control for same. By default it set href='#' and I have replaced it with href='javascript:void(0)'.
<div>
#(Html.Kendo().Grid<MvcApplication1.Models.Student>()
.Name("grid")
.Columns(columns =>
{
..........
..........
columns.Command(command => { command.Custom("checkBench1").Text("AM").Click("doCheckIn"); }).Title("Check in").Width(200);
})
.Events(events => events.DataBound("onDataBound"))
..........
..........
)
</div>
<script>
function doCheckIn() {
alert('a');
}
function onDataBound(arg) {
$("#.k-grid-checkBench1").attr('href', 'javascript:void(0)');
}
</script>
Let me know if any concern.
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
I 'm working on a project and i have a problem. I decide to use kendo grid to help create grid. My grid have a field allow user to upload multiple file in each row.
I want after user upload file, file name will be asign to FileAttach column and send to server when i click save.
One more thing that those files will appear in FileAttach column with a tiny button to delete that file.
I try but it 's not work
I 'm not good at kendo tempalte and javascript so i stuck at this. Hope someone help me, it take me more than a week.
#(Html.Kendo().Grid<TamCao.Core.DomainModel.AcademicDetail>()
.Name("Academic_Grid")
.Columns(columns =>
{
columns.Bound(a => a.ID).Visible(false);
columns.Bound(a => a.PlaceName);
columns.Bound(a => a.From).Format("{0:dd/MM/yyyy}").Width(100);
columns.Bound(a => a.To).Format("{0:dd/MM/yyyy}").Width(100);
columns.Bound(a => a.Degree);
columns.Bound(a => a.DateObtained).Format("{0:dd/MM/yyyy}").Width(180);
columns.Bound(a => a.FileAttach).Template(#<Text> #= FileAttach # </Text>);
columns.Template(#<Text></Text>).ClientTemplate("<input type='file' id='uploadAcademicDetail' multiple=multiple name='uploadAcademicDetail'/>").Width(200).Title("File Attatch"); // Upload File
columns.Command(command => command.Destroy()).Width(90);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(a => a.ID);
})
.PageSize(20)
.Read(read => read.Action("AcademicDetail_Read", "AcademicExperience"))
.Create(create => create.Action("AcademicDetail_Create", "AcademicExperience"))
.Update(update => update.Action("AcademicDetail_Update", "AcademicExperience"))
.Destroy(destroy => destroy.Action("AcademicDetail_Destroy", "AcademicExperience"))
)
.Events(e =>
{
e.DataBound("AcademicDataBound");
})
)
</div>
<script type="text/javascript">
function AcademicDataBound(e)
{
$("input[type='file']").kendoUpload({
multiple: true,
async: {
saveUrl: '/AcademicExperience/UploadAcademicDetailAttach',
},
upload: function (e) {
},
success: function (e) {
var grid = $("#Academic_Grid").getKendoGrid();
alert(grid.dataItem($("FileAttach")));
}
});
}
</script>