Questions on Kendo UI for jQuery Forum

1 answer

106 views

Hi, I am a beginner with Kendo generally and I'm trying to implement the scheduler control to show live calculation of material usage on daily bases (in a week by week view).

I am unable to have the Usage data displayed in the cells although I managed to have to Materials displayed on the left hand side. I wonder if any one could help or give me some hints on what I am doing wrong. Here is my code so far:

I can be sure that data is being return to the view but the view is not showing the usage data, which is simply numeric values corresponding to a material on a specific day of the week. I have also attached a screenshot of how it looks like:

the Controller method to read the data:

public JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
try
{
var usageList = new List<ReportUsageViewModel>();

var imports = _importRespository.GetImports();

foreach (var usageReportStoredProcedure in imports)
{
var usageViewModel = new ReportUsageViewModel();

usageViewModel.MaterialID = usageReportStoredProcedure.MaterialID;
usageViewModel.Start = usageReportStoredProcedure.ScanDate;
usageViewModel.End = usageReportStoredProcedure.ScanDate;
usageViewModel.DailyUsage = usageReportStoredProcedure.UsageQuantity;
usageViewModel.Title = usageReportStoredProcedure.UsageQuantity.ToString();

usageList.Add(usageViewModel);
}

return Json(usageList.ToDataSourceResult(request));

}
catch (Exception exc)
{
ErrorHelper.WriteToEventLog(exc);
return null;

}

}

The actual control

<div id="StockViewer">
@(Html.Kendo().Scheduler<WorcesterMarble.ViewModels.ReportUsageViewModel>()
.Name("StockViewer")
.Timezone("Europe/London")
.Resources(resource => resource.Add(m => m.MaterialID)
.Title("Materials")
.Name("Materials")
.DataTextField("Name")
.DataValueField("MaterialID")
.BindTo(Model.MaertiaList))
.MajorTick(270)
.MinorTickCount(1)

.StartTime(DateTime.Now.Date.AddHours(8))
.EndTime(DateTime.Now.Date.AddHours(17))
.AllDaySlot(false)
.Date(DateTime.Now.Date)
.Editable(false)
.Views(x => x.WeekView(v =>
{
v.Footer(false);
v.Selected(true);
v.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>");
}))
.Group(group => group.Resources("Materials").Orientation(SchedulerGroupOrientation.Vertical))
.DataSource(d => d
.Model(m => {
m.Id(f => f.MaterialID);
m.Field(f => f.Title).DefaultValue("No title");
})
.Read("Read", "ReportUsage")
)
)

Scheduler

answered on 17 Feb 2014

3 answers

406 views

Adding color to Line Chart based on Y-axis Value

Hi,

I was wondering if line charts had the capability to set the chart area's background color? (see image attached)

I tried doing something like this, but all I get is the line.

@(Html.Kendo().Chart()

.Name("KendoChart")

.Title("Sample Chart")

.ChartArea(chart => {chart.Width(600).Border(1, "#000", ChartDashType.Solid);})

.HtmlAttributes(new { style = "width:600px;height:400px;float:left;margin:2px" })

.Series(s =>

{

s.Line(new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 });

})

.Tooltip(tip => tip.Visible(true))

.YAxis(y =>

{

y.Numeric().Min(0).Max(3000).MajorUnit(100).PlotBands(bands =>

{

bands.Add().From(0).To(3).Color("yellow").Opacity(0.3);

bands.Add().From(3).To(6).Color("orange").Opacity(0.3);

bands.Add().From(6).To(9).Color("red").Opacity(0.3);

});

})

.Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))

)

Charts

answered on 17 Feb 2014

3 answers

222 views

WebApi Delete Fails

I have a Grid that has Popup Editing and it all works using WebApi except for the Delete action. I can't figure out what I'm missing.

Here's my HTML code:

01.@(Html.Kendo().Grid(Model.ReceiptDocumentsList).Name("list")

02. .Columns(columns =>

03. {

04. columns.Bound(c => c.DocumentName);

05. columns.Bound(c => c.Title);

06. columns.Bound(c => c.Userid);

07. columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

08. })

09. .ToolBar(toolbar => toolbar.Create())

10. .Editable(editable => editable.Mode(GridEditMode.PopUp))

11. .Pageable()

12. .Sortable()

13. .Scrollable()

14. .DataSource(ds => ds

15. .Ajax()

16. .PageSize(20)

17. .Events(events => events.Error("error_handler"))

18. .Model(model => {

19. model.Id(r => r.Id);

20. })

21. .Read(read => read.Url("/api/receiptdocuments").Type(HttpVerbs.Get))

22. .Update(update => update.Url("/api/receiptdocuments/put").Type(HttpVerbs.Put))

23. .Create(create => create.Url("/api/receiptdocuments/post").Type(HttpVerbs.Post))

24. .Destroy(destroy => destroy.Url("/api/receiptdocuments/delete").Type(HttpVerbs.Delete))

25. )

26.)

