Roland Koops
Top achievements
Rank 1
Roland Koops
asked on 07 Feb 2012, 01:22 PM
I am trying to add a autocomplete kendo control in the navbar of a layout. The kendo control does not work. If i add the autocomplete in a view it works.
Is it possible to add kendo controls to a navbar/ layout header?
Is it possible to add kendo controls to a navbar/ layout header?
5 Answers, 1 is accepted
0
Hello,
Not sure what the reason may be. Tried the basic scenario below, and it seems working.
What am I missing?
Kind regards,
Petyo
the Telerik team
Not sure what the reason may be. Tried the basic scenario below, and it seems working.
<
html
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
>
<
title
>Index</
title
>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.124/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.124/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.124/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"http://code.jquery.com/jquery-1.7.1.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
input
id
=
"autoComplete"
/>
</
div
>
Content
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application();
$("#autoComplete").kendoAutoComplete(["Item1", "Item2"]);
</
script
>
</
body
>
</
html
>
What am I missing?
Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Roland Koops
Top achievements
Rank 1
answered on 07 Feb 2012, 03:37 PM
Thx for the quick reply.
The difference might be that i place the autocomplete widget within the header of a layout.
I have attached my test webpage:
The difference might be that i place the autocomplete widget within the header of a layout.
I have attached my test webpage:
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>Compano Online Software</
title
>
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2012.1.124/js/kendo.mobile.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
style
type
=
"text/css"
>
#detail
{
width : 90%;
height : 100%;
max-width : 600px;
margin : 10px auto 10px auto;
}
.detail
{
display : table-cell;
width : 600px;
height : 100%;
margin: 20px 20px 7px;
}
.l
{
display : inline-block;
width : 240px;
font-weight : normal;
float : left;
}
.v
{
display : inline-block;
width : 360px;
white-space : pre-line;
}
.detail h3, .detail h4
{
width : 600px;
margin : 3px 0 6px 0 !important;
}
#container
{
margin: 3px 0 1em 0;
padding-bottom: 10px;
background: rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.3);
border-width: 1px 0;
box-shadow: 0 1px 1px rgba(255,255,255,.3);
height : 100%;
}
#searchPanel
{
position : absolute;
top : 5px;
left : 50%;
margin: 0 0 0 -200px;
}
</
style
>
<
script
type
=
"text/javascript"
>
var app;
var vn = "prd.item";
var tm = "<
b
>${SalesOrganizationShortDescription} ${Code}</
b
>-<
b
>${Description}</
b
><
br
/>€ ${PurchasePricePerUtilizationUnit}";
var id;
function onError(e)
{
}
var html;
function renderDetail(data) {
html = "";
$("#detail").removeData();
$("#detail").empty();
for (index in data.d)
renderGroup(data.d[index]);
$("#detail").html(html);
$("#detail").kendoMobileScrollView();
}
function renderGroup(group) {
if (group.subgroups.length > 0) {
html += "<
div
class=\"detail\">";
html += "<
h3
>";
html += group.groupDescription;
html += "</
h3
>";
for (index in group.subgroups)
renderSubGroup(group.subgroups[index]);
html += "</
div
>";
}
}
function renderSubGroup(subGroup) {
if (subGroup.content.length > 0) {
html += "<
h4
>"
html += subGroup.subgroupDescription;
html += "</
h4
>"
for (var i = 0; i <
subGroup.content.length
; i += 2) {
html += "<span class=\"l\">"
html += subGroup.content[i];
html += "</
span
>"
html += "<
span
class=\"v\">"
html += subGroup.content[i + 1];
html += "</
span
>"
html += "<
br
/>"
}
}
}
function listClick(e) {
if (e.dataItem) {
id = e.dataItem.id;
$.ajax({
type: "POST",
url: "/dd.ashx",
data: { vn: vn, i: id },
dataType: "json",
cache: false,
success: renderDetail
});
}
}
function menuClick(e) {
vn = e.dataItem.ViewName;
tm = e.dataItem.Template;
var list = $("#list").data("kendoMobileListView");
if (list) {
list.unbind("click", listClick);
$("#list").removeData();
$("#list").empty();
initList();
}
var search = $("#search").data("kendoAutoComplete");
if (search) {
$("#search").removeData();
$("#search").empty();
initSearch();
}
}
function initListView()
{
initList();
initSearch();
}
function initSearch() {
$("#search").kendoAutoComplete({
minLength: 3,
dataSource: {
transport: {
read: {
type: "POST",
url: "/webservices/mobile.asmx/Search",
contentType: "application/json; charset=utf-8",
data: { vn : vn},
dataType: "json"
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
serverFiltering: true,
serverSorting: true,
pageSize: 10,
schema: {
data: "d"
}
}
});
}
function initList() {
$("#list").kendoMobileListView({
dataSource: {
transport: {
read: {
type: "POST",
url: "/dv.ashx",
data: { vn: vn },
dataType: "json"
}
},
serverPaging: true,
serverSorting: true,
pageSize: 100,
schema: {
data: "d",
total: "count",
model: { id : "id" }
},
error: onError
},
template: "<
a
href
=
'tabstrip-detail'
>" + tm + "</
a
>",
click: listClick
});
}
$(document).ready(function () {
app = new kendo.mobile.Application(document.body);
$("#menuList").kendoMobileListView({
dataSource: {
transport: {
read: {
type: "POST",
url: "/webservices/mobile.asmx/GetMenuList",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json"
}
},
schema: {
data: "d",
model: {
id : "ViewName"
}
}
},
template: "<
a
href
=
'tabstrip-grid'
>${Description}</
a
>",
click: menuClick
});
});
</
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
id
=
"tabstrip-home"
data-title
=
"Home"
data-layout
=
"home-layout"
>
<
ul
data-style
=
"inset"
id
=
"menuList"
></
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-grid"
data-title
=
"Overzicht"
data-init
=
"initListView"
data-layout
=
"list-layout"
>
<
ul
data-style
=
"inset"
id
=
"list"
></
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-detail"
data-title
=
"Details"
data-layout
=
"list-layout"
>
<
div
id
=
"container"
>
<
div
id
=
"detail"
></
div
>
</
div
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"home-layout"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
class
=
"nav-button"
data-align
=
"left"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-align
=
"right"
data-role
=
"button"
class
=
"nav-button"
href
=
"#tabstrip-home"
>Home</
a
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
id
=
"tabstrip"
>
<
a
href
=
"#tabstrip-home"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#tabstrip-grid"
data-icon
=
"favorites"
>Overzicht</
a
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"list-layout"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
class
=
"nav-button"
data-align
=
"left"
data-role
=
"backbutton"
>Back</
a
>
<
input
id
=
"search"
/>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-align
=
"right"
data-role
=
"button"
class
=
"nav-button"
href
=
"#tabstrip-home"
>Home</
a
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
id
=
"list-tabstrip"
>
<
a
href
=
"#tabstrip-home"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#tabstrip-grid"
data-icon
=
"favorites"
>Overzicht</
a
>
<
a
href
=
"#tabstrip-detail"
data-icon
=
"details"
>Details</
a
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
0
Hello,
Reason for that is that the search DOM element is in the layout, which gets attached immediately before the view is displayed. The right moment to initialize the autocomplete would be in the viewShow event, when the element is inside the DOM.
However, I do think this is counter-intuitive. I am considering introducing layout init event, where the developer will be able to access and manipulate the layout DOM.
Greetings,
Petyo
the Telerik team
Reason for that is that the search DOM element is in the layout, which gets attached immediately before the view is displayed. The right moment to initialize the autocomplete would be in the viewShow event, when the element is inside the DOM.
However, I do think this is counter-intuitive. I am considering introducing layout init event, where the developer will be able to access and manipulate the layout DOM.
Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Roland Koops
Top achievements
Rank 1
answered on 08 Feb 2012, 08:47 AM
Petyo,
Thanks for explaining. I have moved my header from the layout to my view. It works.
If you are gonna work on the events, can you add the view id to the view or the event object. Because i can't identify which view is shown/initialised in the viewShow and viewInit events at the moment.
thanks,
Roland
Thanks for explaining. I have moved my header from the layout to my view. It works.
If you are gonna work on the events, can you add the view id to the view or the event object. Because i can't identify which view is shown/initialised in the viewShow and viewInit events at the moment.
thanks,
Roland
0
Hello,
The views are going to provide per-view declarative events:
The data-init attribute is supported (although not documented) in the current beta release, too.
in the application viewInit handler, you can obtain the view id from the event in the following way:
Regards,
Petyo
the Telerik team
The views are going to provide per-view declarative events:
<
div
data-role
=
"view"
id
=
"foo"
data-init
=
"fooInit"
data-show
=
"fooShow"
> ...
<
script
>
function fooInit() { /*...*/ };
function fooShow() { /*...*/ };
</
script
>
The data-init attribute is supported (although not documented) in the current beta release, too.
in the application viewInit handler, you can obtain the view id from the event in the following way:
var app = new kendo.mobile.Application(document.body, {
viewInit: function(e) {
console.log(e.view.element.attr("id"));
}
});
Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!