Questions on Kendo UI for jQuery Forum

2 answers

709 views

[Solved] Basic data source config with remote json data

Hi
I am trying to make a basic datasource integration and populate a grid with data.
My RST service delivers JSON in this format

{"country":[

{"codeLong":"AUT","codeShort":"AT","name":"Austria"},

{"codeLong":"BEL","codeShort":"BE","name":"Belgium"},

{"codeLong":"BGR","codeShort":"BG","name":"Bulgaria"}

]}

This is how I try to setup the datasource and Grid:

var ds = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost:10040/.functions.portlets/services-rest/countriesservice/countriesuk",

dataType: "json"

}

},

schema: {

data: "country",

model: {

fields: {

codeLong: { type: "string" },

codeShort: { type: "string" },

name: { type: "string" }

}

});

$("#grid").kendoGrid({

dataSource: ds,

height: 280,

scrollable: {

virtual: true

},

columns: [

{ field:"codeLong", title: "codeLong" },

{ field:"codeShort", title: "codeShort" },

{ field:"name", title: "name" },

]

});

I can see the GET request being carried out in FireBug, but the Grid remains empty.
Any suggestions?

I have one further question:
Is it possible to omit the data parameter, and leave out the "root" element?
I would like to be able to read json like this:

[{"codeLong":"AUT","codeShort":"AT","name":"Austria"},

{"codeLong":"BEL","codeShort":"BE","name":"Belgium"},

{"codeLong":"BGR","codeShort":"BG","name":"Bulgaria"}]

/Thomas

Data Source

answered on 19 Apr 2012

2 answers

357 views

Problem binding JSON data with Kendo Pie Chart

Hi,
I have a problem in binding JSON data with Kendo Pie Chart.
I have data source where I have supplied the url of my service with method name, that is getting me the data from server. I can see the data is returning from the server when I paste that url in my firefox browser. I am also supplying the field name to the grid but not getting my chart displayed. It works fine when i supply hard coded array to it.
Could please anyone help me? Following is the code

    <div id= "kendoChart" style="width:50%; float:right; height:450px; margin-top:-20"></div>
    <script type="text/javascript">
        //var rtData = [3, 15, 30, 45, 92];
        var chartDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/DomainService/ContactedChartDomainService.svc/json/GetContactedChartViews",
                    dataType: "json"
                },
                schema:
                        {
                            data: "GetContactedChartViewsResult.RootResults"
                        }
            }
                });

        $(function () {
            $("#kendoChart").kendoChart({
                dataSource: chartDataSource,
                title: { text: "Stats" },
                seriesDefault: {
                    type: "pie"
                },
                series: [
                {
                    field: "Occurances",
                    categoryField: "ContactedName"
                    //type: "pie"
                }],

                tooltip: {
                    visible: true
                }
            });
        });
    </script>
    </div>

my JSON out put is as follow
{"GetContactedChartViewsResult":{"TotalCount":3,"RootResults":[
{"ContactedID":1,"ContactedName":"No","Occurances":5},
{"ContactedID":2,"ContactedName":"Under Consideration","Occurances":1},
{"ContactedID":3,"ContactedName":"Follow Up","Occurances":11}]}}

Kind Regards,
Waseem

Charts

answered on 19 Apr 2012

0 answers

117 views

Pre-selected files

Hi,

I'm just wondering on the best way of doing this. I have a scenario where I need to go back into a screen and edit details in which a file has been uploaded using a Kendo Uploader. Now, obviously upon editing this, the file needs to be displayed (and the remove icon showed) when the user goes back to the screen.

