Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

AutoComplete not working in layout header

5 Answers 268 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
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?

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 07 Feb 2012, 02:40 PM
Hello,

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>
    <script src="http://code.jquery.com/jquery-1.7.1.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:

<!DOCTYPE html>
<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
Petyo
Telerik team
answered on 07 Feb 2012, 03:54 PM
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
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
0
Petyo
Telerik team
answered on 08 Feb 2012, 09:08 AM
Hello,

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!
Tags
General Discussions
Asked by
Roland Koops
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Roland Koops
Top achievements
Rank 1
Share this question
or