27.

28.

29.<script type="text/javascript">

30. function error_handler(e) {

31. if (e.errors) {

32. var message = "Errors:\n";

33. $.each(e.errors, function (key, value) {

34. if ('errors' in value) {

35. $.each(value.errors, function () {

36. message += this + "\n";

37. });

38. }

39. });

40. alert(message);

41. }

42. }

43.</script>

Here's my WebApi controller (with a base class):

01.public class ReceiptDocumentsController : BaseController<ReceiptDocuments>

02.{

03. #region ctors

04.

05. private readonly IReceiptDocumentsService _receiptDocumentsService;

06.

07. private readonly IUnitOfWork _unitOfWork;

08.

09. public ReceiptDocumentsController(IReceiptDocumentsService receiptDocumentsService, IUnitOfWork unitOfWork) : base(receiptDocumentsService, unitOfWork)

10. {

11. this._receiptDocumentsService = receiptDocumentsService;

12. this._unitOfWork = unitOfWork;

13. }

14.

15. #endregion

16.

17.}

Here's the WebApi Base Class that contains the HTTP CRUD operations:

001./// <summary>

002./// This is the common base ApiController used for all controllers.

003./// This class handles all the basic CRUD operations for the WebApi functions.

004./// </summary>

005./// <typeparam name="T"></typeparam>

006.public class BaseController<T> : ApiController where T : Entity

007.{

008. #region ctors

009. protected readonly IService<T> _service;

010.

011. private readonly IUnitOfWork _unitOfWork;

012.

013. public BaseController(IService<T> service, IUnitOfWork unitOfWork)

014. {

015. this._service = service;

016. this._unitOfWork = unitOfWork;

017. }

018.

019. #endregion

020.

021. #region Basic CRUD

022.

023. /// <summary>

024. /// Get all the Products in the repository.

025. /// </summary>

026. /// <returns></returns>

027. public IEnumerable<T> Get()

028. {

029. return _service.Get();

030. }

031.

032. /// <summary>

033. /// Get the selected Product.

034. /// </summary>

035. /// <param name="id">Id</param>

036. /// <returns></returns>

037. public T Get(int id)

038. {

039. T model = _service.GetById(id);

040. if (model == null)

041. throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));

042.

043. return model;

044. }

045.

046. /// <summary>

047. /// Insert a new Product into the repository.

048. /// </summary>

049. /// <param name="model">Product</param>

050. /// <returns></returns>

051. public HttpResponseMessage Post(T model)

052. {

053. if (ModelState.IsValid)

054. {

055. _service.Insert(model);

056. _unitOfWork.Commit();

057.

058. var response = Request.CreateResponse(HttpStatusCode.Created, model);

059. response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = model.Id }));

060.

061. return response;

062. }

063. else

064. {

065. throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));

066. }

067. }

068.

069. /// <summary>

070. /// Update the selected Product.

071. /// </summary>

072. /// <param name="id">Id</param>

073. /// <param name="model">Product</param>

074. /// <returns></returns>

075. public HttpResponseMessage Put(T model)

076. {

077. if (ModelState.IsValid)

078. {

079. try

080. {

081. _service.Update(model);

082. _unitOfWork.Commit();

083. }

084. catch (Exception)

085. {

086. return Request.CreateResponse(HttpStatusCode.NotFound);

087. }

088. return Request.CreateResponse(HttpStatusCode.OK, model);

089. }

090. else

091. {

092. return Request.CreateResponse(HttpStatusCode.BadRequest);

093. }

094. }

095.

096. /// <summary>

097. /// Delete the selected Product.

098. /// </summary>

099. /// <param name="id">Id</param>

100. /// <returns></returns>

101. public HttpResponseMessage Delete(int id)

102. {

103. T model = _service.GetById(id);

104. if (model == null)

105. {

106. return Request.CreateResponse(HttpStatusCode.NotFound);

107. }

108.

109. try

110. {

111. _service.Delete(model);

112. _unitOfWork.Commit();

113. }

114. catch (Exception)

115. {

116. return Request.CreateResponse(HttpStatusCode.NotFound);

117. }

118.

119. return Request.CreateResponse(HttpStatusCode.OK, model);

120. }