Is there a way of telling the Uploader to pre-load files (I'm guessing using file name + id) so I can achieve my goal here?

Any help would be greatly appreciated.

Upload

asked on 19 Apr 2012

0 answers

120 views

Update row data based on other rows

What I want to achieve is, while having a grid with one of the columns named "Priority" set to integer, is whenever I change that row value to update all the "priority" values in the other rows to match the new change. Can this be done on key press or loose focus?

example:
having:

3,
1,
2,

If i change the value 1 to 2: the values should update to:

3,
2,
1

Thanks

Grid

asked on 19 Apr 2012

6 answers

143 views

Splitter dragging bug in the latest release (2012.1.322)

If you take a look at the following jsfiddle (using KendoUI 2011.3.1129)
http://jsfiddle.net/xjLYs/3/

If you drag the right splitter then it lines up properly with your mouse.

A second jsfiddle (using 2012.1.322)
http://jsfiddle.net/JfwNk/2/

If you drag the right splitter it does NOT line up with your mouse (it is offset to the left).

I have tried both Chrome and IE9.

Could I get any help with a fix for this?

Splitter

answered on 19 Apr 2012

7 answers

895 views

MVVM source binding to DataSource

Hi,

I'm trying to bridge 2 samples from your demo library:

http://demos.kendoui.com/web/mvvm/source.html

and

http://demos.kendoui.com/web/mvvm/remote-binding.html

Basically, I want to use source binding on a template (as in the source and template binding sample), but instead of using static data I want to use a DataSource (as in the Remote binding sample).

So, following your code, I came up with this:

<ul id="list" data-template="ul-template" data-bind="source: theView"></ul>

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

<li>

id: <span data-bind="text: ID"></span>

name: <span data-bind="text: Name"></span>

</li>

</script>

var a = kendo.observable({

theList: new kendo.data.DataSource({

transport: {

read: "/api/building"

},

change: function () {

a.theView = this.view();

kendo.bind($("#list"), a);

},

schema: {

model: {

id: "ID",

fields: {

ID: {

editable: false,

nullable: false

},

Name: {

editable: true,

nullable: true

}

}),

theView: {}

});

var app = Sammy('#main', function () {

// define a 'get' route that will be triggered at '#/path'

this.get('#/path', function () {

a.theList.read();

});

//default route, routes back to #/path

this.get('', function () { this.app.runRoute('get', '#/path') });

});

$(document).ready(function () {

//starts sammy

app.run();

});

This will only work if I set the "source" binding on the template to "theView", but not if I set it to "theList", so this leads me to ask if I should be able to bind directly to a DataSource object with the source binding ?

In the Remote binding sample, you set the source binding of the select element directly to the modeview's DataSource, but this doesn't seem to work for list elements.

Am I doing something wrong, or maybe missing something ?

Thanks

MVVM

answered on 19 Apr 2012

0 answers

209 views

Column headers width in percentages

Hi,

I had a 4 panels in 2 of the panels i had kendo grid. I had a maximise and minimise functionality for the panels.So i had to give the width in percentages (some thing like 48%). and the width and the height calculation is based upon the window height and the width. So can i give the width of the kendo grid in percentages as well as the column widths in percentages...

Grid

asked on 19 Apr 2012

5 answers

265 views

Have problems implemeting draggable list box items in IE & Chrome - Works well in FireFox

Hello,

I am trying to implement a scenario of swapping values between the list boxes using the drag & drop feature. A snap shot of what's to be done is displayed in the attachment "Task.jpg"

The Drag & Drop feature works perfectly fine in Firefox, but doesn’t works at all in Chrome & IE (7 & 8).

The key aspects here are:

In Chrome and IE9, Items in ListBox1 and ListBox2 are not getting selected by mouse, but can be selected using the tab keys. In this case even the swapping works the items are selected
Also observed a weird behavior in IE 7 & 8. It works first in IE & then stops working. Once we minimize & restore the IE browser it again starts working.
The written code works perfectly fine in Firefox.

To further provide you the details on the implementation, the created code is added to jsFiddle at the location http://jsfiddle.net/ravisingh/5B6mq/1/ . Also attached with the post are the images of Chrome & Firefox while debugging the issue.

Thanks & Regards,

Manoj Kapoor

Drag and Drop

answered on 19 Apr 2012

6 answers

565 views

How to refresh listView with Template

The below function reads from a specific URL and loads the contents into myDiv using a template and listView. The function works perfect the first time. How can I force the view to refresh with new data each time the function runs (the function is triggered externally)?

function loadNewFeed(url) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
dataType: "json"
}
}

});
$('#myDiv').kendoListView({
dataSource: dataSource,
template: kendo.template($("#reviewsTemplate").html())
});

};

Templates

answered on 19 Apr 2012

1 answer

225 views

multiple select for kendo mobile

how to use multiple select in kendo mobile

General Discussions

answered on 19 Apr 2012