Questions on Kendo UI for jQuery Forum

2 answers

784 views

Kendo DataSource (AJAX) "GET" / Custom Query

Below is a data source which connects to an external REST service. All is well, except when I want to do a query and not return the entire set of data. I need to URL encode with messageTo = xxx but I am unsure of the correct syntax in a Kendo datasource or if this is supported at all..



Are you able to assist? Source code below. The code in BOLD is not working



Best Regards,



Damien.





var dataSource = new kendo.data.DataSource({

serverPaging: true,

pageSize: 10,

transport: {

read: {

type: 'GET',

headers: {'X-Parse-Application-Id':'MY_AUTH_KEY','X-Parse-REST-API-Key':'MY_SECOND_KEY'},

url: " https://api.parse.com/1/classes/Messages",

data: "{ messageTo: 'USER_ID_HERE'}",

dataType: "json" // JSONP (JSON with padding) is required for cross-domain AJAX

},

schema: { // describe the result format

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

}

});

Data Source

answered on 06 Feb 2013

1 answer

110 views

JSON, Templates, and Binding to Kendo Mobile Lists

Hi,

When looking at the Twitter example I have adapted it with my own data.

http://demos.kendoui.com/mobile/listview/pull-with-endless.html

I need to make a slight change:
1. When tapping each 'row' I want it to highlight blue (is there a way I can get this to happen?)
2. When tapping anywhere on the row, it needs to run a function based on id="1" id="2" etc. How do I wrap the entire row with an a href="#" ????

Thanks.

ListView (Mobile)

answered on 06 Feb 2013

3 answers

142 views

What is the correct method to Bind events to <a> and <li> List elements?

Hi Kendo gurus,

I am wondering if I am doing something wrong.

Basically I have a couple of functions that check localStorage session variables and I want to bind the events to list elements within my Kendo mobile application.

I have a list view like so: KENDO LIST HTML
<li data-icon="globe"><a href="#page1">Page 1</a></li>
<li data-icon="reply"><a href="#page2">Page 2</a></li>
<li data-icon="settings"><a href="#page3">Page3</a></li>

Then a function that checks if the user is a guest, and re-directs them: JS:
function checkSession() {
if (localStorage.getItem("guest") == "true") {app.navigate('#pleaseregister');}else {app.navigate('#page1');}
};

I've tried:
#1. <li data-icon="globe"><a href="#" onClick="checkSession();">Page 1</a></li>
and:
#2. <li data-icon="globe"><a href="#" data-click="checkSession">Page 1</a></li>
#3. <li data-click="checkSession" data-icon="globe"><a href="#" >Page 1</a></li>

In example 1, onClick events fire in the web browser/emulator but not on physical device, it appears very unresponsive.
Example 2+ 3 does not work at all.

When I use a button like so:
<a data-icon="toprated" data-click="checkSession" data-role="button" style="width:90%; height:30px;">Create Listing</a>

It works! But I like the look of the list view.

If you could let me know if there is a special way of doing this, it would be very much appreciated, I've noticed several Kendo UI users on here asking this question and there doesn't seem to have been an answer given? It's driving me crazy.

Regards,

Damien.

ListView (Mobile)

answered on 06 Feb 2013

1 answer

385 views

Loading Image Displaying on Initial Page Load for MVC 4 Mobile Application

I was wondering if you might be able to get rid of the Kendo loading image on the initial page load?

My code is below.

HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace KendoMobileAppV2.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

return View();

}

public ActionResult About()

{

ViewBag.Message = "Your app description page.";

return View();

}

public ActionResult Contact()

{

ViewBag.Message = "Your contact page.";

return View();

}

_Layout.cshtml

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<meta name="viewport" content="width=device-width" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Styles.Render("~/Content/kendo")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

@Scripts.Render("~/bundles/jquerymobile")

</head>

<body>

<div data-role="page" data-theme="b">

<div data-role="header">

<h1>@ViewBag.Title</h1>

</div>

<div data-role="content">

@RenderBody()

</div>

@RenderSection("scripts", required: false)

</body>

</html>

Index.cshtml

@{

ViewBag.Title = "Home Page";

}

<h2>@ViewBag.Message</h2>

@(Html.Kendo().DatePicker().Name("Birthday"))

<p>

To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc<;/a>.

</p>

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">Navigation</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

BundleConfig.cs

using System.Web;

using System.Web.Optimization;

namespace KendoMobileAppV2

