Questions on Kendo UI for jQuery Forum

0 answers

167 views

Grid styling text

I have looked through examples and even looked at code from grids used on this site and cannot seem to get any clear information on how to style the text that is shown in a grid, the basic grid style is there but I cannot seem to get anything other than the default sans-serif text. Even on the grid walkthrough it covers quite a lot but not how to style the text... which in the walkthrough is also shown as sans-serif. I think it would be extreamly useful for some clear information on this on the site, not only for myself but for others that are not css 'save'.

Currently I have the following set before the '</head>' of my example page:

<link href="kendoui/source/styles/kendo.common.css" rel="stylesheet"/>
<link href="kendoui/source/styles/kendo.default.css" rel="stylesheet"/>
<script src="kendoui/source/js/jquery.min.js"></script>
<script src="kendoui/source/js/kendo.core.js"></script>
<script src="kendoui/source/js/kendo.fx.js"></script>
<script src="kendoui/source/js/kendo.model.js"></script>
<script src="kendoui/source/js/kendo.data.odata.js"></script>
<script src="kendoui/source/js/kendo.data.js"></script>
<script src="kendoui/source/js/kendo.pager.js"></script>
<script src="kendoui/source/js/kendo.sortable.js"></script>
<script src="kendoui/source/js/kendo.popup.js"></script>
<script src="kendoui/source/js/kendo.list.js"></script>
<script src="kendoui/source/js/kendo.dropdownlist.js"></script>
<script src="kendoui/source/js/kendo.calendar.js"></script>
<script src="kendoui/source/js/kendo.datepicker.js"></script>
<script src="kendoui/source/js/kendo.numerictextbox.js"></script>
<script src="kendoui/source/js/kendo.filtermenu.js"></script>
<script src="kendoui/source/js/kendo.grid.js"></script>

All the above files are there as per the path shown from the example document. The divs are set as follows (although I have used various options copied from other examples):

<div id="example" class="k-content">
            <div id="clientsDb">
                <div id="grid"></div>
</div>
    <script>

        $(document).ready(function() {
                
            var dataSource = new kendo.data.DataSource({
                transport: {
................................. etc. etc.

Any clear information on styling a grid would be helpful, thanks in advance.

Grid

asked on 18 Feb 2012

9 answers

837 views

[Solved] Remote datasources and large datasets

Does Kendo support remote data sources with the option to affect which data to retrieve? What I have in mind is e.g. using a JSON service that supports paging or some other filtering.

I don't consider manipulating the dataSource.transport.url using javascript and re-reading the remote data source a viable solution.

Data Source

answered on 18 Feb 2012

4 answers

305 views

Pass Date to Amsx Through Datasource

I am working with the datasource control and I am trying to query a webservice and need to pass a start date from a Kendo datepicker. When it is sent I get an error - Invalid JSON Primitive. Any help would be appreciated, thanks. Here is my code:

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: '/app/handlers/customers.asmx/GetTopAssignedCustomers',

dataType: "json",

data: startDate: function(){return kendo.toString(new Date(start.value()), "MM/dd/yyyy");},

contentType: 'application/json; charset=utf-8',

type:"POST"

}

},

schema: {

data:"d"

}

});

Data Source

answered on 18 Feb 2012

6 answers

1.4K+ views

[Solved] Synchronous binding to data source

I keep hitting a timing issue whereby reading the value() of the DropDownList is not correct unless the dataSource binding has been completed. How do I configure the DropDownList so that it is bound to its dataSource synchronously?

I know I can attach code to the change event, but this isn't feasible because I need to ensure all DropDownLists are populated on the page rather than just one. I tried declaring the dataSource separately and calling read() explicitly, but the dataSource is read a second time when it is bound to the DropDownList. I tried binding to the view() method as well, but this had no data.

Can you help?

Gary

DropDownList

answered on 17 Feb 2012

1 answer

227 views

Problem when dataTextField and dataValueField are the same

With the DropDownList I have found that if the dataTextfield and the dataValueField are the same field name, then the optionLabel value is not displayed.

I created a jsfiddle to demonstrate: http://jsfiddle.net/gxclarke/v9wjM/4/

Regards,
Gary

DropDownList

answered on 17 Feb 2012

3 answers

220 views

Remote Databinding does not work

Hi,
I try to bind my listview to a remote json-Datasource.
But nothing happens. No error message, but also no data render.

Maybe you can help me, finding out what's wrong with my code:

The list-view HTML Code:

<div data-role="view" id="home" data-transition="slide" data-layout="hbigLayout" data-init="mobileListViewTemplatesInit">

<h1>Gasthaus zur Wilden Ente</h1>

<ul id="custom-listview"></ul>

</div>

The Template for my elements:

<script type="text/x-kendo-template" id="customListViewTemplate">

<h3 class="item-title">${Name}</h3>

<p class="item-info">${Beschreibung}</p>

<a data-role="button" href="${Url}" class="details-link">zum Termin</a>

</script>

The Javascript Code to bind the remote json Data:

var dataSourceTermine = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: "http://www.wilde-ente.de/mobile/new/mobileHandler/Termine.ashx",

group: "Datum",

dataType: "json"

}

});

