Questions on Kendo UI for jQuery Forum

3 answers

167 views

Hello,

I have a Popover with a ListView of links. I would like someone to be able to click on a link, have it close and it navigates to the page. Here is the code that I have so far, I have it opening in the parent, but it doesn't close.

<%@ Master Language="C#" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

[[code removed]]

</head>

<body>

<a href="../index.html">Back</a>

<div data-role="view" data-layout="overview-layout" id="overview-content" data-title="Title">

<form id="form1" runat="server">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<asp:ContentPlaceHolder ID="mainContent" runat="server">

</asp:ContentPlaceHolder>

</li>

</ul>

</li>

</ul>

</form>

<div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'>

<div data-role="view" data-title="People">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-role="button" data-align="right" data-click="closeParentPopover">Close</a>

</div>

<ul data-role="listview">

<li><a data-target="_top" href="default1.aspx" data-click="closeParentPopover">Link 1</a></li>

<li><a data-target="_top" href="default2.aspx" data-click="closeParentPopover">Link 2</a></li>

<li><a data-target="_top" href="default3.aspx" data-click="closeParentPopover">Link 3</a></li>

<li><a data-target="_top" href="default4.aspx" data-click="closeParentPopover">Link 4</a></li>

<li><a data-target="_top" href="default5.aspx" data-click="closeParentPopover">Link 5</a></li>

<li><a data-target="_top" href="default6.aspx" data-click="closeParentPopover">Link 6</a></li>

</ul>

</div>

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

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title">Title</span>

<a data-align="right" data-rel="popover" data-role="button" class="nav-button" href="#popover-people">Login</a>

</div>

</header>

</div>

<script>

function closeParentPopover(e) {

var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver');

popover.close();

}

</script>

<script>

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

The current code is not closing the link for me. Using the Developer Tools when I debug the JS, the closeParentPopover is not being called when a link is clicked inside the Popover. Can someone help me out here? I would have thought that this would have been more simple.

PopOver (Mobile)

answered on 01 Feb 2013

1 answer

154 views

Tooltip Styling

Is it possible to style the tooltip so it can have an arrow similar to this:
bootstrap tooltip example

Charts

answered on 01 Feb 2013

7 answers

265 views

KendoUI Mobile DropDownList in Icenium Mist

Hello!
I'm developing a simple app using Icenium Mist. I followed the example on mobile forms page about drop-down list:
http://demos.kendoui.com/mobile/forms/index.html

In the demo it works fine - the drop down shows up and stays there. In my app I can see the drop-down list show for a split second, and it disappears right away. I didn't see any JS errors or missing references.

Markup is simple:
<div data-role="view" data-init="initSignOffForm">
.....
<select id="ddlChild">
<option value="1">Veronique</option>
<option value="2">Michelle</option>
<option value="3">Griffin</option>
<option value="4">Boris</option>
</select>
.....
</div>

Then my JS file piece copied from demo page:

function initSignOffForm(){
var body = $(".km-vertical,.km-horizontal");
if (kendo.ui.DropDownList) {
$("#ddlChild").kendoDropDownList({
// The options are needed only for the desktop demo, remove them for mobile.
popup: { appendTo: body },
animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
});
}
}

I tried removing the options for the list in JS - same thing...

Compiled and tested in on the phone - blinks the same way as well.

Anyone knows why and how to fix?

General Discussions

answered on 01 Feb 2013

2 answers

125 views

Nested grid's and some odd behavior...

I have a grid, with a nested grid (exposed via detailInit), which also has a nested grid.
I am having a couple of issues with it.
When expanding the main grid, if I start at the top item, the second and third one won't expand.
If I start at the third one, the second and first one will expand. If I start at the second one, the first will expand, but the third one won't.

In the inner grid, if I expand the top row, the second row expands, but isn't rendered correctly. My innermost grid is actually a tabstrip with two div's in it, and each of those divs are a grid.

I've made a sample that re-creates the problems I am seeing at
http://jsfiddle.net/giltnerj0/e2RfH/

Thank you.

Robin

Grid

answered on 01 Feb 2013

1 answer

119 views

How to connect datasource to oberservable object

I have a couple of <div>'s that are bound to an observable object. Now I want that object to be bound to the datasource so that when the datasource reads data it automatically updates the bound fields. How do I do it? In other words, I call the web service with dataSource.read() and get the data back....OK, now what?

HTML:

<div id="view">

Sites Monitored: <div data-bind="html: sitesMonitored" ></div><br/>

Sites Failing: <div data-bind="html: sitesFailing" ></div>

</div>

var viewModel = kendo.observable({

sitesMonitored: 0,

sitesFailing: 0

});

var dataSource = new kendo.data.DataSource({

transport: {

read: "/Dashboard/Stats",

type: "get"

}

});

The JSON returned by the web service call:

{"SitesMonitored":35,"SitesFailing":4}

MVVM

answered on 01 Feb 2013

1 answer

194 views

Cannot group on more than one column

Hello,

I am currently using "Kendo UI Web v2012.3.1114" and I've had this problem where I couldn't group on a column containing line breaks, which is a known issue.

Yesterday I decided to update my project to Kendo UI Web v2012.3.1315 and by the same occasion, update jQuery to version 1.8.3. To my satisfaction, the grouping issue was solved, but I then realized I couldnt no longer group on more than one column.

I stumbled upon this post on stackoverflow which mentionned the same problem I have, but the accepted answer suggests that the multiple grouping is solved by upgrading to the version that solved the problem for me.

http://stackoverflow.com/questions/14536083/kendo-grid-groupping

Any thoughts?

Grid

