Questions on Kendo UI for jQuery Forum

1 answer

304 views

Hi there,

Just wanted to let you know that I think I found a bug that the grid footer does not scroll horizontally like the header does. Here's an example http://jsfiddle.net/mtrichards26/zCZGF/6/

Here's what I did locally to make this work (in the grid's _footer and _wrapFooter functions, changes preceded with //CHANGE)

_footer: function() {

var that = this,

aggregates = that.dataSource.aggregates(),

html = "",

footerTemplate = that.footerTemplate,

options = that.options;

if (footerTemplate) {

html = $(that._wrapFooter(footerTemplate(aggregates || {})));

if (that.footer) {

var tmp = html;

that.footer.replaceWith(tmp);

that.footer = tmp;

} else {

if (options.scrollable) {

that.footer = options.pageable ? html.insertBefore(that.wrapper.children("div.k-grid-pager")) : html.appendTo(that.wrapper);

//CHANGE: Have scroll event move .k-grid-footer-wrap

var scrollables = that.footer.children('.k-grid-footer-wrap');

that.content.bind('scroll', function () {

scrollables.scrollLeft(this.scrollLeft);

});

} else {

that.footer = html.insertBefore(that.tbody);

}

},

_wrapFooter: function(footerRow) {

var that = this,

html = "",

columns = that.columns,

idx,

length,

groups = that.dataSource.group().length,

column;

if (that.options.scrollable) {

//CHANGE: Add extra div with .k-grid-footer-wrap

html = $('<div class="k-grid-footer"><div class="k-grid-footer-wrap"><table cellspacing="0"><tbody>' + footerRow + '</tbody></table></div></div>');

that._appendCols(html.find("table"));

return html;

}

return '<tfoot>' + footerRow + '</tfoot>';

},

Also, I thought I posted this yesterday but didn't see it today so if its a duplicate please feel free to delete this post.

Thanks,
Matt

Grid

answered on 05 Apr 2012

1 answer

117 views

Gauge Range Titles

Is there an easy way to specify a label to a range?

I only see the ability to specify a label for the scale itself.

LinearGauge

answered on 05 Apr 2012

0 answers

328 views

Select multiple in treeview

The treeview allows only a single node selection. Has anyone figured out how to configure treeview so that multiple nodes can be selected ? I want to avoid checkboxes at every node.

The multiple selection is actually multiple nodes but in different branches. When a node is selected and any ancestor was previously selected, then the ancestor should be deselected.

TreeView

asked on 05 Apr 2012

2 answers

484 views

Filtering on more than one data field

Hi,

I am using the autocomplete widget to suggest employee lookups based on a WCF web service that return JSONP data.

The WCF service is being called fine using server filtering and returns data to a DataSource attached to the autocomplete.

The problem is that I would like to be able to show item template matches based on more than one column value in the data source. e.g. If there is an employee named John Smith, I should be able to type 'John' or 'Smith' into the autocomplete input box and have it show an entry.

The WCF service is returning the JSON data records OK, but the autocomplete still only filters on whichever column I put in dataTextField so I can have dataTextField:"FirstName" or dataTextField: "LastName" but not both?

Is there way I can configure the autocomplete to match both fields?

Here's the code I am using for reference:

$(document).ready(function () {

$("#autoComplete").kendoAutoComplete({

minLength: 2,

dataTextField: "LastName",

dataValueField: "NetworkId",

template: '<img src=""> <h3> ${data.LastName} ${data.FirstName} </h3> ${data.Office}',

dataSource: new kendo.data.DataSource({

severFiltering: true,

serverPaging: true,

transport: {

read: {

// the remote service URL

url: "http://localhost:8080/EmployeeService.svc/employees?callback=?",

// JSONP is required for cross-domain AJAX

dataType: "jsonp",

// additional parameters sent to the remote service

data: {

filter: function () {

return $("#autoComplete").data("kendoAutoComplete").value();

}

}),

change: function () {

this.dataSource.read();

}

})

});

Thanks,

Dan.

AutoComplete

answered on 05 Apr 2012

1 answer

121 views

Specifing width or height freezes browser

Not sure if this is a bug, or if I am doing something wrong. Comment out the 'height' line below and all is fine. Leave it in place and the browser never renders the page. Tried Chrome and Firefox.

$(document).ready(function () {
         $("#mtdSales").kendoRadialGauge({
            gaugeArea: {
               background: "green",
               border: {
                  color: "black",
                  width: "1"
               },
               height: "200px" //// <--- Here's the issue
            },
 
            pointer: {
               value: 324436.84,
               color: "#CECEFF"
            },
 
            scale: {
               minorUnit: 50000,
               majorUnit: 50000,
               startAngle: -30,
               endAngle: 210,
               max: 500000,
               labels: {
                  position: "inside",
                  color: "white"
               },
               ranges: [
                                {
                                   from: 0,
                                   to: 250000,
                                   color: "#CECEF0"
                                }, {
                                   from: 250000,
                                   to: 375000,
                                   color: "#c20000"
                                }, {
                                   from: 375000,
                                   to: 450000,
                                   color: "#ffc700"
                                }, {
                                   from: 450000,
                                   to: 500000,
                                   color: "#006400"
                                }
                            ]
            }
         });
      });

LinearGauge

answered on 05 Apr 2012

2 answers

123 views

Phonegap Native and Kendo Suite Compatibility

Hi,

I am sorry if this has been clearly stated, but have looked and cannot quite see it.

If I want to compile my app to run as native on IOS and Android using phonegap (and not run it remotely from a web site), which parts of the Kendo Suite can I use?

Is it just the Kendo mobile functionality? Or can I use other widgets from the other parts of the suite?

Many Thanks
Matt

General Discussions

answered on 05 Apr 2012

2 answers

281 views

How to get access to a switch in a listview template

Hi,

Loving Kendo so far! sure this is an easy one ...

I am creating a grouped list view with a switch in it as follows -

$("#listview").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
                template: '${name} <input checked="${live}" type="checkbox" data-role="switch" data-align="right" />',
                headerTemplate: "<h2>Letter ${value}</h2>"
});

This all loads fine, and I can set the checked state on load :)

BUT I want to access the created switches so I can bind to the change event and in turn store the users choice when they flick the switch?

Sadly, I am not sure how I can access the auto-generated template switch objects (or any object for that matter) for use in js?

Thanks
Matt

Switch (Mobile)

answered on 05 Apr 2012

0 answers

139 views

DataSource.query results in TypeError

I've got the following code that works well for initial load. Once I execute .query I receive "Uncaught TypeError: Cannot read property '0' of undefined". Kendo UI Mobile v2012.1.322

Am I using .query improperly?

Datasource/bind/sample data:

var ds = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost:3000/api/anagram",

dataType: "jsonp",

data: {

format: 'html',

rack: '---'

}

},

group: 'length',

pageSize: $('#pageSize').val(),

page: $('#page').val(),

sort: {field: 'word', dir: 'asc'},

schema: {

data: 'words',

total: 'count',

model: {

fields: {

length: {

type: 'number'

},

word: {

type: 'string'

},

wordFormat: {

type: 'string'

}

//serverFiltering: true,

//filter: { field: 'rack', operator: 'eq', value: 'ab-' },

//serverSorting: false,

});

function resultsBind() {

console.log('Fetching...');

ds.fetch(function(){

console.log('Actually fetched');

console.log(ds.total());

console.log(ds.totalPages());

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

dataSource: ds,

template: "#= wordFormat #",

headerTemplate: "${value} Letters"

});

$('.prefix').html(ds.total() + ' words found');

});

$('#apply').click(function(){

var p = $('#page').val();

var ps = $('#pageSize').val();

ds.query({ page: p, pageSize: ps });

});

}

