Questions on Kendo UI for jQuery Forum

1 answer

69 views

According to Apple iOS usability guidelines:
"iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list"

So, I try to implement with the following about.html. Tap event is not showing up in console. Any ideas?
Thanks,
Rick

<html>
<head>
<title>About</title>
</head>
<body>
<section data-role="layout" data-id="about-layout">
<header data-role="header">
<div data-role="navbar" data-tap="myTouch.tap">
<span date-role="view-title">About</span>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="search.html" data-icon="search">Search</a>
<a href="about.html" data-icon="about">About</a>
<a href="more.html" data-icon="more">More</a>
</div>
</footer>
</section>
<div id="about" data-role="view" data-layout="about-layout" data-zoom="true" data-reload="true">
... long content removed
</div>
<script>
function NavTouch() {
console.log("tap");
var view = $("#about").data("kendoMobileView");
view.scroller.reset();
}
window.myTouch = {
tap: function(e) { NavTouch(); },
}
</script>
</body>
</html>

NavBar

answered on 01 Aug 2013

3 answers

359 views

Grid scrolling performance on (android) mobile browsers

Hi,

I have noticed that when displaying large grids on an android tablet (Chrome for Android or the preinstalled Android Browser), scrolling performance is very poor.

For example when scrollable is set to true scrolling becomes painfully slow and useless both browsers: http://jsfiddle.net/wqCQN/19/

If scrollable.virtual is set to true it is pretty much the same on chrome but does not work at all in android browser http://jsfiddle.net/wqCQN/21/

Surprisingly to me, if scrollable is set to false http://jsfiddle.net/wqCQN/22/ scrolling becomes very smooth and responsive in both browsers, exactly how I would want it in all scrollable modes. However, the problem with this configuration is that column widths are not respected and column headers scroll away when scrolling.

UserAgents of tested browsers:

Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; Transformer TF101 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

Mozilla/5.0 (Linux; Android 4.0.3; Transformer TF101 Build/IML74K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.94 Safari/537.36

Grids are the most common and important component of our interface and are the reason why we chose Kendo UI in the first place.

Is there a way to get it to perform better on mobile browsers with column headers staying visible while scrolling and possibly column widths still being applied?

Thanks.

Grid

answered on 01 Aug 2013

3 answers

708 views

get checkbox checked status in listview data-click event

hello,

<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">

<li class="km-group-container words">

<div class="km-group-title">

<div class="km-text">test</div>

</div>

<ul class="km-list">

<li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item1">A1</label></li>

<li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item2">A2</label></li>

<li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item3">A3</label></li>

<li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item4">A4</label></li>

</ul>

</li>

</ul>

there is a checkbox group in listview , when user tap checkbox , data-click="listViewClick" ,event fire

function listViewClick(e){

if(e.target.hasClass("boxlimit")){

//setTimeout(function(){

var target=e.target.find("input[type=checkbox]");

MYAPP.MultiObj=target;

var fathernode=e.target.parent();

var root=fathernode.parent();

var max=parseInt(fathernode.attr("cbl"));

if(max=="" || max<=0) return;

var total=0;

var obj=root.find("input[type=checkbox]");

for(var i=0; i<obj.length;i++){

//console.log("index:"+i+obj.eq(i).attr("checked"));

//console.log("index:"+i+obj.eq(i).prop("checked"));

if(obj.eq(i).prop("checked")){

total=total+1;

if(total>max){

//obj.eq(i).removeAttr("checked");

MYAPP.MultiObj.removeAttr("checked");

openSubmitDailog(" exceed max number what can be choosed!");

//console.log("no more than...");

return false;

}

//},300);

}

Test env: ipad mini
when tap down on any one of chekcbox group in listview, checkbox 's checked status can not be access by right now , I have tested, maybe about 300ms delay later, the choosed checkbox's checked status can be get. I guess kendui framework optimized it for touch screen to avoid wrong operation
BUT, My goal is to limit the number of checkbox can be choosed, for example , in this code snippets, four checkbox in group ,can be choose no more than 2 items, so in function listViewClick, I am trying to count the number that checked when user tap down every time, So because of delay change of checked status , My way can not work !

Q: how to get checked status right now when user tap down? or other suggestion for limit the number user can be choose?

General Discussions

answered on 01 Aug 2013

1 answer

118 views

CustomEditing(DropDown) Problem..

When I am trying to edit or add in grid using Custom Dropdown Binding... in the code behind the viewmodel is not binding properly. It shows Id as Null and Name as Collection.
Could any one please solve this problem?
Thanks in Adv.
My View Model:

public class CategoryViewModel

{

public int? CategoryId { get; set; }

public string CategoryName { get; set; }

}

My Editor Template

@model ViewModel.Query.CategoryViewModel

@(

Html.Kendo().DropDownListFor(m => m)

.DataTextField("CategoryName")

.DataValueField("CategoryId")

.BindTo((System.Collections.IEnumerable)ViewData["categories"])

)

My Grid Binding

@(Html.Kendo().Grid<TestCategoryQueryModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id);

columns.Bound(p => p.CatName);

columns.Bound(p => p.CatDescription).Filterable(false);

columns.Bound(p => p.CatImg).Filterable(false);

columns.Bound(p => p.Categories).Filterable(false);

columns.Bound(p => p.CatPublish).Filterable(false);

columns.Bound(p => p.CatShowOrder).Filterable(false);

columns.Bound(p => p.CatSubjectToAcl).Filterable(false);

columns.Bound(p => p.CatSearchKeys).Filterable(false);

columns.Command(c =>

{

c.Edit();

c.Destroy();

});

})

.ToolBar(tools =>

{

tools.Create();

})

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(pageable =>

{

pageable.Refresh(true);

pageable.PageSizes(true);

})

.Filterable()

.Groupable()

.ColumnMenu()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.Categories).DefaultValue(ViewData["defaultCategory"] as CategoryViewModel);

})