121. #endregion

122.

123.}

And here's my WebApi Route configuration:

01.public static class WebApiConfig

02.{

03. public static void Register(HttpConfiguration config)

04. {

05. config.Routes.MapHttpRoute(name: "ReceiptDocuments",

06. routeTemplate: "api/receiptdocuments/{action}/{id}",

07. defaults: new { controller = "ReceiptDocuments", action = "Get", id = RouteParameter.Optional });

08.

09.

10. config.Routes.MapHttpRoute(

11. name: "DefaultApi",

12. routeTemplate: "api/{controller}/{id}",

13. defaults: new { id = RouteParameter.Optional }

14. );

15. }

16.}

Here's the 404 message response:

1.{"Message":"No HTTP resource was found that matches the request URI 'http://localhost:59723/api/receiptdocuments/delete'.","MessageDetail":"No action was found on the controller 'ReceiptDocuments' that matches the request."}

It seems the "id" isn't getting into the route. When I tested this in Fiddler, it worked as long as I added the "id" as in:

http://localhost:port/api/receiptdocuments/delete/7

But the error message doesn't seem to be passing the "id" along with the request. It kind of looks like a route issue but I'm just not seeing it if it is. Any help here is appreciated.

Thanks.

Grid

answered on 17 Feb 2014

2 answers

756 views

Date selection focus not get removed

Hello Kendo Team,

