Questions on Kendo UI for jQuery Forum

8 answers

376 views

Does HeirarchicalDataSource support heterogeneous objects?
If my transport receives something like:
[{"id": 1, "name": "smith", "groups": [{"id": 1, "typeId": 1, "valueId": 1}]}]

How would the model be defined? Could you do something like:
groupModel = {
id: "id",
fields: {
id: { editable: false, nullable: false, type: "number" },
typeId: { editable: true, nullable: false, type: "number" },
valueId { editable: true, nullable: false, type: "number" },
},
hasChildren: false,
};

personModel = {
id: "id",
fields: {
id: { editable: false, nullable: false, type: "number" },
name: {editable: true, nullable: false, type: "string" },
groups: groupModel,
},
hasChildren: function(item) {
return item.groups.length > 0;
}
}
I then use the person object in the model field of the schema in my data source.
I know the above doesn't work. If I move groups out side of the fields like it doesn't work either. It doesn't seem to know I want to define nested node objects. Do I explicitly need to new Node objects?

Hierarchical Data Source

answered on 01 Aug 2013

2 answers

105 views

Please help me (Paramater in removeurl)

I have use one upload file of kendo web ui and i'm having trouble at removeurl 1 file in me session.
i don't know paramater one ( id ) from removeurl.
Me code here bellow:
(
$(document).ready(function () {
$("#files").kendoUpload({
async: {
saveUrl: "/Admin_Site/Upload_file",
removeUrl:"/Admin_Site/Remove_File",
autoUpload: true,
},
remove: onRemove,
select: onSelect,
success: onSuccess,
});
});
)

Upload

answered on 01 Aug 2013

1 answer

181 views

Make IFrame Scrollable and Zoomable inside ModalView

Hi,

I need to make the iframe scrollable and zoomable inside the ModalView and I am not having any success on an iPad. I even tried data-zoom=true etc did not work.

Please see the code below (does not work on an iPad):

<div data-role="modalview" id="popup-window" data-width="900" data-height="600" data-modal="false">

<iframe src="http://www.apple.com" style="width:900px;height:600px"></iframe>

</div>

Thank you for any help!

ModalView

answered on 01 Aug 2013

1 answer

106 views

Tap event in Navbar

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

410 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

773 views

[Solved] 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

139 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

197 views

[Solved] 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

262 views

[Solved] 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