Questions on Kendo UI for jQuery Forum

0 answers

297 views

Custom Paging

I am trying to do a custom paging by using mvvm, datasource and template. My problem is I have to use this.set to set the dataSource page() or total pages() to get the value this.get("dataSource").totalPages() or this.get("dataSource").page() refreshed. That is why I set a variable pageRefreshHolder as work-around. Is there some easy way?

var viewModel=kendo.observable({

dataSource:new kendo.data.DataSource({

data:ReportsData,

pageSize:12,

sort:{ field: "name", dir: "asc" }

}),

copy:function(e){

this.dataSource.add(e.data);

this.set("pageRefreshHolder",this.dataSource.totalPages()); //I have to have this line to get the totalPage work

},

goToNextPage:function(){

if(this.dataSource.page()<this.dataSource.totalPages())

this.dataSource.page(this.dataSource.page()+1);

else

this.dataSource.page(1);

$jquery("#reportsArea").find("div#phItem").show("slide",{direction:"right"}, 500);

this.set("pageRefreshHolder",this.dataSource.page()); //I have to have this line to get the currentPage work

},

goToPrevPage:function(){

if(this.dataSource.page()>1)

this.dataSource.page(this.dataSource.page()-1);

else

this.dataSource.page(this.dataSource.totalPages());

$jquery("#reportsArea").find("div#phItem").show("slide",{direction:"left"}, 500);

this.set("pageRefreshHolder",this.dataSource.page()); //I have to have this line to get the currentPage work

},

pageRefreshHolder: 1,

totalPage: function() {

return this.get("dataSource").totalPages();

},

currentPage: function(){

return this.get("dataSource").page();

}

});

kendo.bind($jquery("#reportsArea"),viewModel);

Data Source

asked on 23 Jul 2012

3 answers

137 views

N Level ListView Design Pattern

I want to create some what of a product catalog using listviews. Basically the page will start with a listview of high level categories. When a person selects a category, I will perform a jsonp query and they will see a new listview with the subcategories of that category. I don't know ahead of time how deep the categories can be nested but it seems that there should be a simple design pattern so this can be done with a single page that can be reused over and over at each level and that each (different page/category query) could be cached to avoid making the same jsonp request.

Would appreciate if someone can point me in the right direction.

Thanks,
EE

ListView

answered on 23 Jul 2012

0 answers

141 views

how to change combobox template

I'm trying to set the combobox template in a jquery way, but doesn't work

$("#titles").kendoComboBox({
..//set some other properties except template
});

var combobox = $("#titles").data("kendoComboBox");

// set template
if (something)
{
combobox.template('some template');
}

any ideas why this doesn't work?

kashim

ComboBox

asked on 23 Jul 2012

0 answers

249 views

Drag container

Hello, I'm trying to make use of the new container feature, and it works like a charm if you define a hint for the draggable element.
So, that's my question, is there any chance to use this container feature without having to define a hint so it does not throw an exception when it tries to get the hint dimensions to check boundaries?

My draggable elements do not need any hint, just the original element. If I set the hint function to return a clone of it I'm exposed to have elements duplicated every time I try to drag them.

Thank you.

Drag and Drop

asked on 23 Jul 2012

1 answer

354 views

tool tip with drop down

Hi,
can you please let me know if the tool tip is supported in the dropdown, if not can you please let me know if there is any way to show popup associated with each item in the dropdwon

thanks
Wisam

DropDownList

answered on 23 Jul 2012

2 answers

193 views

ToDataSourceRequest overload not working as expected

I am using the overload of ToDataSourceResult to postproceess my DBContext Entity into my model. However, I receive a LINQ error when I use it in the manner below. I know LINQ enough to understand the error, but I am confused because this forum post seemed to indicate the postprocessing expression would be used AFTER the object has been retrieved from the DBContext and not as part of the retrieval from the DBContext. Can you provide clarification?

My code:

DataSourceResult result = this.StateProvinceService
.GetQueryable()
.ToDataSourceResult<StateProvince, StateProvinceModel>(
request,
province => Mapper.Map<StateProvince, StateProvinceModel>(province));

The result:

LINQ to Entities does not recognize the method 'XYZ.Web.Areas.Admin.Models.StateProvinceModel Map[StateProvince,StateProvinceModel](XYZ.Model.StateProvince)' method, and this method cannot be translated into a store expression.

Data Source

answered on 23 Jul 2012

0 answers

108 views

Propagating Client-Side Changes Back To Server

Hi all,

I am trying to use the Kendo TreeView for a .NET application where people can edit a hierarchy. So far I have most of the client-side functionality implemented, whereby users can move, delete, rename nodes etc. My issue now is how to propagate those changes back to my application where server-side code will make database changes based on those client-side hierarchy changes. Can anybody advise me on the best way to propagate changes made to the treeview back to my .NET app? I’ve looked into the possibility of using a hidden field which I can post back on form submission but I’m not sure if this is the best way to go about it.

Kind regards,

Richard

TreeView

asked on 23 Jul 2012

2 answers