I'm using kendo date picker widget and setting its value to null or "" at run time.
Date picker widget text value get updated to placeholder but date selection value remain in focus state when I open date picker next time.
I don't want to show date in focus state when I open date picker after setting date picker value to null or "".
As a workaround currently I'm removing k-state-focused class when I'm setting value to null or "".
Here is plunker(http://plnkr.co/edit/67m3WmPM3ahUe9DP7UEa?p=preview) where you can observe this issue.
I just want to know that is this issue in kendo date picker or is there any configuration option I'm missing?

Thanks,
Vinay

DatePicker

answered on 17 Feb 2014

2 answers

242 views

Tooltip on X Axis labels?

We have a chart that put a Medical Code as the label for each column on a bar chart. Is it possible to put a tooltip on each on that would pull the description of the medical code and place it in the tooltip?

Or do you have any other suggestions on how to show the description for each?

Thanks,
Jason

Charts

answered on 16 Feb 2014

0 answers

104 views

how can i raise my event in my directive's kendogrid toolbar template?

I am using angularJS and kendoUI and create my own directive using by kendo. in grid directive I use kendogrid that it have a toolbar. i fill toolbar with html template but it cant trigger my function with ng-click.
here my sample code

directive.js
app.directive('fonixGrid', [function () {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
gridtoolbar :"="
},
template: '<div id="kendogrid" ></div>',
link: function (scope, element, attrs) {
element.kendoGrid({
toolbar: '<a ng-click=gridtoolbar.click()></a>',
editable: attrs.editable ? attrs.editable : true,
scrollable: attrs.scrollable ? attrs.scrollable : true,
sortable: attrs.sortable ? attrs.sortable : true,
};
}]);

Contoller.js
app.register.controller('userViewModelController', ["$scope",
, function ($scope) {
var onclick = function () {
console.log('clicked');
};
$scope.mytoolbar = { click: onclick };
}]);

index.html
<html>
<div>
<div>
<fonix:grid gridtoolbar ="mytoolbar " />
</div>
</div>
</html>

Templates

asked on 16 Feb 2014

8 answers

298 views

Problem with Endless scrooling on listview

Hello, I'm having some trouble at setting up endless scrolling in a listview fed by a local Datasource. Here is the code that I'm using for that purpose:

// The model of the Datasource schema
var SiteModel = kendo.data.Model.define({
id: "SiteUId",
fields: {
"SiteName": {
type: "string"
},
"isDefault": {
type: "number"
}
}
});

// The Datasource
var dataSites = new kendo.data.DataSource({
batch: true,
data: userSession.sites,
schema: {
model: SiteModel
},
sort: [
{ field: "isDefault", dir: "desc" },
{ field: "SiteName", dir: "asc" }
],
pageSize: 20
});

// The ListView
var sitesList = $("#sites-picker").kendoMobileListView({
dataSource: dataSites,
template: kendo.template($("#myListTemplate").html()),
selectable: true,
loadMore: true,
click: function (e) ...
}).data("kendoMobileListView");

// The html code
<ul id="sites-picker"></ul>

I'm attaching the screenshot of the rendered view, which is not correctly showed. Thanks.

General Discussions

answered on 16 Feb 2014

7 answers

359 views

Remote Views + querystrings: odd behaviour

Hi!

Relatively new to KendoUI, we're currently evaluating this along with a few other frameworks for html5-mobile-development.
So far, I really like the KendoUI approach, with templating and datasourcing etc. But, one thing sticks out as a little odd.

When using Remote Views with querystrings, I'm experiencing odd behaviour. First I thought it was down to caching, so I started adding a random querystring to each remote view link, but that only furthered the problem.

Inspecting the Html DOM with firefox DOM Inspector or firebug lead me to the right track however:

A remote view is normally just added once, and re-used. I see the point of that. Until it has querystrings - then each unique permutation is added as a DOM element (due to mismatching data-url?) , leading to massive problems. Not only in things not properly working ( i.e. trying to $("#elem").kendoMobileListView( ) will / may fail, or populate a listview in a completely different, hidden, view) but it also leads to unnecessary memory usage, and general browser slowness. Depending on the complexity of the views, naturally.

However, it was relatively easy to fix. I just had to make sure I killed off any divs, script templates or other unique stuff in the event handler run on the views data-hide event. ( $(elm).destroy(); $(scriptelm).destroy(); )

I've attached an illustration. Green = behaving normally. Red boxes - not behaving as I would have presumed. All views except the 'root' view are remote.

But, my question: Is this behaviour by design or is it a bug? I had figured that once a view had been loaded, it would be re-used, data-init would be used to clean/scrub and fetch new query string parameters and then data-show would take care of data-binding etc.

General Discussions

answered on 16 Feb 2014

2 answers

599 views

timezone always utc

I am using the scheduler with ASP.NET MVC. I set the timezone value to "Est/UTC" yet the start and end DateTime values are always using "Utc" as the "Kind". I have also tried by NOT setting the timezone value. I have been looking through these posts for the past couple of hours and found nothing that works. I want the DateTime values that get passed back through the controller to tell me the correct local time for that user or the correct "adjusted" value in UTC. To repeat, I am getting the correct local time but reported as UTC. That means a 5pm event gets saved as a noon event for someone in EST.

Is there some setting I am missing? This seems like it should be obvious but I am stuck.

in controller.cs

public ActionResult Schedule()

{

var now = DateTime.Now;

ViewBag.StartTime = new DateTime(now.Year, now.Month, now.Day, 7, 0, 0, DateTimeKind.Local);

ViewBag.TimeZone = "Etc/UTC";

return View();

}

in view.cshtml

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime((DateTime)ViewBag.StartTime)

.Timezone((string)ViewBag.TimeZone)

.AllDaySlot(false)

.Editable(e =>

{

e.Create(true);

e.Destroy(true);

e.Update(true);

})

.Height(590)

.Views(views =>

{

views.DayView();

views.WeekView(v => v.Selected(true));

views.MonthView();

views.AgendaView();

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.TaskID);

m.Field(f => f.TaskID);

m.Field(f => f.Title);

m.Field(f => f.ProviderId);

m.Field(f => f.Start);

m.Field(f => f.StartTimezone);

m.Field(f => f.EndTimezone);

m.Field(f => f.Description);

m.Field(f => f.RecurrenceID);

m.Field(f => f.RecurrenceRule);

m.Field(f => f.RecurrenceException);

m.Field(f => f.OwnerID);

m.Field(f => f.IsAllDay);

})

.Read(read => read.Action("Read", "Scheduler").Data("additionalData"))

.Create(create => create.Action("Create", "Scheduler").Data("additionalData"))

.Update(update => update.Action("Update", "Scheduler"))

.Destroy(destroy => destroy.Action("Destroy", "Scheduler"))

.ServerOperation(true)

)

Scheduler

answered on 15 Feb 2014

3 answers

174 views

why is create called for existing events again

Here is a weird one that I can't seem to figure out. I have a scheduler that already shows other events. My problem is that whenever I create a new event or delete an existing event the "create" method gets called for the existing events again. So every time I do a single "create" all my existing events get duplicated. The closest thing I could find in this forum is to make sure I have the "batch" turned off but that doesn't make any difference. Is there some setting I am missing? My code is below...

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime((DateTime)ViewBag.StartTime)

.Timezone((string)ViewBag.TimeZone)

.AllDaySlot(false)

.Editable(e =>

{

e.Create(true);

e.Destroy(true);

e.Update(true);

})