I am working with a Kendo Chart using the MVC wrappers which I need to add series to at runtime based on data in my Model
I have verified that my model does contain valid data when the chart is about to be rendered
The view's model is a chart widget object which contains a series list
This is simply a list of chart series
Budget Chart Widget
namespace STC.Widgets.Budgeting
{
using System;
using System.Collections.Generic;
using Budget;
using Extensions;
using Helpers;
public class BudgetChartWidget
{
public BudgetChartWidget()
{
SeriesList = new List<IBudgetChartSeries>();
}
public List<IBudgetChartSeries> SeriesList { get; set; }
public string ChartTitle { get; set; }
}
}
**Budget Chart Series**
namespace STC.Widgets.Data.Budgeting
{
using System.Collections.Generic;
public class BudgetChartSeries : IBudgetChartSeries
{
public BudgetChartSeries(string seriesName)
{
Values = new List<IChartValue>();
SeriesName = seriesName;
}
public string SeriesName { get; set; }
public List<IChartValue> Values { get; set; }
}
}
Each chart series then contains values
IChartValue
namespace STC.Widgets.Data.Budgeting
{
using System;
public interface IChartValue
{
string DisplayValue { get; set; }
DateTime Period { get; set; }
double? Value { get; set; }
}
}
Partial View for chart
#using STC.Widgets.Data.Budgeting
#model STC.Widgets.Budgeting.BudgetChartWidget
<div>
#(Html.Kendo().Chart(Model.SeriesList)
.Theme((string) ViewBag.ThemeName)
.Name("BudgetViewer" + 1)
.Series(series =>
{
foreach (var item in Model.SeriesList)
{
series.Column(item.Values).Field("Value").CategoryField("DisplayValue").Name(item.SeriesName);
}
})
.Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
.ValueAxis(axis => axis.Numeric()
.MajorGridLines(lines => lines.Visible(true))
.NarrowRange(true)
.Labels(labels => labels.Format("{0:N0}"))
.Line(line => line.Visible(true))
.Crosshair(crosshair => crosshair.Visible(true)
.Tooltip(t => t.Visible(true)))
)
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(-90))
.MajorGridLines(lines => lines.Visible(false))
.Crosshair(crosshair => crosshair.Visible(true)
.Tooltip(t => t.Visible(true)))
)
.Tooltip(tooltip => tooltip.Visible(true).Format("{0:N0}").Shared(true)))
</div>
When I run this the series are shown in the bottom legend but no data shows in the graph
I have checked and there are no Javascript errors
When I use Internet Explorer to view the source of the chart I can see that the data is there
I cant see anything wrong with the way I have created each series, I have even tried varying ways of passing the parameters.
The only one that is relevant to my situation is the one I am using
Can anyone see if I have missed something really obvious please?
Paul
I just had a similar issue, in my case the chart was not shown initially but when I clicked on the legend the chart was shown as expected. After inspecting it seems that the chart was not resizing correctly initially.
<div class="chart-wrapper">
#(Html.Kendo().Chart(...)
.....
</div>
$(document).ready(function () {kendo.resize($(".chart-wrapper"));}); seem to fix this.
Related
I am trying to get image files from the database and bind it to a KendoUI ListView. The problem is that it is not showing images at all.
This is what I have done:
View
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="#Url.Content("#:PhotoID# + #:MIMEType#")" />
</div>
</script>
<div id="imageListView2" class="demo-section">
#(Html.Kendo().ListView<WorcesterMarble.ViewModels.PhotosViewModel>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("GetImages", "StockReceiptsGrid").Data("passStockIDToListView"));
dataSource.PageSize(1);
})
.Pageable()
.Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
//.Events(events => events.Change("onChange").DataBound("onDataBound"))
)
</div>
Controller
public JsonResult GetImages([DataSourceRequest] DataSourceRequest request, int stockReceiptID)
{
var photos = _stockPhotosRepository.GetStocReceiptkPhotos(stockReceiptID).ToList();
var photosList = new List<PhotosViewModel>();
//var photosList = new List<FileContentResult>();
if (photos.Count != 0)
{
foreach (var stockPhoto in photos)
{
var photoVm = new PhotosViewModel();
photoVm.PhotoID = stockPhoto.PhotoID;
photoVm.Image = stockPhoto.ImageData;
photoVm.MIMEType = stockPhoto.MIMEType;
// FileContentResult file = File(stockPhoto.ImageData, stockPhoto.MIMEType);
photosList.Add(photoVm);
}
return Json(photosList.ToList(), JsonRequestBehavior.AllowGet);
}
else
{
return null;
//FilePathResult file = this.File("/Content/Images/80.jpeg", "image/jpeg");
//return file;
}
return null;
}
Photo View Model:
public class PhotosViewModel
{
public int PhotoID { get; set; }
public byte[] Image { get; set; }
public string MIMEType { get; set; }
public int StockReceiptID { get; set; }
}
I am not sure if the problem is caused by the image url setting in the template. as you see it is not actually a url because the image is not saved anywhere except from the database. this is a screenshot of how the listview looks like; simply blank even though there must 15 images displayed!
Please let me know any clues or solutions to this problem.
I know this is a bit older, but what you need to do is change the line return Json(photosList.ToList(), JsonRequestBehavior.AllowGet); to the following:
return Json(photosList.ToDataSourceResult(request),
JsonRequestBehavior.AllowGet);
If the method ToDataSourceResult is not recognized, you have to add
using Kendo.Mvc.Extensions;
on top of your document.
It looks like you're missing a return in your controller (just before the end of your if)
return Json(photosList.ToList(), JsonRequestBehavior.AllowGet);
EDIT
Also, I noticed this:
<img src="#Url.Content("#:PhotoID# + #:MIMEType#")" />
Shouldn't that be:
<img src="#Url.Content("#:ImageData#")" />
or something similar?
It might be to late to answer, but your issue is that the json data being sent back to your view is to large so your images are not showing, rather save your images to a file and then render your images via a URL.
I am trying to construct a Telerik MVC grid and am having great difficulty constructing a row which contains more than one checkbox in a grid cell.
So far my attempt has gotten me only half way there. It displays a single row with a whole bunch of check boxes in the first cell, but when I want to add a record via the "Insert" toolbar button, I get a blank line.
Here is my model and view. Any help would be appreciated.
public class MyModel {
public MappingsModel[] Mappings { get; set; }
public class MappingsModel {
public CustomerRoleModel[] CustomerRoles { get; set; }
public int[] SelectedCustomerRoleIds { get; set; }
}
public class CustomerRoleModel {
public int Id { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
}
}
#(Html.Telerik().Grid(Model.Mappings)
.Name("rules-grid")
.DataKeys(keys =>
{
keys.Add(x => x.Id);
})
.DataBinding(dataBinding =>{
dataBinding.Ajax()
.Select("RuleList", "MyController")
.Insert("RuleInsert", "MyController")
.Update("RuleUpdate", "MyController")
.Delete("RuleDelete", "MyController");
})
.Columns(columns =>
{
columns.Bound(x => x.CustomerRoles)
.Template(#<text>
#foreach (var role in #item.CustomerRoles) {
<text><input type="checkbox" value="#(role.Id)" id="role_#(role.Id)" name="SelectedCustomerRoleIds" disabled="disabled" </text>
if(role.Selected) {
<text>checked="checked"</text>
}
<text>/><label for="role_(#role.Id)">#role.Name</label><br /></text>
}
</text>
)
.Width(500);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
})
.Width(180);
})
.ToolBar(commands => commands.Insert())
.EnableCustomBinding(true));
Update
I have tried the suggestion offered by #howcheng but this renders the checkboxes like so:
[object Object],[object Object],[object Object],[object Object]
The data I'm getting back via Ajax looks valid even though it doesn't looked correct below. Any ideas?
data: [{Name:null, Age:0,…}]
0: {Name:null, Age:0,…}
Age: 0
CustomerRoles: [{Name:Administrators, Selected:false, Id:1}, {Name:Forum Moderators, Selected:false, Id:2},…]
0: {Name:Administrators, Selected:false, Id:1}
1: {Name:Forum Moderators, Selected:false, Id:2}
2: {Name:Guests, Selected:false, Id:4}
3: {Name:Registered, Selected:false, Id:3}
Id: 1
Name: null
total: 1
What you've done is define a display template. In order to edit, you need a custom editor template. Create a partial view in your /Views/Shared/EditorTemplates directory and call it something like "CustomerRoles.cshtml".
Editor template:
#model CustomerRoleModel[]
#foreach (CustomerRoleModel crm in Model)
{
// checkbox code goes here
}
Grid code:
#(Html.Telerik().Grid(Model.Mappings)
.Columns(columns =>
{
columns.Bound(x => x.CustomerRoles)
.Template(#<text>
#item.Select(r => r.Name).Aggregate((s1, s2) => string.Format("{0}, {1}", s1, s2))); // this is for display only
</text>)
.ClientTemplate("<#= CustomerRolesClientTemplate(data) #>")
.EditorTemplateName("CustomerRoles"); // this loads the editor template
// additional columns
})
// additional grid code
)
Javascript function for client template:
function CustomerRolesClientTemplate(data) {
var value = '';
var first = true;
for (var i = 0; i < data.length; i++) {
if (!first) value += ', ';
value += data.Name;
first = false;
}
return value;
}
In your Google searching, you might come across the Telerik documentation -- DON'T RELY ON THIS because it's a little out of date (it's not written for Razor and you don't need to use the [UIHint] attribute, for example).
Following is my model property
[Required(ErrorMessage = "Please Enter Short Desciption")]
[StringLength(200)]
public string ShortDescription { get; set; }
And following is my corresponding View code
#Html.TextAreaFor(model => model.Product.ShortDescription, new { cols = "50%", rows = "3" })
#Html.ValidationMessageFor(model => model.Product.ShortDescription)
And this is how it shows in the browser, the way i want.
Now, since there is a bug in Microsoft's MVC3 release, I am not able to validate and the form is submitted and produces the annoying error.
Please tell me the work around or any code that can be substituted in place of TextAreaFor. I can't use EditorFor, because with it, i can't use rows and cols parameter. I want to maintain my field look in the browser. Let me know what should be done in this case
In the controller action rendering this view make sure you have instantiated the dependent property (Product in your case) so that it is not null:
Non-working example:
public ActionResult Foo()
{
var model = new MyViewModel();
return View(model);
}
Working example:
public ActionResult Foo()
{
var model = new MyViewModel
{
Product = new ProductViewModel()
};
return View(model);
}
Another possibility (and the one I recommend) is to decorate your view model property with the [DataType] attribute indicating your intent to display it as a multiline text:
[Required(ErrorMessage = "Please Enter Short Desciption")]
[StringLength(200)]
[DataType(DataType.MultilineText)]
public string ShortDescription { get; set; }
and in the view use an EditorFor helper:
#Html.EditorFor(x => x.Product.ShortDescription)
As far as the rows and cols parameters that you expressed concerns in your question about, you could simply use CSS to set the width and height of the textarea. You could for example put this textarea in a div or something with a given classname:
<div class="shortdesc">
#Html.EditorFor(x => x.Product.ShortDescription)
#Html.ValidationMessageFor(x => x.Product.ShortDescription)
</div>
and in your CSS file define its dimensions:
.shortdesc textarea {
width: 150px;
height: 350px;
}
I am using the MVC version of the Telerik controls with ASP.NET MVC and the razor view engine. I have an AJAX grid. When I click edit I want it to display the data in form style. But the issue is that I want to rearrange the in form controls they way that I want them to display. How would I do something like that? Currently the controls are all beneath each other. I want to create my own layout for editing.
I have a whole lot of other controls on the view, one of them being this grid. My view model object has a list of Children objects and I want to use my grid to populate this list.
The view model for my view:
public class EditGrantApplicationViewModel
{
public string EmployeeNumber { get; set; }
public string Title { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
// Other properties
// I want this to be populated from the grid
public IEnumerable<Children> Children { get; set; }
}
My grid's code for the Children list:
#(Html.Telerik().Grid(Model.Children)
.Name("grdChildren")
.Columns(column =>
{
column.Bound(x => x.Id);
column.Bound(x => x.FullName);
}
)
.DataKeys(keys =>
{
keys.Add(x => x.Id);
}
)
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Grid")
.Insert("_InsertAjaxEditing", "Grid")
.Update("_SaveAjaxEditing", "Grid")
.Delete("_DeleteAjaxEditing", "Grid");
}
)
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text))
.Editable(editing => editing.Mode(GridEditMode.InForm))
)
I'm not sure how my editor template must look like? What must it extend? And I can't get it to show in the inline form. I worked through the sample from Brad Wilson but I am not getting it. Can someone please explain what is happening?
Just another questions.. On my other page I have a grid with other HTML controls on the page. If I am busy editing data in the grid, and click insert, how would I prevent the other controls on the page not to be validated?
You can define a custom editor template for your model and arrange the fields as you wish. This code library project shows how.
I'm trying to bind a list of model objects to a grid using the MvcContrib Grid helper. Obviously, emitting an HTML table is easy enough, but I'm struggling with returning all the selected rows (or all rows and filtering via a Where(x => x.Selected)).
Here's a dummy version of what I mean:
Model:
public class Player
{
[ScaffoldColumn(false)]
public int Id { get; set; }
public string Name { get; set; }
public int JerseyNumber { get; set; }
public string Position { get; set; }
[ScaffoldColumn(false)]
public bool Selected { get; set; }
}
View:
#model democode.Models.Player
#using (Html.BeginForm())
{
#{
var grid = Html.Grid(Model)
.AutoGenerateColumns()
.Columns(c => c.For(p => Html.CheckBoxFor(_ => p.Selected)).InsertAt(0))
.Columns(c => c.For(p => Html.HiddenFor(_ => p.Id)))
grid.Render();
}
<p>
<input type="submit" value="Submit" />
</p>
}
So, what you are looking at is a grid of hockey players with a checkbox before each one, allowing the user to select one or more. On clicking submit, I'd like for it to post the collection back (understanding that all but Selected and Id would be null/default), but I understand the problem is that the records coming across in the POST data have overlapping keys in the list of key-value pairs.
I have successfully worked around this in the past by hand-writing the HTML table and using the strategy Phil Haack outlines here: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
My question is, can I do the same thing using the Grid helper from MvcContrib, or is it more work than what it's worth?