Questions on Kendo UI for jQuery Forum

3 answers

283 views

How to set type on fields in XML datasource?

I have a grid that is getting its data from XML. I want to define types (numeric, date, etc.) on the fields. How do I do this? I've tried defining my model fields like CARD: { value: 'CARD/text()', type: 'number' } but that doesn't seem to work.

var xml = '<ROWS><ROW id="1"><CARD>1</CARD><LLINE>1</LLINE></ROW><ROW id="2"><CARD>1</CARD><LLINE>2</LLINE></ROW></ROWS>';

$(document).ready(function() {

$('#gridDiv').kendoGrid({

columns: [

{

field: 'CARD',

title: 'Card',

width: 60

},{

field: 'LLINE',

title: 'Line',

width: 60

}

],

dataSource: new kendo.data.DataSource({

type: 'xml',

data: xml,

schema: {

type: 'xml',

data: '/ROWS/ROW',

model: {

id: 'id',

fields: {

id: '@id',

CARD: 'CARD/text()',

LLINE: 'LLINE/text()'

}

})

});

Data Source

answered on 22 Jan 2014

1 answer

59 views

Style issues on a local MVC application

Does anyone have Grid style issues?
I'm running a local MVC application using IIS express (VS 2012)

Once in a while (seems random) when I refresh the page the grid comes up with no styles (see screenshots)
I'm using the inline editing example with minor changes... not loading any other javascripts...

Grid

answered on 22 Jan 2014

1 answer

78 views

Create grid using kendoUI mobile

Hi All,

I wanted to create a grid in my mobile project. Let me know the procedure to create a grid in Kendoui mobile. There is no direct example for this , please guide me on this.

Thanks

Gaja Naik

General Discussions

answered on 22 Jan 2014

4 answers

140 views

drag from external panel bar to google maps

I am looking to drag a panelbar item and drop it on a google map. a marker would then be created at that position.

See screenshot

I have the drag working fine but I need the pageX, and pageY coordinates where the item is dropped .

Currently I just create a marker at the center of the page after the drop.

Any info would be appreciated.

thanks
dco

Drag and Drop

answered on 22 Jan 2014

1 answer

110 views

Grouped Column rather than Group Header

The viewmodel my grid is bound to has 3 levels of hierarchy, so I end up with 2 nested grids. In the middle level, I have grouping in place. I need to display 3 different links for the group. Currently, I am taking advantage of the grouping header option. However, I would rather have an additional column in that grid with a rowspan to cover the group rather than the header. Is there any way to accomplish this without overriding multiple aspects of the kendo framework or completely moving away from kendo?
jsfiddle: http://jsfiddle.net/jJRsr/2/

Grid

answered on 22 Jan 2014

2 answers

192 views

Chart not showing data

Hello everyone!

So I have a mysql database. From here I get my json.php file. This will echo this:

{"cols":[{"label":"Weekly Task","type":"string"},{"label":"Percentage","type":"number"}],"rows":[{"c":[{"v":"SLEEP"},{"v":30}]},{"c":[{"v":"Watching Movie"},{"v":10}]},{"c":[{"v":"job"},{"v":40}]},{"c":[{"v":"Exercise"},{"v":20}]}]}

My main php code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">

</head>
<body>
<header>

</header>

<div role="main">

<div id="chart">
</div>
</div>
<footer>

</footer>

<script src="jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.dataviz.min.js"></script>

<script>

jQuery(document).ready(function($) {
$("#chart").kendoChart({
theme: "metro",
dataSource: {
transport: {
read: {
url: 'json.php',
dataType: 'json'
}
}
},
series: [{ name: "Name", type: "Age"}],

categoryAxis: [{ field: "OptionTitles" }],
line: { visible: true }

});
});
</script>

</body>
</html>

But no data is loading on the chart! Any help will be much appreciated!

Thank in advance!

Charts

answered on 22 Jan 2014

2 answers

105 views

data-views prevents drawer from opening

So this code is identical to code I have on my other views. The only thing I can't figure out, is why inlcuding data-views PREVENTS the window from opening up on in this view. The data-views path is correct. I can even copy paste code that works perfects with other views I have that also uses data-views, include the view I want to open on and it still won't work.

Why would data-views prevent the drawer from opening on a page that has been added to data-views? And more so, why does it not work here, but work everywhere else I use it.

<div id="drawerAccounts"
     data-role="drawer"
     data-views='[
    "/View/Account/AccountDefaultView.htm" //This is the correct file path and this is the view where the drawer is located.
    ]'
     data-show="accountListDrawerController.showEvent"
     data-model="accountListDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            [Person Name]
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Back to Person</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerAccounts');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

Here is a sample of my code from a view that works correctly.
Snippet<div id="drawerEditPerson"
     data-role="drawer"
     data-views='[
    "/view/editPerson/editPersonDefaultView.htm",
    "/view/editPerson/widget/editPersonStatusView.htm",
    "/view/editPerson/widget/editPersonDetailsView.htm",
    "/view/editPerson/widget/editPersonNameView.htm",
    "/view/editPerson/widget/editPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonElectronicContactView.htm",
    "/view/editPerson/widget/viewPersonContactNumbersView.htm",
    "/view/editPerson/widget/viewPersonAddressesView.htm",
    "/view/editPerson/widget/EditPersonRemarksView.htm",
    "/view/editPerson/widget/ViewPersonCompaniesView.htm",
    "/view/editPerson/widget/ViewPersonGroupsView.htm",
    "/view/editPerson/widget/viewPersonNotesView.htm",
    "/view/editPerson/widget/viewPersonRelationshipsView.htm",
    "/view/editPerson/widget/viewPersonCampaignsView.htm",
    "/view/editPerson/widget/viewPersonDocumentsView.htm",
    "/view/editPerson/widget/viewPersonActivitiesView.htm"
    ]'
     data-show="peopleEditDrawerController.showEvent"
     data-model="peopleEditDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            Contact Info
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Preview</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonNameView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Name</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonStatusView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Status</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDetailsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Details</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDisciplinesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Disciplines</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonElectronicContactView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Electronic Contact</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonContactNumbersView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Contact Numbers</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonAddressesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Address</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/EditPersonRemarksView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Remarks</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/ViewPersonGroupsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Groups</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonNotesView.htm?id=#id#&includeGeneral=true&includeActivity=false&includeDocument=false&includeGroup=false&includeAccount=false" data-bind="idLink: id" data-transition="none">Notes</a></li>
                <li><a href="#" data-link="/view/Account/AccountDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Accounts</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerEditPerson');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm?id=#id#" data-bind="idLink: id" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

Drawer (Mobile)

answered on 22 Jan 2014

1 answer

240 views

Using the mobile drawer in _Layout in MVC

I am getting an 'object reference not set to an instance of an object' error on the mobile drawer when trying to add it to the _Layout.cshtml of my application. Are you allowed to use the mobile drawer in the _Layout without setting up any mobile views or mobile layouts? If so, could you provide an example or show me where I am going wrong. Below are code snippets from my _Layout.cshtml file:

Below are my CSS and JS files in the head section of _Layout.cshtml:

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/bootstrap/bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/bootstrap/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/kendo.all.min.js")"></script>

Below is where I am creating my mobile drawer inside of the body tag in my _Layout.cshtml file:

@(Html.Kendo().MobileDrawer()

.Name("my-drawer")

.HtmlAttributes(new { style = "width: 270px" })

.Content(obj =>

Html.Kendo().MobileListView().Type("group")

.Items(root =>

{

root.Add().Text("Navigation");

root.Add().Text("Account");

})

)

<div class="container">

<div class="row">

<div class="col-xs-12">

@RenderBody()

</div>

And below is my JavaScript that I have at the bottom of my body tag in _Layout.cshtml:

script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>

<script type="text/javascript">

var app = new kendo.mobile.Application(document.body,

{

skin: "flat",

initial: @Url.Action("Index", "Home")

});

</script>

Drawer (Mobile)

answered on 22 Jan 2014

1 answer

182 views

Recalculate group aggregates after updating dataitems in dataSource

We're dynamically updating values in the dataSource of a grid using it's dataSource.data() method and whilst the Total aggregate seems to work, the group aggregates don't update.

Is there a way to force these calculation to be executed after the data() method is called?

Thanks,
Jacques

Grid

answered on 22 Jan 2014

1 answer

78 views

Listview with viewmodel

I am trying to get a listview filled with messages that reside in an array in the ViewModel. When i click on a category the function updateMessages is called. (shown below)

01.function updateMessages(id, title) {

02. var data = {

03. 'language': "en",

04. 'api_version': '2'

05. };

06. var categoryId = id.split('-').pop();

07. categoryId = typeof categoryId !== 'undefined' ? categoryId : "";

08.

09. var url = SERVER_NAME;

10. if (categoryId === "") {

11. url += '/secret/all';

12. }

13. else {

14. url += '/secret/category/' + categoryId;

15. }

16. url += '?callback=?';

17. $.getJSON(url, data, function(json) {

18. var messages = '';

19. $.each(json.messages, function() {

20. messagesViewModel.addMessage(this.id, this.message, this.machine_timestamp, this.human_timestamp, this.number_comments)

21. });

22. messagesViewModel['title'] = title;

23. });

24. app.application.navigate('messages.html');

25.}

updateMessages fills in the messagesViewModel:

1.var messagesViewModel = kendo.observable({

2. messages: [],

3. title: '',

4.

5. addMessage: function(id, message, machineTimestamp, humanTimestamp, comments){

6. this

.messages.push({id:id, message:message, machineTimestamp: machineTimestamp, humanTimestamp: humanTimestamp, comments:comments});

7. },

8.})

Which then gets shown in the view like this:

01.<!DOCTYPE html>

02.

03.<html>

04. <head>

05. <title></title>

06. </head>

07. <body>

08. <div id="messageList" data-role="view" data-title="Secrets" data-model="messagesViewModel">

09. <div id="messagesViewContent" data-role="content">

10. 

11. <ul id="messageList" data-role="listview" data-bind="source: messages" data-template="messagesTemplate" data-auto-bind="false">

12. </ul>

13. </div>

14.

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

16. <a id="#:id#" href="messageDetails.html?id=#:id#&message=#:message#">

17. <p>#:message#</p>

18. </a>

19. </script>

20. </div>

21. </body>

22.</html>

The problem is that everytime I click on a category the array just keeps on filling up. I want to empty the array before adding new messages. I tried to add a clearMessage function in the viewmodel that executed: this.messages.length = 0. This cleared the array but in the view model you can still see all the old messages. How can I remove those messages everytime this view is called upon.

General Discussions

answered on 22 Jan 2014