Questions on Kendo UI for jQuery Forum

5 answers

250 views

While using the scheduler without a web service (so with an array/empty datasource) and setting recurrence rules, the component displays the recurrence icon only for the first event in the series and does not ask if we want to edit the occurrence or the series when trying to edit the other entries. Editing such an entry and clicking save then throws that error: Uncaught TypeError: Cannot read property 'dirty' of undefined.

To verify if my code was the culprit I just took one of the samples and removed the dataSource and it did the same thing.

Scheduler

answered on 17 Feb 2014

3 answers

215 views

Kendo UI scheduler: make appointments that occur in the past 'read-only'

Hello,

I would like appointments that occurred in the past to not be movable, resizable or destroyable. But i am not able to find "DragStart" event in this control.

Can you please add this event in this control?

Thanks,
Jayesh Goyani

Scheduler

answered on 17 Feb 2014

4 answers

742 views

[Solved] stopPropagation cannot stop Hold Event

I believe this does not happen only in ListView.

I tried your demo http://demos.telerik.com/kendo-ui/mobile/listview/editing.html. The original effect is:
- swipe then Delete button appear
- click the item other then Delete button will hide it but will not trigger the Tap event because it has e.event.stopPropagaton() in touchStart event.

Okay, due to some reason I need to use Hold instead of Tap (i.e. Hold only, no Tap, so I am not talking about Tap triggered after Hold event problem)
- swipe then Delete button appear
- click the item other than Delete button. The Delete button goes away, but Hold event triggered!!
You can reproduce it just change Tap to Hold.

This means e.event.stopPropagaton() cannot stop Hold timeout counting. Is there a way I can prevent this pending Hold event??

ListView (Mobile)

answered on 17 Feb 2014

1 answer

117 views

KendoUI Scheduler Configuration

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

434 views

[Solved] 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

248 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

805 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

262 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

120 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

317 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