676 views

document.ready() is called twice

hi there,

i am evaluating the use of kendo mobile in my company and come across an issue i cannot resolve on my own. i use the latest minified version of the library from yesterday.

i have a view with a form that is bound to a viewmodel. on button click a function in the viewmodel is called which calls app.navigate to get to a listview with search results that are loaded as json array from a server based on the options entered in the form.

the single parts work for me so far. i can pull the server response, parse the json and can edit the viewmodel with the form. when the user clicks the button to send the search, the listview will be initialized (via data-init) and the datasource will be updated with the correct search options from the viewmodel.

but then the initializer is called a second time and only got the initial values from the viewmodel. i nailed it down to document.ready was called a second time and therefore the application state was lost. but i cannot figure out what is causing this.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="inwx.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

<body>

<div id="menu" data-role="view" data-title="Start">

<div class="head"> </div>

<ul data-role="listview" data-style="inset" data-type="group" id="listview-menu">

<li>I want to:

<ul>

<li data-icon="play"><a href="#searchform">search domains</a></li>

</ul>

</li>

</ul>

</div>

<div data-role="view" data-title="Destinations" id="domainlist" data-init="initListView">

<ul data-role="listview" data-style="inset" data-type="group" id="listview-domains">

</ul>

</div>

<div id="searchform" data-role="view" data-title="Domain Search" data-init="initForm">

<form>

<ul data-role="listview" data-style="inset">

<li>

<select id="region-value" data-bind="source: regions, value: region"></select>

search region

</li>

<li>

<input id="domain-value" type="text" data-bind="value: domain" />

domain

</li>

</ul>

<button data-bind="click: startSearch">search</button>

</form>

</div>

<script type="text/x-kendo-template" id="domainlistItemTemplate">

<li data-icon=

# if (status == 'used') { #

"globe"

#} else {#

"toprated"

#}#>

#: domain #

</li>

</script>

<script>

var template = kendo.template($("#domainlistItemTemplate").html());

</script>

<script src="domainlist.js" type="text/javascript"></script>

</body>

</html>

var initForm;

var initListView;

$(document).ready(function(){

alert("ready");

var app = new kendo.mobile.Application(document.body);

var domainsearchModel = new kendo.data.ObservableObject({

domain: "sebastian",

region: "EUROPE",

regions: ["EUROPE", "ASIA", "AMERICAS", "AFRICA", "ALL"],

startSearch: function() {

app.navigate("#domainlist");

}

});

var domainlistSource = new kendo.data.DataSource({

transport: {

read: {

url: "https://sandbox.inwx.de/en/domain/checkajax",

type: "POST",

dataType: "json",

data: {

d: function() {

return domainsearchModel.get("domain");

},

r: function() {

return domainsearchModel.get("region")

}

},

schema: {

data: function(data) {

return data.items;

},

type: "json"

},

group: {

field: "country"

},

filter: [{

field: "status",

operator: "neq",

value: "error"

}, {

field: "status",

operator: "neq",

value: "timeout"

}, {

field: "status",

operator: "neq",

value: "yours"

}, {

field: "status",

operator: "neq",

value: "unsupported"

}],

pagesize: 20

});

$("#listview-domains").kendoMobileListView({

style: "inset",

template: "#: domain #",

// template: template,

dataSource: domainlistSource

});

initForm = function () {

var body = $(".km-vertical,.km-horizontal");

kendo.bind($("#searchform"), domainsearchModel);

};

initListView = function () {

};

});

General Discussions

answered on 23 Jul 2012

1 answer

178 views

Editable grid cancel not working

Hi,

I have created a Kendo grid, which is editable(inline). For the unique id(which we specify in "model" of grid definition), i have given a column name which has numbers(unique). Now, when the user adds a new row, this particular column has " " value. So, i myself add new values. Whenever some update or delete operations are performed, i need to perform some additional functionalities. So, i use this unique column values to retrieve the old/new row. Now, when i add a row, and update it, it works fine. But, then for the newly added row, if i click on "edit" and then click on "cancel", nothing happens. When i tried searching in source code, i could find that kendo generates some unique id internally, on adding new rows. But, when i click on cancel, the id that was generated by kendo is different. And it does not get the model itself. It is undefined. Can anyone suggest what should be done?

_modelForContainer: function(container) {
            var id = (container.is("tr") ? container : container.closest("tr")).attr(kendo.attr("uid"));
            return this.dataSource.getByUid(id);
        },

In this piece of code(from kendo.grid.js), this.dataSource.getByUid(id) becomes undefined on click of cancel.

Regards,
Khushali

Grid

answered on 23 Jul 2012

8 answers

995 views

Terrible flicker when loading page

Hi,

I've got a simple mobile website with 3 separate pages. When each page renders on the iphone, it renders the page without styling and quickly flickers to the correctly rendered view. So for a grid, I see an ugly bullet list for a split second before it flickers to the nice looking grid. This happens on all my pages.

How do I avoid this?

Kind regards

Nick

General Discussions

answered on 23 Jul 2012