answered on 01 Feb 2013

2 answers

267 views

Is it possible to keep tabstrip in layout page and the loaded content in some body section?

Hi,

My requirement is like, I want to keep my tabs in layout page, as its shared across all the pages.
But when im clicking tab, respective content needs to load in Body section(@RenderBody)
in some other views like below.

Layout.cshtml
*******************
<body>
        <header>
                @* Some Content here *@
                @Html.Partial("_TabPageUI") @*Tabstrip Page*@
        </header>
               @RenderBody()
    <footer>
         @* Some Content here *@
    </footer>
</body>

Index.cshtml (which is rendering in renderbody)
*****************
<div id="tabcontent">
         @* Needs to load tab content here *@
</div>

As of now, im using Ajax.actionlink with update target id (tabcontent), but i want to use kendo tabstrip and acheive the same.
Is it possible to do so?

Thanks,
PreethiBaskaran.

TabStrip

answered on 01 Feb 2013

7 answers

495 views

Pull to Refresh: Local Data Source, Freezing?

Hi Telrik Team,

At the moment I have a pull to refresh view based on the 'twitter' example you have, which works fine (see extract below)
At present, it is looking at json.txt included locally in my project and pulling data back via pull to refresh.

Now when I go to create a local data source:

var movies = [ {
      title: "Star Wars: A New Hope",
      year: 1977
   }, {
     title: "Star Wars: The Empire Strikes Back",
     year: 1980
   }, {
     title: "Star Wars: Return of the Jedi",
     year: 1983
   }
];
var localDataSource = new kendo.data.DataSource({data: movies});

And adjust my pull to refresh view to look at this data source instead, I map the fields via the template and I get a list of results fine,
however I am unable to refresh it when I pull down, it just hangs! Are you able to provide me with a step in the right direction?

Thanks so much

Rgds.

____________________________________
The Kendo Template:

<script type="script/x-kendo-template" id="pull-to-refresh-template">
<div class="inboxList">
<h3 class="time">9:00am</h3><h3>The Purchace ID is:#: PurchaseID #</h3>
<a class="reply" data-role="button" data-rel="actionsheet" href="\\#inboxActions" data-actionsheet-context="ID">Reply</a>
<h2>Another Field</h2>
<p>Something here</p>
</div>
</script>

Json Txt Example:
{
"results": [
{
"UserID": "33",
"PurchaseID": 944000
},
{
"UserID": 2,
"PurchaseID": 3584
},
{
"UserID": 3,
"PurchaseID": 7473
},
{
"UserID": 4,
"PurchaseID": 8654
______
Javascript Functions:

function mobileListViewPullToRefresh() {

var dataSource = new kendo.data.DataSource({

serverPaging: true,

pageSize: 10,

transport: {

read: {

url: "json.txt",

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

}

});

$("#pull-to-refresh-listview").kendoMobileListView({

dataSource: dataSource,

pullToRefresh: true,

appendOnRefresh: false,

template: $("#pull-to-refresh-template").text(),

endlessScroll: false,

pullParameters: function(item) {

return {

since_id: item.id_str,

page: 1

};

}

});

}

ListView (Mobile)

answered on 01 Feb 2013

2 answers

266 views

Issue with Grid In Form Submit of DateTime and ForeignKeyColumn

We are using Kend Web Grid in Razor views and we are not able to submit the data to the controller from the Grid in the form. I have attached the screen shot of the Grid while editing.

As you can see we need to collect the details like OrderDate (DateTime), ShipCountry and Employee ID (Foreign Key Column).

We are following your sample project "378389_GridInForm" to submit the Grid data through Hidden controls. The issue we have is when we enter the date and submit the date, format of Date shown in the grid is "Tue Jan 22 00:00:00 UTC+0530 2013" which .Net is not able to parse to DateTime when using TryUpdateModel.

Another issue with ForeignKey column is when we select an option from the DropDown and click on the Update button the Selected Items Value (ID) is shown in the grid. We need to show the Selected Item's text in the Grid but assign the ID to the hidden control associated with the column.

We have attached the Model, View and Controller files for your review. Can you please guide how to use the Kendo Grid for our requirement. I know we have Kendo Specific commands for Insert, Update to update the Grid Values into Model, but, the sample we are working is for testing only Grid. We have UI scenarios where Grid is just one part of the Form and we have many other data inputs that we take.

We need to demo our POC as early as possible and any quick assistance will be of great help.

Grid

answered on 01 Feb 2013

7 answers

232 views

[Solved] posted data does not reflect user input on popup edit

When i edit my grid using popup editing the value of the 3rd field "Name" is always "" even if i fill the textbox with a value, I noticed that if i put filed "Name" on first position of grid column definition the vallue in the posted data is correct.
If i change editable mode from popup to inline every field is filled correctly.
Did i missed something in the initialization of the grid/datasource?

browser: IE9
Kendo UI: Q3 2012

I've got the following Kendo Grid definition:

$("#grid").kendoGrid({
autoBind:false,
sortable: true,
filterable: true,
columnMenu: true,
height: 400,
columns: [
{ field: "StoreType", title: "Store Type", editor: StoreTypesDDEditor },
{ field: "City", title: "City", editor: CitiesDDEditor },
{ field: "Name", title: "Store Name" },
{ field: "Code1" },
{ field: "Code2" },
{ field: "Code3" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
detailTemplate: kendo.template($("#StoreDetailTempl").html()),
detailInit: detailInit,
editable: "popup",
toolbar: [{ name: "create", text: "Add new Store"}],
dataSource: dsStore
});

Definition of DataSource is:

Grid

answered on 01 Feb 2013