Questions on Kendo UI for jQuery Forum

1 answer

80 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

132 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

154 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

322 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.6K+ 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

305 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

4 answers

270 views

[Solved] IE 8 Upload and return error message via JSON

We currently are uploading a file and need to validate before saving it. If all validation passes we save the file and continue as normal. However if it fails we return a custom JSON object of error msgs to the client to correct. This works in IE 10 but not IE 8 (not sure about IE 9).

Little more info on what we are doing when validation fails – ASP MVC 4.
1. Set return HTTP Status code to 500 (Internal Svr Error)
2. To force IIS not to override our result set Response.TrySkipIisCustomErrors= true
3 . Return our JSON object (content-type of text/plain)

In IE 10 we get the object back in the xhr and it sees the status code of 500 and fires the error event. However in IE 8 we are getting the fakeXhr and it is determining success based on if it can parse the response as JSON. So of course it's successful and then calls the success event handler for the upload control. Now that it's fired the success event the upload control thinks all is well and updates UI/data to match.

So is there a way to:
1. Return JSON and a status code of 500 and have IE 8 see it as an error regardless of if it can parse the JSON?
2. In the success mark it really as an error (fire error event) and not have the UI/data update as if it was successful?

Any help would be greatly appreciated!
Patrick

Upload

answered on 11 Sep 2013

7 answers

551 views

[Solved] Custom create/edit form

Hello,

what is the best practises way to use custom forms for create and edit my events? I don't want use templates becouse I would like to use custom validation and dedesign of edit forms. If I call e.preventDefault() in edit function, scheduler returns error after second opening create form by double click in scheduler...

cancelEvent() function isn't too much elegant...

Any other possibilities?

Thanks David

Scheduler

answered on 11 Sep 2013

1 answer

209 views

Calling dataSource.parameterMap function from outside

Hi,

I have four multiSelects that contain hierarchical data so that level 4 item knows its parents in level3, level2, and level1 and so on.

Each of multiselects has their own remote dataSource. Everytime when a dataSource requests for items from server the parameterMap function reads selections from its "parent" multiselects and puts them as parameters to request. I also attach the multiSelect's search text as parameter to the request.

Like this way:

$("#level3-multiselect").kendoMultiSelect({

autoBind: false,

dataTextField: "name",

dataValueField: "id",

dataSource: {

serverFiltering: true,

transport: {

dataType: "jsonp",

read: baseurl: 'http://myurl'

parameterMap: function(options, operation) {

var _name = "";

if ('filter' in options && options.filter.filters.length > 0) {

_name = options.filter.filters[0].value;

}

return {

level1ids: getLevel1Ids().join(),

level2ids: getLevel2Ids().join(),

name: _name

}

},

schema: {

data: "items"

}

});

My problem is that the multiselects parameterMap function is fired only when I change the text in that particular box. In additon to that, I would also like to run parameterMap function every time when a parent-level selection changes. I know there is a 'selected' event in multiSelect widget, but how can I call parameterMap function of a multiSelects dataSource?

Olli

Data Source

answered on 11 Sep 2013

1 answer

76 views

Forms with a declared type crash on Android devices when selecting or clearing the input.

I'm having a problem with the Kendo UI mobile framework, my mobile website contains form input fields. Some have a declared type "date"or "time" and when clicking these it opens up the native selection method for this type of form. Unfortunately when "accepting"or clearing the input with this it crashes the mobile browser.

Testing was done with a Samsung Galaxy Note - Android version 4.0.3 , hope you can help with fixing this issue

General Discussions

answered on 11 Sep 2013