or
3 answers
898 views
The datasource for my treeview is defined as follows:
legends = new kendo.data.HierarchicalDataSource({
schema: {
model: { id : "id", hasChildren: true, children: "layers" }
}
});
and my treeview is initialized like this:
$("#treeview").kendoTreeView({
checkboxes : { checkChildren : true },
dataSource: legends });
This is supposed to be a dynamic data source allowing me to add and remove items during runtime. When I add and remove items from legends, I expect the treeview to add and remove nodes accordingly. So when I later create a model like this:
var category = {id : 0, text : "some text", expanded : true, spriteCssClass : "folder", layers : [] }
and add it to the datasource using the add method
legends.add(category);
I should expect to see a tree node automatically created. This works.
If I later grab the category created above from legends.data() and add a child layer like this:
category.layers.push({ id : 1, text : " child", someOtherData : {} });
I do not see the child appear on the treeview and my application starts behaving abnormally. Then it occurred to me that the layers collection was not an observable and tried creating my categories like this:
var category = {id : 0, text : "some text", expanded : true, spriteCssClass : "folder", layers : new kendo.data.ObservableArray([]) }
With this change, I still get no children displayed and applpication appears to hang on call to category.layers.push().
What am I missing?
legends = new kendo.data.HierarchicalDataSource({
schema: {
model: { id : "id", hasChildren: true, children: "layers" }
}
});
and my treeview is initialized like this:
$("#treeview").kendoTreeView({
checkboxes : { checkChildren : true },
dataSource: legends });
This is supposed to be a dynamic data source allowing me to add and remove items during runtime. When I add and remove items from legends, I expect the treeview to add and remove nodes accordingly. So when I later create a model like this:
var category = {id : 0, text : "some text", expanded : true, spriteCssClass : "folder", layers : [] }
and add it to the datasource using the add method
legends.add(category);
I should expect to see a tree node automatically created. This works.
If I later grab the category created above from legends.data() and add a child layer like this:
category.layers.push({ id : 1, text : " child", someOtherData : {} });
I do not see the child appear on the treeview and my application starts behaving abnormally. Then it occurred to me that the layers collection was not an observable and tried creating my categories like this:
var category = {id : 0, text : "some text", expanded : true, spriteCssClass : "folder", layers : new kendo.data.ObservableArray([]) }
With this change, I still get no children displayed and applpication appears to hang on call to category.layers.push().
What am I missing?
Volodymyr Oliinyk
Top achievements
Rank 1
Rank 1
answered
on
04 Feb 2013
1 answer
115 views
Hello,
I was wondering if it was possible to get the selected element from the DOM when the user selects an item in the list? I can't find it in the details of the argument...
Thanks.
I was wondering if it was possible to get the selected element from the DOM when the user selects an item in the list? I can't find it in the details of the argument...
Thanks.
Georgi Krustev
Telerik team
answered
on
04 Feb 2013
1 answer
123 views
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"\/Date(1355250600000)\/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"\/Date(1355250600000)\/","Genre":"Thriller","Price":10}]})
Alexander Valchev
Telerik team
answered
on
04 Feb 2013
1 answer
93 views
I've been trying to get my comboboxes cascading correctly using the guide on the Cascading ComboBoxes page and I think the information there may be incorrect. I wanted to use the approach where I set the parameters manually and copied the code at the very bottom of the page:
This doesn't work, since I believe parentID: $("#parent").val() is interpreted at set up time, rather than when cascading. The correct code for the data portion would be:
In the answer there's a reference to the "How it works" section - I couldn't find this, could a link be provided if it still exists?
$("#child").kendoComboBox({ cascadeFrom: "parent", dataTextField: "childName", dataValueField: "childID", dataSource: { transport: { read: { url: "", data: { parentID: $("#parent").val() } } } }});This doesn't work, since I believe parentID: $("#parent").val() is interpreted at set up time, rather than when cascading. The correct code for the data portion would be:
data: function() { parentID: $("#parent").val()}In the answer there's a reference to the "How it works" section - I couldn't find this, could a link be provided if it still exists?
Georgi Krustev
Telerik team
answered
on
04 Feb 2013
1 answer
97 views
Hi
I have a search screen, that lists a amount of contacts, when a user clicks on the details button on one of the list items, I want to load another view with the details of the contact. However I am not even getting data to display. I am not sure how I can go about troubleshooting this problem. I have referenced this forum post ListView not working with data-bind but to no avail.
I have also created a JSFiddle
Thanks
Rihan
I have a search screen, that lists a amount of contacts, when a user clicks on the details button on one of the list items, I want to load another view with the details of the contact. However I am not even getting data to display. I am not sure how I can go about troubleshooting this problem. I have referenced this forum post ListView not working with data-bind but to no avail.
<div data-role="view" id="contactView" data-model="ContactViewModel" data-show="contactShow"> <h1 id="ContactHallo">Contact Screen</h1> <ul id="contactDetailList" data-role="listview" data-style="inset"> </ul></div>function contactShow(e) { ContactViewModel.LoadContacts();};<script id="contactDetailtemplate" type="text/x-kendo-template"> <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a></script>var ContactViewModel = kendo.observable({ ContactId: null, TestData: [{ AssociatedContactType: "n\/a", AssociatedProperties: [], EmailAddress: "n\/a", FName: "User1", HomeNumber: "n\/a", LName: "LastName", MobileNumber: "+27 21 0823219213", WorkNumber: "n\/a" }], ContactData: new kendo.data.DataSource.create({ data: this.TestData }), LoadContacts: function(){ var templatePart = $("#contactDetailtemplate").text(); $("#contactDetailList").kendoMobileListView({ dataSource: this.ContactData, template: templatePart, endlessScroll: true, scrollTreshold: 30 }); }});Thanks
Rihan
Alexander Valchev
Telerik team
answered
on
04 Feb 2013
1 answer
178 views
Hi,
Up to now I have been using local binding but now I need to show a grid using remote binding. I have defined a WCF method that is being called e returns a DataSourceResult. This class was picked from grid-wcf-crud code sample.
public class DataSourceResult
{
/// <summary>
/// Represents a single page of processed data.
/// </summary>
public IEnumerable Data { get; set; }
/// <summary>
/// The total number of records available.
/// </summary>
public int Total { get; set; }
}
I have defined the Read function like this:
var properties = { url: url, data: data, type: 'POST', dataType: dataType, contentType: 'application/json',
cache: false, success: OnSuccess, error: OnError };
$.ajax(properties);
Debugging the WCF method I can see that it is being called correctly and the returned data is OK. But I am receiving a 12152 error code in the javascript.
What could it be ?
Thanks in advance
Up to now I have been using local binding but now I need to show a grid using remote binding. I have defined a WCF method that is being called e returns a DataSourceResult. This class was picked from grid-wcf-crud code sample.
public class DataSourceResult
{
/// <summary>
/// Represents a single page of processed data.
/// </summary>
public IEnumerable Data { get; set; }
/// <summary>
/// The total number of records available.
/// </summary>
public int Total { get; set; }
}
I have defined the Read function like this:
var properties = { url: url, data: data, type: 'POST', dataType: dataType, contentType: 'application/json',
cache: false, success: OnSuccess, error: OnError };
$.ajax(properties);
Debugging the WCF method I can see that it is being called correctly and the returned data is OK. But I am receiving a 12152 error code in the javascript.
What could it be ?
Thanks in advance
Atanas Korchev
Telerik team
answered
on
04 Feb 2013
1 answer
102 views
Hi,
I can't figure out why my chart is not getting updated, and I think I've tried just about anything.
Here is a snippet:
http://jsfiddle.net/NShJ9/
When I run it in a browser, I get "Error: 'prb' is undefined", which makes no sense to me...
Here is a similar one that works... http://jsfiddle.net/aHFwc/6/
Thank you!
I can't figure out why my chart is not getting updated, and I think I've tried just about anything.
Here is a snippet:
http://jsfiddle.net/NShJ9/
When I run it in a browser, I get "Error: 'prb' is undefined", which makes no sense to me...
Here is a similar one that works... http://jsfiddle.net/aHFwc/6/
Thank you!
0 answers
43 views
hi.
the panes's size only changed when release the mouse, I want change the pane's size when i move the mouse, I need let the pane live resize, so I want add a mouse move event to the spliter, how can i extend the splitter to add a mousemove enent to it?
thanks!
the panes's size only changed when release the mouse, I want change the pane's size when i move the mouse, I need let the pane live resize, so I want add a mouse move event to the spliter, how can i extend the splitter to add a mousemove enent to it?
thanks!
mjohn mjohn
Top achievements
Rank 1
Rank 1
asked
on
04 Feb 2013
4 answers
86 views
Hi,
I've been using the ASP.NET AJAX (Webforms) component of Telerik for quite some time, even though I haven't used them in the last year. As I am now involved in several Microsoft MVC projects I again started to look at the demos of the Telerik components for MVC but I have to admit that I wasn't really that impressed with what I saw with regards to how it looked. I just never got the WOW-factor that the ASP.NET AJAX components offer. Take the demos for Combobox/dropdown as example, in the ASP.NET AJAX demos there are several good looking solutions like easily integrated checkboxes, styling etc but when looking at the same examples for MVC, it kind of just looks like Microsofts standard components to me. So, the obvious question here to the community, is it just that the demos for ASP.NET AJAX are much better or are the ASP.NET MVC components quite limited when it comes to design, visual appeal etc?
I realize that there is of course many other advantages with Kendo UI like mobile support, HTML5 etc. etc. and that the broad support for this might hamper the possibilities to deliver a web experience with that extra WOW factor. But for this project, I am more looking for something that can be used in a "standard web application" to get a user experience that isn't as boring and uninspiring as the standard Microsoft components offer, without having to do it all yourself in CSS etc (ie rapid development).
Or to put it in another way, if I want to convince a decision maker to go with ASP.NET MVC (Kendo UI) to get a richer and more pleasant user experience for a standard MVC web application, is Kendo UI the way to go and if so, how do I convince them as I find that the demos themselves won't really make it an easy sell like with the ASP.NET AJAX components? This is an internal web application for a company in a controlled environment, so mobile support, HTML5 etc won't really impress as much as it might have done for a public site.
Looking forward to hearing your comments on this! Please prove me wrong :)
I've been using the ASP.NET AJAX (Webforms) component of Telerik for quite some time, even though I haven't used them in the last year. As I am now involved in several Microsoft MVC projects I again started to look at the demos of the Telerik components for MVC but I have to admit that I wasn't really that impressed with what I saw with regards to how it looked. I just never got the WOW-factor that the ASP.NET AJAX components offer. Take the demos for Combobox/dropdown as example, in the ASP.NET AJAX demos there are several good looking solutions like easily integrated checkboxes, styling etc but when looking at the same examples for MVC, it kind of just looks like Microsofts standard components to me. So, the obvious question here to the community, is it just that the demos for ASP.NET AJAX are much better or are the ASP.NET MVC components quite limited when it comes to design, visual appeal etc?
I realize that there is of course many other advantages with Kendo UI like mobile support, HTML5 etc. etc. and that the broad support for this might hamper the possibilities to deliver a web experience with that extra WOW factor. But for this project, I am more looking for something that can be used in a "standard web application" to get a user experience that isn't as boring and uninspiring as the standard Microsoft components offer, without having to do it all yourself in CSS etc (ie rapid development).
Or to put it in another way, if I want to convince a decision maker to go with ASP.NET MVC (Kendo UI) to get a richer and more pleasant user experience for a standard MVC web application, is Kendo UI the way to go and if so, how do I convince them as I find that the demos themselves won't really make it an easy sell like with the ASP.NET AJAX components? This is an internal web application for a company in a controlled environment, so mobile support, HTML5 etc won't really impress as much as it might have done for a public site.
Looking forward to hearing your comments on this! Please prove me wrong :)
improwise
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
03 Feb 2013
2 answers
269 views
I am working with a kendo grid with some drop downs but I am running into issues with how the data is send back to the server.
I do not want to provide default settings for the combo boxes but if I don't I only get the id rather than the full object sent back to the server. With my datasource below I correctly get no default set however I am only given by the id - not the full object. Can I define the data structure of Site and Role within the schema without setting a default value?
I do not want to provide default settings for the combo boxes but if I don't I only get the id rather than the full object sent back to the server. With my datasource below I correctly get no default set however I am only given by the id - not the full object. Can I define the data structure of Site and Role within the schema without setting a default value?
new kendo.data.DataSource({ transport: { read: { url: "json/users/getXForUser/" + userID, dataType: "json" }, create: { url: "json/users/createUpdateX/" + userID, type: "POST" }, schema: { model: { id: "ID", fields: { Site: { }, // this is a combobox result and I want the object back with ID and Name Role: { } // this is a combobox result and I want the object back with ID and Name } } } });
Travis
Top achievements
Rank 1
Rank 1
answered
on
02 Feb 2013
