Questions on Kendo UI for jQuery Forum

2 answers

181 views

Suppress rescaling of value axis in chart legend click event

Hi,

is there a simple way (not setting min and max values) to suppress rescaling of value axis if one series of stacked areas is hidden via legend click?
More details: the chart calculates the min and max values for stacked areas (bars etc) perfectly. But as soon as you hide a series via click on appropriate legend item ,the max value for the axis gets recalculated, which is not always wanted.

Setting min and max values manually is difficult, because data is loaded dynamically via JSON and calculating appropriate range on Server (aggregate of all data!) and transferring data to client is - from my point of view - not a good way to go since the chart itself calculates min and max very good...

Thanks in advance
Dirk

Charts

answered on 11 Sep 2013

2 answers

88 views

Value Axis Scaling

I am using a stacked column chart to achieve an effect requested by a user. They are wanting to see a breakdown of percentages per group that is bringing them below a particular target. I am "lifting" the smaller percentages represented on the chart "up" by setting the opacity for a particular series to 0 (zero). My problem is that they want the chart scaled from 60-100% but the smaller percentages that I am "lifting up" with the hidden series are not being displayed, because their value is less than 60.

I've attached three files to show the problem I am having:

- ChartNoHide.jpg displays the hidden series that is used to lift up the smaller percentages.
- ChartHide.jpg displays the way they want it displayed except it is scaled from 0-100%
- ChartProb.jpg displays how it is displayed when the .Min is set to 60 (.Min(60))

Any help would be appreciated.

Charts

answered on 11 Sep 2013

4 answers

614 views

Treeview inside Dropdownlist

Hi,
I try to create a data source based treeview, to be opened like a dropdownlist, in the same form with other dropdownlist items and comboboxes, so I would like them to look similar.

TreeView

answered on 11 Sep 2013

0 answers

292 views

Setting a checkbox on a TreeView to a default value

Hi - I have a TreeView defined as one of a series of filters for my page. I want to be able to send in default values so that when the user first brings up the page, they have values for the chart. What I can't seem to figure out is how to set the checkbox for the value I am sending in. I can do it on my TreeViews that are radio buttons. I can also set all the checkboxes to checked, but can't find the right syntax to set just one.

I have tried a variety of syntax. gradeLevelParm is the value I am passing:
$("#gradeLevelFilterTree input[value='" + gradeLevelParm + "']").click();
$("#gradeLevelFilterTree input:checkbox"[value = gradeLevelParm]).click();
$("#gradeLevelFilterTree input:checkbox[value='" + gradeLevelParm + "']").click();

This selects all the checkboxes, when I want one specific set.
$("#gradeLevelFilterTree input:checkbox").click();

Thanks for any help!

Here is the code that I have creating the TreeView.

