Questions on Kendo UI for jQuery Forum

6 answers

468 views

Navigate from data-init event

Hello,

I am using kendo mobile, and I am trying to navigate to a view in page-init event, but it is not working.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="kendo.mobile.min.js"></script>

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

</head>

<body>

<div data-role="view" id="settings" data-layout="commonLayout" >

Login

</div>

<div data-role="view" id="favorites" data-layout="commonLayout" data-init="favoritesPageInit">

Featured

</div>

<div data-role="layout" data-id="commonLayout">

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#favorites" data-icon="favorites">Favorites</a>

<a href="#settings" data-icon="settings">Setting</a>

</div>

</footer>

</div>

<script type="text/javascript" charset="utf-8">

var app = new kendo.mobile.Application($(document.body), { initial: "settings" });

function favoritesPageInit(e){

app.navigate("#settings");

}

</script>

</body>

</html>

When I am running the simple code above, click on the 'favorites' icon of the tabstrip, I am expecting to navigate to the 'login' view, but it is not working well.

Am I missing anything?

Thanks,
Amr

Application

answered on 23 Apr 2012

2 answers

549 views

Is possible to add a custom attribute a to a datasource?

Imagine that I have a kendoui datasource.
Is it possible to add a custom property/attribute like this ?

var dataSource = new kendo.data.DataSource({

    xpto = "3", <---

    transport: {

        read: {

            // the remote service url

            url: "http://search.twitter.com/search.json",

            // JSONP is required for cross-domain AJAX

            dataType: "jsonp",

            // additional parameters sent to the remote service

            data: {

                q: "html5"

            }

        }

    },

    // describe the result format

    schema: {

        // the data which the data source will be bound to is in the "results" field

        data: "results"

    }

});

Data Source

answered on 23 Apr 2012

3 answers

227 views

need sample example for nested json object

Hi All,

Can somebody give sample example to get JSON Object through Webservice and print it in html page.

I am trying but unable to print it.

I want to print below JSON object.

{"GetClientListResult":[{"Client_ContactNumber":"333333","Client_EmailId":"smith@123.com","Client_Id":3,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/3.jpg","Client_Name":"Mr. SMITH","ReplyErrorMessage":null},{"Client_ContactNumber":"444444","Client_EmailId":"williams@123.com","Client_Id":4,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/4.jpg","Client_Name":"Mr. WILLIAMS","ReplyErrorMessage":null},{"Client_ContactNumber":"555555","Client_EmailId":"rohan@123.com","Client_Id":5,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/5.jpg","Client_Name":"Mr. ROHAN","ReplyErrorMessage":null},{"Client_ContactNumber":"666666","Client_EmailId":"rishab@123.com","Client_Id":6,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/6.jpg","Client_Name":"Mr.RISHAB","ReplyErrorMessage":null},{"Client_ContactNumber":"777777","Client_EmailId":"jonathan@123.com","Client_Id":7,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/7.jpg","Client_Name":"Mr. JONATHAN","ReplyErrorMessage":null},{"Client_ContactNumber":"111111","Client_EmailId":"jeff_devis@123.com","Client_Id":1,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/1.bmp","Client_Name":"Mr. JEFF DEVIS","ReplyErrorMessage":null},{"Client_ContactNumber":"222222","Client_EmailId":"wilson@123.com","Client_Id":2,"Client_Image":"http:\/\/122.170.2.155:9092\/TR_Service\/Image\/2.jpg","Client_Name":"Mr. WILSON","ReplyErrorMessage":null}]}

Data Source

answered on 23 Apr 2012

1 answer

352 views

Dropdown list selection bug while using keyboard

I think I may have found a bug in the way drop down list works, this can be reproduced in teh cascading dropdown list demo (http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html) in the following way.

1. Make sure category has focus (click the down arrow twice)
2. Use the up/down keys (or Alt+down) to select a category and press tab (products should now have focus)
3. Use the up/down keys (or Alt+down) to select a product and press tab (orders should now have focus)
4. Use the up/down keys (or Alt+down) to select a order.
5. Now change the caterogy to something else (either by mouse or by keyboard) and press tab

Note: Products does not get focus, and if it does, using the up/down keys to change selection no longer works, this is the same for orders once you select a product with the mouse.

