Questions on Kendo UI for jQuery Forum

0 answers

226 views

viewModel not updating on checkbox selection

Hi

We are working with the Kendo UI and are quite new to MVVM. We were trying out the following scenario and came across an issue which is as below.

We have a checkbox list on our page along with 2 listboxes (say listbox1 and listbox2).

The checkboxlist is a consolidated list of all the items from both the ListBoxes. Initially when no items are checked on the checkboxlist, all the items appear on the listbox1. The items when checked on the checkboxlist should move to listbox2 and should be removed from listbox1.

There is also a textbox and button ['Add Item'] using which we can add values to listbox1 (correspondingly these will appear as unchecked on the checkboxlist).

The problem:

The viewModel does not get refreshed on the check and uncheck events of the checkboxes. Because of this, the listboxes do not get updated with their respective items.
However the viewModel refreshes the listboxes when a new item is added using the textbox and 'Add Item' button.

Please follow the JSFiddle link for code reference: http://jsfiddle.net/umeshkrishna/eqWK2/9/

I am also attaching screen- shots as aides.

Looking forward to a speedy reply.

Thanks
Umesh

MVVM

asked on 05 Apr 2012

0 answers

162 views

Open hierarchy on Select

This is not so much a question as it is a quick tip to help those with similar needs.

I want to open a row's detail simply by clicking a selection, as opposed to having to click on the arrow cell. As part of the kendoGrid initialization, I added the following code:

, change : function() {

var grid = this;

grid.select().each(function() {

grid.collapseRow(grid.tbody.find("tr.k-master-row"));

grid.expandRow(grid.tbody.find("tr.k-state-selected"));

});

}

This will first close all open detail rows, then open the one you've selected.

Grid

asked on 05 Apr 2012

1 answer

199 views

Grid Loses Selection on Sort

Hi,

The grid loses the selection (highlighting) on sorting, is there any way to retain the selection on sort or default selection to first row after sort is done?

J

Grid

answered on 05 Apr 2012

1 answer

332 views

Grid Footer does not scroll

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

133 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

352 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

509 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

146 views

[Solved] 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

139 views

[Solved] 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

297 views

[Solved] 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