function mobileListViewTemplatesInit() {

$("#custom-listview").kendoMobileListView({

dataSource: dataSourceTermine,

template: $("#customListViewTemplate").html(),

headerTemplate: "<h2>Termine am ${value}</h2>"

});

}

The result of the json code also seems ok. You can the it

at

http://www.wilde-ente.de/mobile/new/mobileHandler/Termine.ashx

ListView (Mobile)

answered on 17 Feb 2012

1 answer

136 views

element.kendoDraggable to work as live()

Is there any way to apply .kendoDraggable to all newly created elements that match selector? Like jquery .live() works

Drag and Drop

answered on 17 Feb 2012

1 answer

219 views

[Solved] change data after loading

Hi,

Currently i'm loading data from a json file so i can fill a listview (mobile) with the data.
Is it possible to change the data? For example I have a string: "20040000 - Intern". I would like to be able to remove the first part of the string before showing the data in the listview. Would anyone know if this is possible and if so, how?

Data Source

answered on 17 Feb 2012

2 answers

374 views

Embedding a TabStrip inside a PanelBar

Hi all, first post around here. I'm trying to essentially do what the thread title suggests. Is there anything I should watch out for? I'm currently trying to do it, but the second panel hides the content of the first one when displayed; only the tabs of the first panel are visible, not the content.

Am I trying to go about this the wrong way? Here's a basic idea:

<div id="packages">

<ul id="panelBar">

<li class="k-state-active">

Package 1

<div id="package_1">

<ul>

<li class="k-state-active">Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

<div id="Item_1">Item 1</div>

<div id="Item_2">Item 2</div>

<div id="Item_3">Item 3</div>

<div id="Item_4">Item 4</div>

</div>

</li>

<li>

Package 2

<div id="package_2">

<ul>

<li class="k-state-active">Item 5</li>

<li>Item 6</li>

<li>Item 7</li>

<li>Item 8</li>

</ul>

<div id="Item_5">Item 5</div>

<div id="Item_6">Item 6</div>

<div id="Item_7">Item 7</div>

<div id="Item_8">Item 8</div>

</div>

</li>

</ul>

</div

I'd really appreciate any advice.

Edit: Ok, I tested my own example without any formatting and it worked as expected. It seems the problem is with formatting using the 960 grid system. If I apply any grid classes to the inner divs, the div disappears.

PanelBar

answered on 17 Feb 2012

1 answer

46 views

Only allowing max of 2 columns sorted

Is there a way to max out how many columns can be sorted on a grid?

Like:

sortable: {
                    mode: "multiple",
                    allowUnsort: true,
                    max : 2, //Something like this?
                },

Grid

answered on 17 Feb 2012