{

public class BundleConfig

{

// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

"~/Content/themes/base/jquery.ui.core.css",

"~/Content/themes/base/jquery.ui.resizable.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.button.css",

"~/Content/themes/base/jquery.ui.dialog.css",

"~/Content/themes/base/jquery.ui.slider.css",

"~/Content/themes/base/jquery.ui.tabs.css",

"~/Content/themes/base/jquery.ui.datepicker.css",

"~/Content/themes/base/jquery.ui.progressbar.css",

"~/Content/themes/base/jquery.ui.theme.css"));

// The Kendo JavaScript bundle

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

"~/Scripts/kendo.web.*", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz

"~/Scripts/kendo.aspnetmvc.*"));

// The Kendo CSS bundle

bundles.Add(new StyleBundle("~/Content/kendo").Include(

"~/Content/kendo.common.*",

"~/Content/kendo.default.*"));

// Clear all items from the default ignore list to allow minified CSS and JavaScript files to be included in debug mode

bundles.IgnoreList.Clear();

// Add back the default ignore list rules sans the ones which affect minified files and debug mode

bundles.IgnoreList.Ignore("*.intellisense.js");

bundles.IgnoreList.Ignore("*-vsdoc.js");

bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

}

General Discussions

answered on 05 Feb 2013

1 answer

267 views

Node keypress event

Hey,

I'm trying to find a way to bind an enter keypress event to some function, so that using only the keyboard, when a user presses enter on some node, it will lead to some action.

I wonder what is the correct way to do that.
I have a complicated template for each node, and I tried to bind the keydown event to a class I have in each node, but that didn't work (it did work for me with the click event though...)

Any advice?

Thanks,

TreeView

answered on 05 Feb 2013

8 answers

618 views

datasource POST not working when sync is called

Hello,

I'm following the "Getting started with the Kendo UI datasource" video. All is going well until I reach the "create new item" part. Populating the grid from the source json file works just fine. Looking at the network tab of the developer tools in Chrome, a POST is never sent when the datasource.sync() is called.

I am using jquery 1.8.2, Kendo UI Q3 2012 SP1 and Chrome 24.0.1312.56.

My javascript is as follows:

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "data.json",

dataType: "json",

cache: false

},

create: {

url: "addItem.php",

type: "POST"

},

schema: {

model: myDataSource

}

});

Any help would be greatly appreciated.

Data Source

answered on 05 Feb 2013

4 answers

1.2K+ views

grid configuration : how to add fields to dataSource.schema.model.fields at runtime

What is the proper way to add field objects at runtime to an incomplete, i.e. only partially defined, dataSource schema model fields object? While some of the model fields will be pre-defined as part of the grid configuration, some of the column-names of the grid will be based on fields that are not known at design-time; they will be the names of employees in a department, and so they are not known until the department is selected by the user. So fields have to be added to the model, and corresponding columns have to be added to the grid at runtime.

Date..........Tom...........Dick..............Harry..............Jane...............Liz
1/1/2013......90.............180...............23.....................65..................50
1/2/2013......65.............210...............19.....................99..................28
1/3/2013......25.............100...............89.....................54..................22
.
.
.
1/31/2013

or a different department:

Date..........Ralph.........Delores.......Fred.
1/1/2013......19.............120...............41
1/2/2013......57.............315...............29
1/3/2013......21.............246...............63

Grid

answered on 05 Feb 2013

1 answer

44 views

Splitter's arrow is wrong in ie9.

Hi.
Splitter's arrow is abnomal in ie9,
it is ok in chrome.
e.g when i open http://demos.kendoui.com/web/splitter/index.html, resize a splitter in the page, after release the mouse button, the mouse cursor still is "<-->".
Thanks!

Splitter

answered on 05 Feb 2013

2 answers

65 views

File selection causes multiple instances to be created...

Hey guys,

I have the Kendo stuff setup with Visual Studio 2012 and MVC 4 and everything seems to be working OK. However, the upload functionality is not working as expected. See the attached image for more details. It doesn't matter where in the application I place the upload, I get the same results. However, if I create a project from the Kendo project template the Upload piece works and I do not get the repeated items placed into the page. More than anything I need to know what I am missing.

Thanks!

<div>

@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { id = "uploadForm" + item.CorrespondenceId.ToString(), enctype = "multipart/form-data"})){

@(Html.Kendo().Upload()

.Name("files").Multiple(true)

)

<p>

<input type="submit" value="Submit" class="k-button" />

</p>

}

</div>

Upload