Thanks,

DropDownList

answered on 23 Apr 2012

0 answers

61 views

Grid is not working inside -moz-box div in firefox

Grid is not working inside -moz-box div in firefox, in chrome is working great. My code is:

<div class="header flexbox" onclick= "HeaderClick('@Url.Content("~/")')">
<div id="myGrid" ></div>
<div id="leftlogo">
</div>
<div id="middlelogo">
</div>
<div id="rightlogo">
</div>
</div>

<script>
$("#myGrid").kendoGrid({
pageable: true,
autoBind: false,
groupable: true,
selectable: true,
sortable: true,
columns: [
{ title: "ID", field: "ID" },
{ title: "Description", field: "Description" },
{ title: "Created By", field: "CreatedBy" },
{ title: "Creation Date", field: "CreationDate" }
]
});
</script>

As i saw the width and height percentages cannot be controlled in firefox when flexbox is present. As you see i have the grid inside of flexbox. And the width should ocuppy the entire content of the component that you put in(this is done by design to have width:100%). Is this a way/trick to have kendogrid look as in chrome? See attached picture for details

Grid

asked on 23 Apr 2012

1 answer

59 views

Documentation typo

On Page:
http://www.kendoui.com/documentation/ui-widgets/fundamentals.aspx

Under:
"Initialize a kendo DropDownList using a role attribute"

The container selector is misspelt:

(is this an appropriate place to post this?)

<div id="container">
    <select data-role="dropdownlist"></select>
</div>

<script>
    kendo.init($("#contianer"));
</script>

General Discussions

answered on 23 Apr 2012

1 answer

69 views

Using KendoUI with ActivePDF WebGrabber?

I'm using a ActivePDF WebGrabber and none of the KendoUI Graphs render to PDF. I beleve it is because the Javascript doesn't get executed by the WebGrabber? Is there a workaround or solution for rendering to PDFs?

Charts

answered on 23 Apr 2012

1 answer

106 views

Series Name

Hi

Can a Series 'name:' be databound ?

I have a datasource with the values stored in 5 seperate fields which have 5 corresponding fields with the name in it...

Thanks in advance..

Charts

answered on 23 Apr 2012

0 answers

68 views

How to use pie chart in mobile layout.

Hi All,

I am trying to use pie chart in mobile layout having proper header and footer with navbar.

I just want to use pie chart in between header and footer. But not able to do that.

Can anyone help me for the same.

thanks,
prashant

Charts

asked on 23 Apr 2012

2 answers

180 views

Kendo UI Treeview with ASP.Net Treeview control issue

Hi,

I am trying to implement Kendo UI Treeview control with ASP.Net TreeView control. But its not working as it should be. Please suggest me your views.

What I have done till now as per below.
(1) As per Kendo UI, Its working fine.

</ul>

</li>

JQuery Code:

$("#treeview").kendoTreeView({

dragAndDrop: true

});

(2)    I am trying to implement the same with ASP.Net Treeview control but it’s not working. Please check the below code.

        <asp:TreeView ID="ASPTreeView" runat="server" ImageSet="BulletedList">
            <Nodes>
                <asp:TreeNode Text="Table of Contents"></asp:TreeNode>
                    <asp:TreeNode Text="Chapter One">
                    <asp:TreeNode Text="Section 1.0">

                    <asp:TreeNode Text="Topic 1.0.1" />
                    <asp:TreeNode Text="Topic 1.0.2" />
                    <asp:TreeNode Text="Topic 1.0.3" />
                    </asp:TreeNode>
                    <asp:TreeNode Text="Section 1.1">
                    <asp:TreeNode Text="Topic 1.1.1" />

<asp:TreeNode Text="Topic 1.1.2" />

<asp:TreeNode Text="Topic 1.1.3" />

<asp:TreeNode Text="Topic 1.1.4" />

</asp:TreeNode>

<asp:TreeNode Text="Chapter Two">

<asp:TreeNode Text="Section 2.0">

<asp:TreeNode Text="Topic 2.0.1">

<asp:TreeNode Text="Subtopic 1" />

<asp:TreeNode Text="Subtopic 2" />

</asp:TreeNode>

<asp:TreeNode Text="Topic 2.0.2" />

</asp:TreeNode>