{"words":[{"length":3,"word":"azo","wordFormat":"<em>a</em>zo"},{"length":2,"word":"bo","wordFormat":"<em>b</em>o"},{"length":3,"word":"coz","wordFormat":"<em>c</em>oz"},{"length":2,"word":"do","wordFormat":"<em>d</em>o"},{"length":2,"word":"go","wordFormat":"<em>g</em>o"},{"length":2,"word":"ho","wordFormat":"<em>h</em>o"},{"length":2,"word":"jo","wordFormat":"<em>j</em>o"},{"length":2,"word":"lo","wordFormat":"<em>l</em>o"},{"length":2,"word":"mo","wordFormat":"<em>m</em>o"},{"length":2,"word":"no","wordFormat":"<em>n</em>o"},{"length":2,"word":"od","wordFormat":"o<em>d</em>"},{"length":2,"word":"oe","wordFormat":"o<em>e</em>"},{"length":2,"word":"of","wordFormat":"o<em>f</em>"},{"length":2,"word":"oh","wordFormat":"o<em>h</em>"},{"length":2,"word":"oi","wordFormat":"o<em>i</em>"},{"length":2,"word":"om","wordFormat":"o<em>m</em>"},{"length":2,"word":"on","wordFormat":"o<em>n</em>"},{"length":2,"word":"op","wordFormat":"o<em>p</em>"},{"length":2,"word":"or","wordFormat":"o<em>r</em>"},{"length":2,"word":"os","wordFormat":"o<em>s</em>"},{"length":2,"word":"ow","wordFormat":"o<em>w</em>"},{"length":2,"word":"ox","wordFormat":"o<em>x</em>"},{"length":2,"word":"oy","wordFormat":"o<em>y</em>"},{"length":2,"word":"so","wordFormat":"<em>s</em>o"},{"length":2,"word":"to","wordFormat":"<em>t</em>o"},{"length":2,"word":"wo","wordFormat":"<em>w</em>o"},{"length":2,"word":"yo","wordFormat":"<em>y</em>o"},{"length":2,"word":"za","wordFormat":"z<em>a</em>"},{"length":3,"word":"zoa","wordFormat":"zo<em>a</em>"},{"length":3,"word":"zoo","wordFormat":"zo<em>o</em>"}],"count":30,"input":"zo?"}

Data Source

asked on 05 Apr 2012

1 answer

115 views

Having trouble getting grid to populate from data source

I have a grid that I want populated from a JSON callback. I also want pop-up editing. I see the callback occur to retrieve the data, but the grid isn't populated with it.

Here's a sample of the JSON result:

[{"AddedOn":"\/Date(1333241309627-0400)\/","Batch":"20120331-A","Comment":"Sample","User":"paulm"}]

I see the grid appear, and I get the button to add a new item (and the pop-up appears).
Secondary question: How do I control which fields are displayed in the pop-up? I don't see a list of options available for each field in the help (are they documented someplace?).

$(function () {

var dataSource = new kendo.data.DataSource({

type: 'jsonp',

transport: {

read: {

url: '/api/BatchApi/GetOpenBatchList',

dataType: 'jsonp'

},

update: {

url: '/api/BatchApi/Update',

dataType: 'jsonp'

},