ktvGradeLevelFilter = $("#gradeLevelFilterTree").kendoTreeView({

dataTextField: ["text", "GradeLevelID"],

dataSource: {

transport: {

read: function (options) {

$.getJSON(Helpers.toServicesUrl("/GetfltEWSGradeLevel"),

{

username: Context.UserName,

districtId: Context.DistrictId,

// schoolType: "H"

schoolType: schoolTypeParm //ktvSchoolFilter.getSelectedSchoolType()

},

function (data) {

gradeLevelData = data.GetfltEWSGradeLevelResult.RootResults;

gradeLevelData = [{

text: "Grade Level(Counts by Risk Factor)",

items: gradeLevelData,

expanded: false

}];

options.success([]);

ktvGradeLevelFilter.dataSource.data(gradeLevelData);

}).fail(function (jqXHR) {

options.error(jqXHR);

});

}

},

schema: {

model: {

children: "items"

}

},

checkboxes: {

checkChildren: true

}

}).data("kendoTreeView");

TreeView

asked on 11 Sep 2013

3 answers

218 views

Pasting new line into an ordered Lists starts the list over.

Having an issue where I have an existing ordered list. If I try to paste a valid in the middle of it, the new value is inserted and creates a new ordered list from this point.
Need the editor to insert this new row and maintain the existing ordered list.

Editor

answered on 11 Sep 2013

3 answers

174 views

select & chart opacity

I'm using the "select" configuration of the chart (like showed in http://demos.kendoui.com/dataviz/api/selection.html)
However , I need to change the opacity of the non selected areas.
Currently , the non selected areas are hardly shown due to very low opacity levels.
What is the way to change this setting ?
In addition , how can I control the zoom slider style itself ?
Thx
Sagi Karni

Charts

answered on 11 Sep 2013

1 answer

66 views

Remote Views - Not working offline?

Hi,
My webapp is not being hosted online, it is simply a series of html/css/js files on my machine.

I am using a splitview with 2 panes, a simplified structure of the left pane can be seen below:

<div data-role="pane" id="left-pane" data-layout="side-default" data-transition="slide">

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">

</div>

<div data-role="view" id="side-view">

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

<li><a href="#testview">Commercial Services</a></li>

<li><a href="testview.html">Litigation Services</a></li>

<li><a href="views/paneviews/private_client_services/index.html">Private Client Services</a></li>

</ul>

</div>

<div data-role="view" id="testview">

<p>Test view</p>

</div>

There are 3 buttons in the UL. The first looks for a view in the current HTML document - this works fine.
The second and third look for remote files, and these do not work. The locations are correct and I have viewed page source and opened the links to check this.

When I click them nothing happens and the webapp becomes unresponsive until I refresh the page.

The contents of testview.html is as follows:

<div data-role="view" id="side-view">

<p>This is a remote view</p>

</div

It is necessary for my webapp to be hosted for this to work? Can remote files not work offline?

Thanks in advance,
Andrew.

General Discussions

answered on 11 Sep 2013

2 answers

105 views

Listview + MVVM Issue...

I am having an issue with a ListView when it is grouped or when building it using MVVM.

I can build the mobile list view not using MVVM and it grouped, and it works fine (http://jsbin.com/atiQeJo/1/edit)
But, if I build the ListView using the same data, same template, same datasource, I get a bizarre output (http://jsbin.com/EteBaPI/2/edit). The anchor tag links in the listview aren't sized properly like they are on the non-MVVM sample, it is only on the work like a regular anchor tag would work. if I remove the group in the MVVM sample, it goes back to looking/working fine (http://jsbin.com/uZowAgU/1/edit)

Ok, well while digging around the output, it appears as though if I add class="km-listview-link" to the item template in the MVVM view, it will work/look just like the non-MVVM sample (http://jsbin.com/EteBaPI/3/edit)

Guess I'll just go with that.

ListView (Mobile)

answered on 11 Sep 2013

1 answer

130 views

Open SubMenu on Click

Hi all,
I have a quick question.
It seems that when I Initialize a Menu with Open and Close on click properties to true, submenus are not affected..
Is there any way to force submenus to open on click?
Thanks
Fabio

Menu

answered on 11 Sep 2013

2 answers

259 views

Data binding with the grid not working in the case of XML datasources

Hello,
we want to use the multiselect in this context:

Grid bound to an XML datasource
Multiselect bound to an XML datasource
Data binding between Grid & multiselect for popup or inline editing

But we can't get the data binding between the grid & the multiselect to work in the case of multiple values.

For instance, when the grid data reads either

<record number="3">

    <nid>3</nid>

    <column1>row3col1</column1>

    <column2>BBBtxt,CCCtxt</column2>

    <mval>BBBval,CCCval</mval>

</record>

or

<record number="4">

<nid>4</nid>

<column1>row4col1</column1>

<column2>BBBtxt,CCCtxt</column2>

<mval>BBBval</mval>

<mval>CCCval</mval>

</record>

The multiselect always remains empty in editing mode, no data binding seems to happen between the grid & the multiselect.

But when the grid data reads:

<record number="2">

            <nid>2</nid>

            <column1>row2col1</column1>

            <column2>AAAtxt</column2>

            <mval>AAAval</mval>

        </record>

Binding between grid & multiselect works.

Could it be that there's something wrong in our datasource or multiselect definition or is there something wrong with the multiselect data binding ?

Here's the code we use:

// JavaScript Document

jQuery(document).ready(function() {

// grid

jQuery("#grid").kendoGrid({

dataSource: gridDataSource,

columns: [

{

field: "column1",

title: "Column 1",

width: "300px"

},

{

field: "column2",

title: "Column 2",

editor: multiselect_editor,

width: "300px"

},

{

command: [

{name:"edit",text:{update:"Edit",cancel:"Cancel"}},

],

width:"10%"

}

],

toolbar: [{name:"create",text:"New"}],

editable: {mode:"popup"},

sortable: true,

pageable: true,

resizable: true

});

})

//grid datasource

var gridDataSource = new kendo.data.DataSource({

type: "xml",

transport: {

read: function (options) {

jQuery.ajax( {

url: "data/griddata.asp",

type: "POST",

cache: false,

success: function(result) { options.success(result); },

error: function(e) { alert(e.responseText); },

data: {

startrow: ((options.data.pageSize*(options.data.page-1))+1),

maxrows: 50

}

});

},

update: function (options) {

alert("updated");

},

create: function (options) {

alert("created");

}

},

schema: {

type: "xml",

data: "/root/resultset/record/",

model: {

id: "nid",

fields: {

nid: "nid/text()",

column1: "column1/text()",

mval: "mval/text()",

column2: "column2/text()"

}

},

total: "/root/resultset/@size"

},

error: function(e) {

alert(e.xhr.responseText);

},

serverFiltering: true,

serverPaging: true,

serverSorting: true,

pageSize: 50

})

// multiselect for popup editor

function multiselect_editor (container, options) {

jQuery(

'<select multiple="multiple" id="multiselect_editor" data-text-field="textnode" data-value-field="valuenode" data-bind="value:mval"/>'

)

.appendTo(container)

.kendoMultiSelect ({

placeholder: "Select...",

autoBind: true,

dataTextField: "textnode",

dataValueField: "valuenode",

dataSource: {

type: "xml",

serverFiltering: true,

sort: { field: "textnode", dir: "asc" },

transport: {

read: { type: "POST", cache: false, url:"data/multiselectdata.asp"},

},

schema: {

type: "xml",

data: "/root/resultset/record",

model: {

fields: {

textnode: "textnode/text()",

valuenode: "valuenode/text()"

}

,error: function(e) {

alert(e.xhr.responseText);

}

});

}

And the data samples:

Grid data

<?xml version="1.0" encoding="utf-8"?>

<root>

    <resultset date="03/09/2013" size="3" time="10:13:50">

        <record number="1">

            <nid>1</nid>

            <column1>row1col1</column1>

            <column2></column2>

            <mval></mval>

        </record>

        <record number="2">

            <nid>2</nid>

            <column1>row2col1</column1>

            <column2>AAAtxt</column2>

            <mval>AAAval</mval>

        </record>

        <record number="3">

            <nid>3</nid>

            <column1>row3col1</column1>

            <column2>BBBtxt,CCCtxt</column2>

            <mval>BBBval,CCCval</mval>

        </record>

        <record number="4">

            <nid>4</nid>

            <column1>row4col1</column1>

            <column2>BBBtxt,CCCtxt</column2>

            <mval>BBBval</mval>

            <mval>CCCval</mval>

        </record>

    </resultset>

</root>

Multiselect data

<?xml version="1.0" encoding="utf-8"?>

<root>

    <resultset date="03/09/2013" size="5" time="10:13:50">

        <record number="1">

            <nid>1</nid>

            <valuenode>AAAval</valuenode>

            <textnode>AAAtxt</textnode>

        </record>

        <record number="2">

            <nid>2</nid>

            <valuenode>BBBval</valuenode>

            <textnode>BBBtxt</textnode>

        </record>

        <record number="3">

            <nid>3</nid>

            <valuenode>CCCval</valuenode>

            <textnode>CCCtxt</textnode>

        </record>

        <record number="4">

            <nid>4</nid>

            <valuenode>DDDval</valuenode>

            <textnode>DDDtxt</textnode>

        </record>

    </resultset>

</root>

MultiSelect

answered on 11 Sep 2013