I'm trying to get my chart title to be dynamic based on data in my chart. However, since changing my ViewModel, I'm not getting any data in the chart to show up. Here's my code so far.
ViewModel:
public class TargetZeroDetail
{
public String Title { get; set; }
public List<
TargetZeroDetails
> Details { get; set; }
}
public class TargetZeroDetails
{
public DateTime DetailDate { get; set; }
public String ShortDetailDate
{
get
{
return String.Format("{0:M/dd}", DetailDate);
}
}
public Decimal Score { get; set; }
}
Controller:
public ActionResult Index()
{
return View();
}
public ActionResult GetChartData([DataSourceRequest] DataSourceRequest request, DateTime passedDate)
{
TargetZeroDetail data = Utility.GetTargetZeroData(passedDate);
return Json(data, JsonRequestBehavior.AllowGet);
}
View:
@model Utilities.TargetZeroDetail
<
head
>
<
link
href
=
"~/Content/kendo/2015.3.1111/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"~/Content/kendo/2015.3.1111/kendo.material.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"~/Content/kendo/2015.3.1111/kendo.blueopal.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"~/Scripts/kendo/2015.3.1111/jquery.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo/2015.3.1111/kendo.all.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js"
></
script
>
</
head
>
<
body
>
@{
DateTime dateToPass = Convert.ToDateTime(Request.QueryString["date"]);
if (dateToPass == DateTime.MinValue)
{
dateToPass = new DateTime(DateTime.Now.Date.Year, DateTime.Now.Month, 1);
}
}
<
table
>
<
tr
>
<
td
valign
=
"top"
>
@(Html.Kendo().Button()
.Name("prevButton")
.Content("Previous Month")
.Icon("expand-w")
.Events(ev => ev.Click("onPrevClick"))
)
</
td
>
<
td
>
<
div
id
=
"example"
>
<
div
id
=
"chart"
>
@(Html.Kendo().Chart(Model.Details)
.Name("targetZeroChart")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetChartData", "Home", new { passedDate = dateToPass }))
)
.ChartArea(ca => ca.Height(690).Width(690))
.Title(Model.Title)
.Legend(false)
.SeriesDefaults(series => series
.RadarLine()
.Width(0)
.Markers(markers => markers
.Visible(true)
.Background("blue")
.Border(border => border
.Width(2)
.Color("blue")
)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Background("white")
)
)
.Series(series => series
.RadarLine(d => d.Score)
)
.CategoryAxis(axis => axis
.Categories(m => m.ShortDetailDate)
)
.ValueAxis(axis => axis.Numeric()
.Labels(l => l.Visible(false))
.Line(l => l.Visible(false))
.PlotBands(pb =>
{
pb.Add().Color("green").From(0).To(1).Opacity(0.5);
pb.Add().Color("yellow").From(1).To(2).Opacity(0.5);
pb.Add().Color("gold").From(2).To(3).Opacity(0.5);
pb.Add().Color("orange").From(3).To(4).Opacity(0.5);
pb.Add().Color("red").From(4).To(10).Opacity(0.5);
})
)
)
</
div
>
</
div
>
</
td
>
<
td
valign
=
"top"
>
@(Html.Kendo().Button()
.Name("nextButton")
.Content("Next Month")
.Icon("expand")
.Events(ev => ev.Click("onNextClick"))
.HtmlAttributes(new
{
@class = "right-icon"
})
)
</
td
>
</
tr
>
</
table
>
<
style
>
.right-icon .km-button .km-icon {
float: right;
margin-left: 0.3em;
}
</
style
>
<
script
>
function onPrevClick(e) {
var newAddress = getPathFromUrl(window.location.href);
if (newAddress.indexOf("Home") <
0
) {
newAddress += "Home/Index";
}
newAddress += "?date=@dateToPass.AddMonths(-1).Date.ToShortDateString()";
window.location.replace(newAddress);
}
function onNextClick(e) {
var
newAddress
=
getPathFromUrl
(window.location.href);
if (newAddress.indexOf("Home") < 0) {
newAddress += "Home/Index";
}
newAddress += "?date=@dateToPass.AddMonths(1).Date.ToShortDateString()";
window.location.replace(newAddress);
}
function getPathFromUrl(url) {
return url.split(/[?#]/)[0];
}
$("#chart").css("width", "700px").css("height", "700px")
.data("kendoChart");
</script>
</
body
>
I'm assuming that since my initial call to the controller simply returns an empty View, that's why this is happening. However if I were to make the call to get data to return to my view initially, it still doesn't show up.
What am I missing here?
unicode Character not supported.
I am at a disadvantage because not only am I new to Kendo UI, but I am new to MVC as well.
Using the Save method inside Kendo UI Grid, I ALSO need to access a selected value from a Kendo Drop Down List.
For the life of me, I cannot figure out how to access the value.
Can someone assist?
Here is some code:
Drop Down List:
@(Html.Kendo().DropDownListFor(m => m.SelectedPrinter)
.Name("Printers")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select printer...")
.DataTextField("Name")
.DataValueField("ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadePrinters", "Home")
.Data("filterProducts");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("Locations")
)
Grid:
.DataSource(dataSource => dataSource.Ajax()
.Model(
model =>
{
model.Field(f => f.UserName).Editable(false);
model.Field(f => f.FirstName).Editable(false);
model.Field(f => f.LastName).Editable(false);
model.Field(f => f.PrincipalCreationDate).Editable(false);
model.Id(p => p.UserName);
}
)
.Read("Editing_Read", "Home")
.Update("Editing_Update", "Home")
.ServerOperation(false)
.Batch(true)
Controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<User> usr, UsersViewModel uvm, string SelectedPrinter)
{
// Check if model is valid
// Get User from UserID
// Build Trigger File
// Send to Bartender Trigger Directory
if (usr != null && ModelState.IsValid)
{
foreach (var product in usr)
{
// productService.Update(product);
}
}
return Json(usr.ToDataSourceResult(request, ModelState));
}
Any Help is appreciated.
Hi Team,
I am using Kendo MVC Grid control with model binding, and in jquery document.ready function i am updating the grid height manually according to page height.
Below is my code
<div id="div-shipmentsgrid-wrapper" style="width:100%; height:800px;">
@(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
.Name("grdshipmentssummary")
.Columns(columns =>
{
columns.Bound(p => p.PROJECTCODE).Title("Sl").Width(55);
columns.Bound(p => p.PRODUCTCODE).Title("Product Code").Width(150);
columns.Bound(p => p.CUSTOMERCODE).Title("Customer").Width(200);
columns.Bound(p => p.PROJECTCODE).Title("Project Code").Width(150);
columns.Bound(p => p.SHIPDESCR).Title("Shipping Description").Width(250);
columns.Bound(p => p.PERCENTAGECOMP).Title("% Comp").Width(100);
columns.Bound(p => p.STATUSDESCR).Title("Status").Width(100);
columns.Bound(p => p.COMMITTED).Title("Commit").Format("{0:yyyy-MM-dd}").Width(120);
})
.Pageable()
.Sortable()
.Filterable(filter => filter.Extra(false))
.Resizable(resize => resize.Columns(true)).Filterable(filter => filter.Extra(false))
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.Events(events => events.Change("onShipmentSummarygridRowChange").DataBound("onDataBound").DataBinding("onDataBinding"))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.ID))
.PageSize((int)ViewBag.PageSize)
)
)
@*<div id="grdshipmentssummary"></div>*@
</div>
<script type="text/javascript">
$(document).ready(function () {
var exHeight = 185;//navbar footer and spaces
$("#div-shipmentsgrid-wrapper").css("height", parseInt($(window).height().toString().replace("px", "")) - exHeight);
$("#div-shipmentsgrid-wrapper div.k-grid-content").css("height", parseInt($("#div-shipmentsgrid-wrapper").css("height").toString().replace("px", "")) - 60);
});
</script>
Above code is working fine and setting grid height correctly.
But as i am using model binding, page is taking time to load and grid as well. Meanwhile between pageload and document.ready grid is loading with half height of the page. My question is, is there any grid preload event where i can find the div.k-grid-content.
Hi
I'm attempting to wire up a Kendo grid to a web api. I found two great examples on the site: here and here.
Basically says configure the data source like this:
.DataSource(dataSource => dataSource
.WebApi()
.Model(model =>
{
model.Id(product => product.ProductID);
// Specify the property which is the unique identifier of the model
model.Field(product => product.ProductID).Editable(
false
);
// Make the ProductID property not editable
})
.Create(create => create.Url(Url.HttpRouteUrl(
"DefaultApi"
,
new
{ controller =
"Products"
})))
// Action invoked when the user saves a new data item
.Read(read => read.Url(Url.HttpRouteUrl(
"DefaultApi"
,
new
{ controller =
"Products"
})))
// Action invoked when the grid needs data
.Update(update => update.Url(Url.HttpRouteUrl(
"DefaultApi"
,
new
{ controller =
"Products"
, id =
"{0}"
})))
// Action invoked when the user saves an updated data item
.Destroy(destroy => destroy.Url(Url.HttpRouteUrl(
"DefaultApi"
,
new
{ controller =
"Products"
, id =
"{0}"
})))
// Action invoked when the user removes a data item
)
I'm using version 2016.1.112 and .WebApi() isn't available. Any idea how the hook the data source to a web api without it?
Hi,
I am Evaluating telerik Kendo Grid for MVC.
I have dynamic Datatable which I would like to bind to the grid.I can able to bind the grid but unable to do paging,filtering etc.
Once I go to next page,the grid collapase to empty with page numbers set to 0.
@(Html.Kendo().Grid<System.Data.DataTable>().Name("Grid")
.DataSource(d => d.Ajax().PageSize(2)
.Read(r => r.Action("ReadData", "Home"))
)
.Columns(col =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
col.Bound(column.ColumnName);
}
}).Sortable()
.Filterable()
.Pageable()
Hello,
I have a Scheduler Resources and i must show in cascade showing with 4 column
Example
|Name|Type|Status|Active|Days|
|A | T | T | 1 | Days|
|B | T | K | 0 | Days|
but i cant find how to do this. All examples show included resources not connected others.
I have follow Kendo UI for ASP.NET MVC Local binding example to create my pivot view.
At my pivot grid, the rows is group by a date, however, the date display on the row header is a long date format. How to format a date in a row header column to a short date?
At the following code, I am able to use the template to format a date field to a short the format, but not on the row header column. please see the picture for the detail.
@model IEnumerable<
TelerikMVCStudy.Domain.Dailyforecast_view
>
@{
ViewBag.Title = "Index";
}
<
h2
>Pivot</
h2
>
@(Html.Kendo().PivotConfigurator()
.Name("configurator")
.HtmlAttributes( new { @class = "hidden-on-narrow"})
.Height(570)
)
@(Html.Kendo().PivotGrid<
TelerikMVCStudy.Domain.Dailyforecast_view
>()
.Name("pivotgrid")
.HtmlAttributes(new { @class = "hidden-on-narrow" })
.Configurator("#configurator")
.Height(579)
.BindTo(Model)
.DataCellTemplateId("dataCellTemplate")
.ColumnHeaderTemplateId("headerTemplate")
.RowHeaderTemplateId("rowHeaderTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Schema(schema => schema
.Model(m => m.Field("Utility", typeof(string)).From("Utility"))
.Cube(cube => cube
.Dimensions(dimensions =>
{
dimensions.Add(model => model.Portfolio).Caption("Portfolio");
dimensions.Add(model => model.Utility).Caption("All Utility");
dimensions.Add(model => model.CalendarDate.ToShortDateString()).Caption("CalendarDate");
})
.Measures(measures =>
{
measures.Add("sum").Format("{0:N4}").Field(model => model.MMBtu).AggregateName("sum");
measures.Add("max").Field(model => model.CalendarDate).AggregateName("max");
})
)
)
.Columns(columns =>
{
columns.Add("Utility").Expand(true);
})
.Rows(rows => rows.Add("CalendarDate").Expand(true))
.Measures(measures => measures.Values("sum"))
.Events(e => e.Error("onError"))
)
)
<
script
>
function onError(e) {
alert("error: " + kendo.stringify(e.errors[0]));
}
</
script
>
<
script
id
=
"dataCellTemplate"
type
=
"text/x-kendo-tmpl"
>
# var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
# var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
# var value = (dataItem.value instanceof Date) ? kendo.toString(dataItem.value,"d") : kendo.toString(kendo.parseFloat(dataItem.value) ||"N/A", "N4"); #
# if (columnMember.children.length || rowMember.children.length) { #
<
em
style
=
"color: red"
>#: value # (total)</
em
>
# } else { #
#: value #
# } #
</
script
>
<
script
id
=
"headerTemplate"
type
=
"text/x-kendo-tmpl"
>
# if (!member.children.length) { #
<
em
>#: member.caption #</
em
>
# } else { #
#: member.caption #
# } #
</
script
>
<
script
id
=
"rowHeaderTemplate"
type
=
"text/x-kendo-tmpl"
>
# if (!member.children.length) { #
<
em
>#: member.caption #</
em
>
# } else { #
#: member.caption #
# } #
</
script
>
<
style
>
#pivotgrid
{
display: inline-block;
vertical-align: top;
width: 70%;
}
#configurator
{
display: inline-block;
vertical-align: top;
}
.hidden-on-narrow {
display: inline-block;
vertical-align: top;
}
</
style
>