Questions on Kendo UI for jQuery Forum

1 answer

86 views

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

150 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

122 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

202 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

112 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

256 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

190 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

89 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

1 answer

246 views

MVVM binding to controller method

Hi,

I'm trying out MVVM binding on HTML for the first time and have come across a scenario which i cant find any examples of.

What i'm trying to do is bind a lot of controls on my view to the viewmodel so (like silverlight) if a control changes value, i can check the viewmodel has changed and raise a haschanges or a similar event. - and i think this is possible using the MVVM model.

I currently had the drop down control bind to the controller like so:

@(Html.Kendo().ComboBox()
.Name("BusinessUnitComboBox")
.Filter("contains")
.Placeholder("Select Business Unit...")
.DataSource(src =>
{
src.Read(read =>
{
read.Action("GetBusinessUnits", "Home", new { CompanyId = ViewBag.CompanyId });
});
})
.DataTextField("Name")
.DataValueField("BusinessUnitId")
.Suggest(true)
.HtmlAttributes(new { style = "width: 250px" })
.Events(e => e.Change("BusinessUnitChanged"))

How would i be able to call this method using the MVVM way?

Currently i have:

<select data-role="combobox" data-text-field="Name" data-value-field="BusinessUnitId" data-bind="source: buSource, value: BusinessUnitComboBox"></select>

as the html and after reading a guide, i have the following as my script:

var viewModel = kendo.observable({
buSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
}),
BusinessUnitComboBox: null,
hasChanges: false,
save: function () {
this.productsSource.sync();
this.set("hasChanges", false);
}
});

Would someone be able to guide me or point me in the right direction on how to bind to the controller as i've done using the kendo control itself and also how to use the parameterMap?

Thanks in advance.

MVVM

answered on 22 Jan 2014

2 answers

447 views

how to get Windows explorer like treeview in Kendo ui web

Hi,
My requirement is windowsexplorer-like-treeview as explained in this tutorial .Can you help me to do it in Kendo ui Web .We are using Java and kendo ui web.
I need to show hierarchy structure at left side and upon clicking the files inside the sub-folders I Need to display the file content in the right side.
As I am new to kendo ui Kindly suggest me with a demo and it would be a great help.

Thanks in Advance.
Winds

TreeView

answered on 22 Jan 2014