or
1 answer
236 views
I am building an application using Kendo UI Web components for desktop and tablet browsers. And for mobile there will be separate code base.
Now I know that we can change/navigate views in Kendo.mobile.application using .navigate(viewname) as shown in this example.
Now if I develop the web application using MVVM architecture, how do I change views ??? If I use Kendo.mobile.application, the web components will render as mobile controls and won't look good on desktop and tablet browsers.
For desktop/tablet I want to use Kendo UI Web and for mobile Kendo mobile controls with MVVM architecture for all three platforms.
How do I change/navigate views in Kendo UI Web application ???or How do I completely adopt MVVM for Kendo UI Web and Kendo ui mobile both ???
Now I know that we can change/navigate views in Kendo.mobile.application using .navigate(viewname) as shown in this example.
Now if I develop the web application using MVVM architecture, how do I change views ??? If I use Kendo.mobile.application, the web components will render as mobile controls and won't look good on desktop and tablet browsers.
For desktop/tablet I want to use Kendo UI Web and for mobile Kendo mobile controls with MVVM architecture for all three platforms.
How do I change/navigate views in Kendo UI Web application ???or How do I completely adopt MVVM for Kendo UI Web and Kendo ui mobile both ???
Alexander Valchev
Telerik team
answered
on
06 Jun 2014
9 answers
375 views
The Demo here:
http://demos.kendoui.com/web/mvvm/widgets.html
Shows how to bind to a number of widgets in the Kendo UI library. But I haven't had luck with some others including the menu. I've tried to convert the example here:
http://demos.kendoui.com/web/menu/index.html
To use the MVVM framework in the most straighforward manner. To be sure the KendoUI library was properly referenced, I put the MVVM test together with the non-MVVM method show in the demo. The result is that only the non-MVVM method works. The MVVM menu does not render (it shows up empty - just a thin horizontal line). There are no runtime errors or exceptions thrown.
HTML:
<body>
<ul id="menu">
</ul>
<br />
<ul data-role="menu" data-bind="source: dataSource">
</ul>
</body>
JavaSript:$(document).ready(documentReady);
var viewModel = {
dataSource: [
{
text: "Menu Item 1",
items: [
{ text: "Sub Menu Item 1" },
{ text: "Sub Menu Item 2" }
]
},
{ text: "Menu Item 2" }
]};
function documentReady() {
$("#menu").kendoMenu(viewModel);
kendo.bind($("body"), kendo.observable(viewModel));
}
Alex Gyoshev
Telerik team
answered
on
06 Jun 2014
2 answers
223 views
I'm trying to do localization for the upload widget using the bindings of the mvvm approach.
<input type="text" id="upload_field" data-role='upload' data-localization='{"select": local_select}' />
with local_select being a parameter from my observable object.
var uploadModel = new kendo.data.ObservableObject({
local_select:"Izberi..."
});
which is turn bound - var kendoView = kendo.bind($("#portal_content"), uploadModel);
The expected result is to the input itself showing the content from the object model but it throws an error (undefined) and crashes everything after it.
If I try using the #= # approach it crashes yet again with saying it's an illegal token. Finally I wrote a string data-localization='{"select": "Izberi..."}' and it works. It also works if I use any directly accessible js variable. Since I haven't had any significant problems binding any other values to other widgets so far (ok, there have been problems but mostly typos on my side :) ).
Is there something I'm doing wrong or does kendo have problems binding these values? I did at first thought that you don't have mvvm bindings so I created an extended widget out of upload.
kendo.data.binders.widget.localization.select = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function () {
var that = this,
value = that.bindings["localization-select"].get(); //get the value from the View-Model
$(that.element).data("kendoRcgUpload").localization.select(value); //update the widget
}
});
But that hasn't worked out either. So I'm currently at a loss what else I could do - And I need to bind the value from the model since I need my code clean as a whistle :)
<input type="text" id="upload_field" data-role='upload' data-localization='{"select": local_select}' />
with local_select being a parameter from my observable object.
var uploadModel = new kendo.data.ObservableObject({
local_select:"Izberi..."
});
which is turn bound - var kendoView = kendo.bind($("#portal_content"), uploadModel);
The expected result is to the input itself showing the content from the object model but it throws an error (undefined) and crashes everything after it.
If I try using the #= # approach it crashes yet again with saying it's an illegal token. Finally I wrote a string data-localization='{"select": "Izberi..."}' and it works. It also works if I use any directly accessible js variable. Since I haven't had any significant problems binding any other values to other widgets so far (ok, there have been problems but mostly typos on my side :) ).
Is there something I'm doing wrong or does kendo have problems binding these values? I did at first thought that you don't have mvvm bindings so I created an extended widget out of upload.
kendo.data.binders.widget.localization.select = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function () {
var that = this,
value = that.bindings["localization-select"].get(); //get the value from the View-Model
$(that.element).data("kendoRcgUpload").localization.select(value); //update the widget
}
});
But that hasn't worked out either. So I'm currently at a loss what else I could do - And I need to bind the value from the model since I need my code clean as a whistle :)
T. Tsonev
Telerik team
answered
on
06 Jun 2014
4 answers
90 views
Hello!
Please forgive my newbie question! There's so much information out there, I just don't know how to formulate my question exactly to find the right example.
I'd like to build a grid with a hierarchy, where the detail data would have the same columns as the master. What I'd like to avoid is having a separate grid show up in place of detail. I'd like the parent grid to add rows when detail is unfolded, or something similar to that, but still appear as one grid. Is it possible? Could you point me towards an example?
Thank you in advance!
Sergey
Please forgive my newbie question! There's so much information out there, I just don't know how to formulate my question exactly to find the right example.
I'd like to build a grid with a hierarchy, where the detail data would have the same columns as the master. What I'd like to avoid is having a separate grid show up in place of detail. I'd like the parent grid to add rows when detail is unfolded, or something similar to that, but still appear as one grid. Is it possible? Could you point me towards an example?
Thank you in advance!
Sergey
2 answers
533 views
I have very basic grid using remote date from a MS CRM2013 REST endpoint. I currently try to use inline editing. So I have to click on edit to change row data. When I then change data and hit "Update" I expected that the "update" method is fired but instead "create" and I receive the error "Uncaught TypeError: Cannot read property 'call' of undefined" because I don't have "create" yet. So how can I prevent "Update" fire a "create"?
Alexander Popov
Telerik team
answered
on
05 Jun 2014
1 answer
320 views
I have a MaskedTextBox with a prefix. I want the caret to be placed on the part after the prefix.
E.g. OH00________
^
\ -- Caret Here
But the caret actually appears here:
E.g. OH00________
^
\ -- Caret Here
How can I make the MaskedTextBox behave this way?
E.g. OH00________
^
\ -- Caret Here
But the caret actually appears here:
E.g. OH00________
^
\ -- Caret Here
How can I make the MaskedTextBox behave this way?
<li><label>State ID: <input class="k-textbox" name="state-id" maxlength="50" type="text" data-bind="value: stateId" pattern="OH00[0-9]{8}" validationMessage="Please enter a state ID in the form of OH0012345678"/></label> <span class="k-invalid-msg" data-for="state-id"></span></li>$("input[name='state-id']").kendoMaskedTextBox({ mask: "OH0099999999" });
Petur Subev
Telerik team
answered
on
05 Jun 2014
3 answers
321 views
Hello,
I use the recurrence rule from the ASP.NET AJAX Scheduler as shown in this jsFiddle http://jsbin.com/eqisip/23/edit
Why is the second appointment not shown?
Thanks,
Koen
I use the recurrence rule from the ASP.NET AJAX Scheduler as shown in this jsFiddle http://jsbin.com/eqisip/23/edit
Why is the second appointment not shown?
Thanks,
Koen
Vladimir Iliev
Telerik team
answered
on
05 Jun 2014
4 answers
158 views
I am trying to bind a kendoChart to a datasource and get the following error: "Uncaught TypeError: Cannot call method 'slice' of undefined".
I used the bar chart example from the Telerik demo's and changed the json to add some metadata for the chart.
My json looks like this:
My datasource looks like this:
and I'm creating the chart like this:
I got this to work using the Kendo example with the "flat" json file but I'm trying to add some metadata to the json so the bar chart can be formatted with title, legend position, etc.
I used the bar chart example from the Telerik demo's and changed the json to add some metadata for the chart.
My json looks like this:
[ { "chartitems": [ { "high": 50, "index": 0, "low": 180, "medium": -34, "name": "Building 0" }, { "high": 45, "index": 1, "low": 145, "medium": 22, "name": "Building 1" }, "Title": "test", "LegendPosition": "top" }]My datasource looks like this:
var dataSource = new kendo.data.DataSource({ transport: { read: { url: "data/chart.json", dataType: "json" } }, schema: { data: "chartitems" }});and I'm creating the chart like this:
var bar = $("#chart").kendoChart({ dataSource: dataSource,
categoryAxis: {
field: "name"
},
series: [{
name: "Medium",
field: "medium"
},
{
name: "Low",
field: "low"
}]
});...I got this to work using the Kendo example with the "flat" json file but I'm trying to add some metadata to the json so the bar chart can be formatted with title, legend position, etc.
Hristo Germanov
Telerik team
answered
on
05 Jun 2014
1 answer
732 views
I'd like my "data" to be sending some of my MVVM model properties in the callback...
Example:
So I have a searchbox which is bound to $dataSource.read(); ...but regardless of the method I'm using (sync, fetch, read) that "data" never seems to be re-called. Well...I mean I can't say that it's not working, maybe it is, and it's returning "", although I've valdiated my model has data in "searchterm"
Thoughts?
Example:
transport: { read: { url: "/RestApi/directory?format=json", dataType: "json", data: { search: $model.get("searchterm") } } },So I have a searchbox which is bound to $dataSource.read(); ...but regardless of the method I'm using (sync, fetch, read) that "data" never seems to be re-called. Well...I mean I can't say that it's not working, maybe it is, and it's returning "", although I've valdiated my model has data in "searchterm"
Thoughts?
Alexander Popov
Telerik team
answered
on
05 Jun 2014
2 answers
262 views
I have the following code:
var dataSource = new kendo.data.SchedulerDataSource({
data: response.Data,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
title: { field: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", field: "Start" },
end: { type: "date", field: "End" },
description: { field: "Description" },
recurrenceId: { from: "RecurrenceId" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { field: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", field: "IsAllDay" }
}
}
}
});
scheduler.setDataSource(dataSource);
with the following Json:
{"Success":true,"Data":[{"Id":69422,"EventType":"Event","Title":"Event 69422","Start":"\/Date(1401717600000)\/","StartTimezone":null,"End":"\/Date(1401730200000)\/","EndTimezone":null,"Description":null,"IsAllDay":false,"RecurrenceId":null,"RecurrenceRule":"FREQ=YEARLY;COUNT=3;BYMONTH=6;BYMONTHDAY=1","RecurrenceException":null,"EventTitle":"Baseboard \u0026 Paint","AssociatedWithType":"Job","AssociatedWithId":22438,"AssociatedWithName":"A New Hope","JobId":22438,"DisplayJobId":"YNC482","Color":"#5ceed4","Pending":false,"Completed":false,"BackgroundColor":"#c1e4ef","FontColor":"#000000","ResourceDisplay":"Blaire Whiche","Resources":[{"Id":293,"Name":"Blaire Whiche","Available":false,"IsDefaultChecked":false,"Type":null,"Color":null}],"EventDuration":210,"EventDurationWorkDayPixels":47,"MinutesBeforeWorkDayStart":0,"MinutesBeforeWorkDayStartPixels":0,"SummaryHtml":"\u003cdiv class=\"schedulerEvent\" data-eventid=\"69422\" data-eventtype=\"Event\" style=\"display: none;\"\u003e\u003cdiv class=\"schedulerEventName\"\u003eA New Hope (Job)\u003c/div\u003e\u003cdiv class=\"schedulerJobId\"\u003e22438\u003c/div\u003e\u003cdiv class=\"schedulerEventTitle\"\u003eBaseboard \u0026amp; Paint\u003c/div\u003e\u003cdiv class=\"schedulerEventResources\"\u003eBlaire Whiche\u003c/div\u003e\u003cdiv class=\"schedulerToFrom\"\u003e8:00 AM - 11:30 AM\u003c/div\u003e\u003c/div\u003e"}]}
The problem here is that the event is scheduled for 6/2/2014, then recurring every year on the 1st of June for 3 recurrences.
This should show the initial event on 6/2/2014, then on 6/1/2015, 2016 and 2017. However, it is not showing the 6/2/2014 event. If I move the start date to 6/1/2014, it shows up fine.
Am I doing something wrong here?
var dataSource = new kendo.data.SchedulerDataSource({
data: response.Data,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
title: { field: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", field: "Start" },
end: { type: "date", field: "End" },
description: { field: "Description" },
recurrenceId: { from: "RecurrenceId" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { field: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", field: "IsAllDay" }
}
}
}
});
scheduler.setDataSource(dataSource);
with the following Json:
{"Success":true,"Data":[{"Id":69422,"EventType":"Event","Title":"Event 69422","Start":"\/Date(1401717600000)\/","StartTimezone":null,"End":"\/Date(1401730200000)\/","EndTimezone":null,"Description":null,"IsAllDay":false,"RecurrenceId":null,"RecurrenceRule":"FREQ=YEARLY;COUNT=3;BYMONTH=6;BYMONTHDAY=1","RecurrenceException":null,"EventTitle":"Baseboard \u0026 Paint","AssociatedWithType":"Job","AssociatedWithId":22438,"AssociatedWithName":"A New Hope","JobId":22438,"DisplayJobId":"YNC482","Color":"#5ceed4","Pending":false,"Completed":false,"BackgroundColor":"#c1e4ef","FontColor":"#000000","ResourceDisplay":"Blaire Whiche","Resources":[{"Id":293,"Name":"Blaire Whiche","Available":false,"IsDefaultChecked":false,"Type":null,"Color":null}],"EventDuration":210,"EventDurationWorkDayPixels":47,"MinutesBeforeWorkDayStart":0,"MinutesBeforeWorkDayStartPixels":0,"SummaryHtml":"\u003cdiv class=\"schedulerEvent\" data-eventid=\"69422\" data-eventtype=\"Event\" style=\"display: none;\"\u003e\u003cdiv class=\"schedulerEventName\"\u003eA New Hope (Job)\u003c/div\u003e\u003cdiv class=\"schedulerJobId\"\u003e22438\u003c/div\u003e\u003cdiv class=\"schedulerEventTitle\"\u003eBaseboard \u0026amp; Paint\u003c/div\u003e\u003cdiv class=\"schedulerEventResources\"\u003eBlaire Whiche\u003c/div\u003e\u003cdiv class=\"schedulerToFrom\"\u003e8:00 AM - 11:30 AM\u003c/div\u003e\u003c/div\u003e"}]}
The problem here is that the event is scheduled for 6/2/2014, then recurring every year on the 1st of June for 3 recurrences.
This should show the initial event on 6/2/2014, then on 6/1/2015, 2016 and 2017. However, it is not showing the 6/2/2014 event. If I move the start date to 6/1/2014, it shows up fine.
Am I doing something wrong here?
Vladimir Iliev
Telerik team
answered
on
05 Jun 2014
