Questions on Kendo UI for jQuery Forum

4 answers

674 views

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

335 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

242 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

228 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

81 views

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

139 views

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

156 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

339 views

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

9 answers

2.7K+ views

[Solved] Grid without total count

I have a grid that is currently server bound and pageable showing data read from a database. I've noticed that if there is a lot of data and the underlying query is complicated rendering the page can take a long time. Getting the actual rows is not too bad as it just gets the first 20 (or a single page). The time consuming part is getting the count of rows.

I would be happy not to know the total number of rows or even the number of pages. So I've tried turning off Info and Numeric paging options, but the count is still being calculated.

I've tried switching to a virtual scrolling grid as this seems to be Kendo's recommended approach for large datasets, but it seems this also performs a count so that it knows how big a scrollbar to show.

Is there any way to use the kendo grid without performing a count on the total number of items?

Grid

answered on 11 Sep 2013

2 answers

315 views

Datasource Read loses params with paging

Hello,
I'm using a kendo.data.Datasource with serverPaging and ServerSorting options in an MVVM implementation.
This datasource is roughly defined like this:



var MyDatasource = new kendo.data.DataSource({
  type: 'odata' /* for odata style IQueryable web api */
  serverPaging: true,
  serverSorting: true,
  pageSize: 15,
  transport: {
      read: {
          dataType: "json",
          url: "mywebapi/mydata"
})

The DataSource is used by a Kendo grid with scrollable: { virtual: true }.
A user has the ability to search for data where the searchparam is set on my viewmodel.
within my viewmodel i simply call "MyDatasource.read({ searchvalue: userparam })" to get the data from my web-api which works perfectly.

However, in combination with paging the parameter is lost when reading the next page.

Is there any way to preserve that param so it gets send with the next pages as well ?

Thanks in advance.

Data Source

answered on 11 Sep 2013