Questions on Kendo UI for jQuery Forum

0 answers

147 views

I was looking for a way to select multiple items in a dropdown. But I don't see it.

Actually, I might be looking for a tree or panelBar implementation. The idea is that one can open the header and there are
a list of checkboxes where the user can select or deselect different items.

[Expando Heading: Choose image types]
X PNG
- JPG
- TIFF
X BMP

etc.

DropDownList

asked on 18 Apr 2012

1 answer

296 views

Dynamic swapping of themes

I would like to give the user the ability to change the theme on the fly (like your demos). Do you have a stripped down example of how to do this? (A dropdown menu that would change the style sheet ?)

General Discussions

answered on 18 Apr 2012

1 answer

216 views

KENDO UI TEMPLATE FUNCTIONING BASIC QUESTION

When is javascript within a template executed? Is it rendered every time the data binding occurs or is it only once?

Example -

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

#if(person) {

<h1>${person.name}</h1>

}

else {

<h1>${id}</h1>

}#

</script>

<script>

var data = [{"person":{"name":"saurabh"},"id":123},{"id":123}]

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

$(document).ready(function () {

$("#listUL").kendoMobileListView({

template: $("#demoTemplate").text(),

dataSource: data

});

}

</script>

So I want to show ID field when person object is missing in the JSON data. I get following error when I run it - "person variable is missing"

How do I handle missing variables in templates? How can I check for them?

Templates

answered on 18 Apr 2012

1 answer

252 views

Expand/Collapse icons opposite of TreeView

One of my UX fellows is complaining that the expand/collapse icons on PanelBar are the opposite of those for TreeView. Meaning that TreeView shows the expanded state while PanelBar shows the future state. Anyone else think is a problem?

-Gary
Terracotta

PanelBar

answered on 18 Apr 2012

0 answers

100 views

MVVM, two DataSources, one element

Okay, this is a slightly complicated scenario, but will be common in my team's project. Basically, I want to use MVVM and the new declarative style to set up a plugin that wraps around DropDownList. Internally, the plugin uses a DataSource to populate the DropDownList with all its available options. The plugin will be used inside pages and other plugins which will also use MVVM to set its default value using another DataSource.

Now my question is, is it even possible to do this in the new declarative style? If so, then how? In particular, how do I make it so that my plugin can hookup to the outer MVVM's settings for its value?

Any help would be greatly appreciated.

MVVM

asked on 18 Apr 2012

1 answer

299 views

Sorting for a TreeView

Hi,
I am dynamically building a ul and then applying a kendoTreeView() on it everything is working prefectly fine but I am struggling to sore the tree as there is no method provided and I can't apply any logic as i am building very complicated ul.
My code as below:

function BuildTree() {

$(xmlDoc.getElementsByTagName("Item")).each(function () {

var thisItem = $(this);

var list = " "; var list1 = " ";

$(parentIDFields).each(function (index, item) {

if (thisItem.attr(item) != null && thisItem.attr(descriptionCol) != null) {

if (index == 0) {

list += "<li id=" + thisItem.attr("ID") + " onclick=sendHTML(" + thisItem.attr("ID") + ");>" + thisItem.attr(item);

list1 += "</li>";

}

else {

list += "<ul><li id=" + thisItem.attr("ID") + " onclick=sendHTML(" + thisItem.attr("ID") + ");>" + thisItem.attr(item);

list1 += "</li></ul>";

}

});

$("#treeView").append(list + "<ul><li id=" + thisItem.attr("ID") + ">" + thisItem.attr(descriptionCol) + " </li></ul>" + list1);

});

$(document).ready(function () {

$("#treeView").kendoTreeView();

});

}

can you please show any pointers towards solution.

TreeView

answered on 18 Apr 2012

0 answers

124 views

Strange UI behaviour when selecting tabs

Canceled.

TabStrip

asked on 18 Apr 2012

1 answer

340 views

[Solved] Binding combobox to a remote Rest Service.

I want to bind the combo box to a remote rest service which takes a partial name as query string parameter. Following is the code I have.

$("#combobox").kendoComboBox({

dataTextField: "Description",

dataValueField: "Code",

filter: "contains",

minLength: 3,

autoBind: false,

dataSource: {

type: "json",

serverFiltering: true,

transport: {

read: {

url: serviceUrl + "HpCodes",

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

dataType: "json",

data: {

partialName:

function () {

return $("#combobox").val();

}

});

So I was hoping when uses types in 3 chars it would emit a call to the service as <serviceUrl>/HpCodes?partialName=tes
but it doesn't seem to be doing that instead it sends the following request
GET <serviceUrl>/HpCodes?partialName=&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=Description&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=contains&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=tes HTTP/1.1
This looks like a oData query annd in my wcf service the partialName is empty string.

Another thing I noticed was that even though I set the minLength to 3 if I click the drop down button with out entering anything the the input area it still calls the service.

ComboBox

answered on 18 Apr 2012

0 answers

155 views

Pie Chart is not Showing full

Below Pie Chart i trying do with Custom data. But its not Showing

var d= jQuery.parseJSON('[{"XAXIS":"HERMES","COUNT":"51"},{"XAXIS":"J R T CUMBUM","COUNT":"69"},{"XAXIS":"Krishnamoorthy","COUNT":"70"},{"XAXIS":"RED BUS","COUNT":"150"}]');
$("#ChartDiv").kendoChart({
        legend: {
            visible:true,
            position:"right"
        },
        seriesDefault: {
              type: "pie"
       },
       dataSource:{data:d},
       series: [{
                field:"COUNT",
                type: "pie",
                categoryField:"XAXIS",
                labels:{
                  visible: true,
                  template:"${value}"
                }
              }],
      tooltip:
      {
        visible:true,
        template:"<div style='white-space: normal; max-width: 120px;'>${category} - ${value}</div>"
      },
      categoryAxis:{field: "XAXIS"}
});

<div id="ChartDiv" style="width: 900px; height: 500px; display: inline-block;">
</div>

Charts

asked on 18 Apr 2012

1 answer

290 views

Server paging and ListView's loadMore

In odata __next is specified to let the datasource know how to request more results. I'm using hand rolled json and my listview isn't showing the loadmore button. What do I need to do to let it know it should request the same URL but increment the page number?

var ds = new kendo.data.DataSource({

transport: {

read: {

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

dataType: "jsonp",

data: {

format: 'html'

}

},

parameterMap: function(options) {

if (options.filter && options.filter.filters.length > 0)

return {