.Events(events=>events.Error("error_handler"))

.Read(read => read.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Get))

.Create(create => create.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Post))

.Update(update => update.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Put))

.Destroy(destroy => destroy.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Delete))

))

When I am trying to edit, the datasource in Json Format

({$id:"2", Id:1, CatName:"Category Name1", CatDescription:"Test Description1", CatImg:"Image1", CatParentId:1, CatSubjectToAcl:false, CatSearchKeys:"Test 1", CatPublish:true, CatShowOrder:1, Categories:{CategoryId:3, CategoryName:"Category Name11"}})

and in the code behind(Web APi)when I trying to capture in the model it shows like this(Plz check the attachment)

Grid

answered on 01 Aug 2013

1 answer

151 views

Destroy doesn't work fully

Following the SDK example on a fully configured scheduler with 3 views (day, month, agenda) and bound remote data:

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.destroy();

This seems to only destroy the "views"... but the Day|Month|Agenda buttons as well as the date picker and outer container remain. I would expect the destroy() method to destroy everything properly.

Is there something I am missing?

Scheduler

answered on 01 Aug 2013

1 answer

224 views

HierarchicalDataSource with odata, $expand and __count

Hi All,

I am getting this error.

Cannot read property '__count' of undefined

I have read up on this and the solution was to make sure that this statement is part of the model.

total: function (data) {
return data["odata.count"];
},

Fiddler returns the correct information

"odata.metadata":"<url>/%24metadata#categories","odata.count":"1","value":[
{
"SubCategories":[
{
"Id":1,"Name":"Skateboards","CategoryId":1,"Tracking":{
"CreatedBy":"tester","CreatedOn":"2013-07-29T14:48:25.987","ModifiedBy":"tester","ModifiedOn":"2013-07-29T14:48:25.987","Timestamp":"AAAAAAAACAk="
}
}
],"Id":1,"Name":"Sports","Tracking":{
"CreatedBy":"tester","CreatedOn":"2013-07-29T14:48:25.987","ModifiedBy":"tester","ModifiedOn":"2013-07-29T14:48:25.987","Timestamp":"AAAAAAAACAY="
}
}

Here is the data source configuration.

new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: resourceurl + "/categories",
data: {
$expand:"SubCategories"
},
dataType: "json"
}
},
schema: {
model: {
id: "Id",
hasChildren: true,
children: "SubCategories",
data: function (data) {
if (data.value) {
return data.value;
}
delete data["odata.metadata"];
return [data];
},
total: function (data) {
return data["odata.count"];
},
errors: function (data) {
}
}
}
});

Any ideas?

Regards

Richard...

Hierarchical Data Source

answered on 31 Jul 2013

3 answers

2.3K+ views

Passing parameter through click event in data-bind.

I have something like this:

<div id="view1" data-role="view" data-model="viewModel" data-title="view1">

<ul id="listview" data-bind="source: dataSource, click: foo" data-role="listview" data-template="template"></ul>

</div>

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

<a>${link}</a>

</script>

And on a separate js file:

var

viewModel = kendo.observable ({

foo: function (parameter) {

//use parameter

}

});

I want to know if there is any way to pass a parameter to foo through the click event in bind-data.

MVVM

answered on 31 Jul 2013

2 answers

85 views

use data() with custom widget?

I have created a custom widget based on the tutorial: http://docs.kendoui.com/howto/create-custom-kendo-widget

if I try to do: $( '#widgetId' ).data( 'kendoMyCustomWidget' ).something();

This doesn't work or:

$( '#widgetId' ).data( 'MyCustomWidget' ).something();

This is how the kendoWindow API example references internal methods and I would like to be able to do this also.

Any ideas?

Thanks.

General Discussions

answered on 31 Jul 2013

1 answer

75 views

Pagination based on server data

I just want to react if the user is clicking on page forward or page backward. Depending which page command gets executed I want to call my separate functions. In these functions I want to load my datasource (next/prior e.g. 50 entries).
I don't wan't to use automatic server calls.
Is there any way to do so?

Best regards
Rajeev kumar pandit

Grid

answered on 31 Jul 2013

1 answer

116 views

Config (Date and StartTime) - How do I get it show by default a full day, but "scroll to" 9:00AM

Based on the documentation, I expected the .date property to support a time, so I could say what day and time I want the VIEW to default to, while "StartTime" would determine how much time to show total.

Anyway - how do I allow the Week view show midnight to midnight but have "9am" the default viewable area so users don't need to scroll down?

Scheduler

answered on 31 Jul 2013