Questions on Kendo UI for jQuery Forum

4 answers

447 views

I'm having problems getting the current/new value from a Kendo dropdownlist in a change event in kendo viewmodel.

Html code:
<div id="dropdownExample">
<select id="nameDropDown" data-bind="value: name, events: {change: nameChanged}">
<option>James</option>
<option>Bond</option>
</select>
<div id="outputExample"></div>
</div>

Javascript code:
var vModel = kendo.observable({
name: "James",
nameChanged: function(param)
{
var paramDataName = param.data.name;
var vModelGet = this.get("name");

var outPut = "param.data.name = " + paramDataName;
outPut += "<br/>vModelGet = " + vModelGet;

$("#outputExample").html(outPut);
}
});

This code works as expected. Param.data.name give me the new value, the same does viewmodel.get("name").

However if I try to turn that dropdown into a KendoDropDownList with $("#nameDropDown").kendoDropDownList({ }) param.data.name and viewModel.get("name") give me the old value.

Any ideas?

We are currently using Kendo 2012.2.507.

Regards,
Jan Erik

DropDownList

answered on 17 Feb 2014

1 answer

231 views

Load different data for different nodes level.

Hi.

Suppose I have following hierarchy

project1:
-- entity1
-- entity2
-- entity3

project2:
-- entity1
-- entity2
-- entity3

...

Project and "entities" are basically different and I use different url to get them, say /serv/prj for project and /serv/entities for entities.
When page is loaded there are only projects. When I expand project items should be loaded (refreshed) from server. Items for selected project
should be refreshed each time I expand the project.

Now it working ok in a static manner, I have following:

var nodeZ = kendo.data.Node.define({

hasChildren: "Entities",

id: "EntityNamespaceID",

children: "Entities"

});

var dataSource = new kendo.data.HierarchicalDataSource(

{

transport: {

read: {

url: "ns",

dataType: "json"

}

},

schema: { model: nodeZ},

filter: {

logic: "or",

filters: [

{ field: "EntityName", operator: "neq", value: "null" },

{ field: "Namespace", operator: "neq", value: "null" }

]

}

});

and have

dataTextField: ['Namespace', 'EntityName'] for tv.

But it is static. It loads everything one time and if I need to refresh data I have to reload page...

Is it possible to accomplish for within a single HierarchicalDataSource? As I mentioned project and entities are different, and to get
them I use two different urls, because in documentation it is stated for homogeneous data that it supply parent node id for request.
In my case data are heterogeneous.

What I'm currently unsuccessfully tried to do is to load separately projects, and on expansion refrehs items:

expand: function(e)

{ 



      var entityNodeZ = kendo.data.Node.define({

            hasChildren: "Children",

            id: "EntityId",

            children: "Children"



        });

var nodeData = this

.dataItem(e.node); //project node

var entityDataSource = new kendo.data.HierarchicalDataSource(

{

transport: {

read: {

url: "entity",

dataType: "json"

},

parameterMap: function ()

{

return { ns: nodeData.PrjId};

}

},

schema: { model: entityNodeZ},

filter: { field: "EntityName", operator: "neq", value: "null" }

});

entityDataSource.fetch();

var tv= $('#userprjtreeview').data('kendoTreeView');

tv.append(entityDataSource.view().slice(0), nodeData);

}

But on tv.append I get following exception:

Uncaught TypeError: Property 'children' of object [object Object] is not a function.

So please help with any approach.

Thanks in advance.

TreeView

answered on 17 Feb 2014

5 answers

239 views

Recurrence series bug

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

205 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

726 views

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

108 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

418 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

239 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

792 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

252 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