Questions on Kendo UI for jQuery Forum

1 answer

811 views

[Solved] Handling Id's / Primary Keys in Grid

Hi

I'mcurrently evaluating the Kendo UI

I load some data from a data service and show the data in the grid.

I have a custom column definition in which i don't show the primary key.

But how can I access the primary key in the change event ?
I can't find something like this in the samples

Can someone help ?
Below my jscript code

$(document).ready(function () {
        var apiUrl = '@(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Inbox" }))';

        $("#inboxGrid").kendoGrid({
            change:onSelectionChanged,
            dataSource:
                {
                    transport: { read: apiUrl },
                },
            columns: [
                { title: "SentDate", field: "SentDate", filterable: true, sortable: true, format: "{0:dd.MM.yy}" },
                { title: "Subject", field: "Subject", filterable: true, sortable:false}
            ],
        });
    });

Grid

answered on 13 Sep 2012

1 answer

123 views

Grid does not show up in IE9

Hi,

I have a simple grid example:

<!doctype html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="/css/kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="/css/kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="/css/intranet.css" rel="stylesheet" type="text/css" />

<script src="/js/kendo/js/jquery.min.js" type="text/javascript"></script>

<script src="/js/kendo/js/kendo.web.min.js" type="text/javascript"></script>

</head>

<body>

<div id="grid">

</div>

<ul id="items"></ul>

</body>

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

<li class="items">

<span>#= itemno #</span>

<span>#= description #</span>

<span>#= unitprice #</span>

</li>

</script>

<script type="text/javascript">

$(

function()

{

function onChange() {

$("#items").html(kendo.render(template, this.view()));

}

// create a template using the above definition

var template = kendo.template($("#template").html());

var rawData = {"items":{"myItem":[{"No":"001A","Description":"1A Item","UnitPrice":"17.10"},{"No":"002B","Description":"2B Item","UnitPrice":"7.20"}]}};

var dsXMLoData = new kendo.data.DataSource (

{

type: "json",

data: rawData,

schema:

{

data: "items.myItem",

model: {

id: "No",

fields: { No: {editable: false, type: "string"},

Description: {editable: false, type: "string"},

UnitPrice: {editable: false, type: "number"}

}

},

error: function(e)

{

alert(e.errorThrown);

},

change: function()

{

//alert(this.data());

}

});

dsXMLoData.read();

$("#grid").kendoGrid(

{

dataSource: dsXMLoData,

columns: [{title: "Artikel Nr.", field: "No"},

{title: "Beschreibung", field: "Description"},

{title: "VK-Preis", field: "UnitPrice", width: "80px", format: "{0:N2}"}],

scrollable: true,

sortable: {

mode: "multiple",

unsort: true

},

selectable: "multiple, row"

});

}

);

</script>

</html>

This simple grid shows up correctly in FireFox and Chrome.
Unfortunately the Internet Explorer 9 (IE 9) shows only a blank white page :-(

What I am missing?

Thanks!

Grid

answered on 13 Sep 2012

1 answer

148 views

Drop event not fired when using jquery 1.8.0

This was driving me nuts; I've been using Kendo drag-and-drop for close to a year now, and I was building a new site with the latest builds (jQuery, jQuery UI, Kendo). I just couldn't get the drop event fired when dropping a kendoDraggable into a kendoDroptarget.

I even disabled all other Javascript to test. No luck.

I finally started pointing the script links to previous versions, and found that when I changed jquery-1.8.0.min.js to jquery-1.7.2.min.js (or jquery-1.7.1.min.js), it worked.

I've also verified the same thing happens with jquery-1.8.1.min.js. In fact, I have trouble with events firing at all with that version.

Just FYI.

Drag and Drop

answered on 13 Sep 2012

4 answers

716 views

[Solved] Switch does not fire "change" event to correspondent <input>

Hi again!
For me it is an issue, if switch widget should "replace" checkbox on my iPad, it should also fire "changed" event.
Fiddle:
http://jsfiddle.net/GewUa/14/

Switch (Mobile)

answered on 13 Sep 2012

1 answer

127 views

Extracting code to .js file datasource transport read noch triggered

Hi after I extracted my code from a asp.mvc site to an explicit js file
the grid doesn't load the data.

The grid is executed and the script runs, but it seems like the grid never triggers the read function

Am I doing something wrong?
here my js code

integration of the js file
<script src="~/Scripts/Domain/Inbox.js"></script>

Js File itself:
/// <reference path="../Kendo/kendo.all-vsdoc.js" />
function onSelectionChanged(e) {
    var selected = this.select();

    selected.data("Subject");
    $('#memo').append(selected.field);

}

$(document).ready(function () {
    var apiUrl = '@(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "nbox" }))';

    $("#inboxGrid").kendoGrid({
        dataSource:
            {
                transport: { read: apiUrl },
                pageSize: 10
            },
        columns: [
            { title: "Sendedatum", field: "SentDate", filterable: true, sortable: true, format: "{0:dd.MM.yy}" },
            { title: "Subject", field: "Subject", filterable: true, sortable: false }
        ],

    });

});

Grid

answered on 13 Sep 2012

1 answer

142 views

Cascading dropdown example

Hello,

I am trying to port cascading dropdown from WebUi samples i.e. Make/Model to mobile and having hard time to do simple binding (local or remote) to <select /> element with form.
What am I doing wrong? Good example would be appreciated.

General Discussions

answered on 13 Sep 2012

0 answers

160 views

How to scroll down listView

Hi All,

I have some Buttons on the left side and a scrollable listView on the right. Every Button belongs to an element in the listView.
For example button3 belongs to element number 12:
var element = $("#scrollbar_kendo").data().kendoListView.element.children()[12];

My question is: How can i scroll down the listView to display the element number 12?

Is that possible?

Thanks
Sebastian

ListView

asked on 13 Sep 2012

3 answers

1.0K+ views

Autocomplete JSON Response

Hey there,

I was wondering if you can explain to me why I get the following error:

"d.name is undefined"

JS:
$(function () {
    $("#id_purchase_place").kendoAutoComplete({
        minLength:3,
        dataTextField:'name',
        dataSource:{
            serverPaging:true,
            pageSize:20,
            contentType:'application/json; charset=utf-8',
            type:'GET',
            dataType:'json',
            transport:{
                read:'/purchases/ajaxpurchase_place/'
            }
        }
    })
});

JSON RESPONSE

[{"name": "Woolies"}, {"name": "Bunnings"}]

AutoComplete

answered on 13 Sep 2012

0 answers

143 views

Where are my parents? (Passing context data to a file upload)

I have many KendoFile controls that are dynamically created using a loop. They all work, and upload files. But for each one I need to know their unique ID (which I pass back to the handler). However when the upload event fires I can't seem to traverse to find parents.

So the way I get the ID now is to register a click event, and put the val into a global variable. This works for normal uploads. But it all fails for drag and drop.

First I write one upload control per round

<asp:Repeater ID="Repeater1" runat="server">

<ItemTemplate>

<div class="roundSectionHeader">

<span class="uploadwrapper" data-roundid="<%# Eval("ID") %>">

<input type="file" ID="LayoutUpload<%# Eval("ID") %>" class="kendoFileLayout" />

</span>

</div>

</ItemTemplate>

</asp:Repeater>

Then I wire it up.

$(".kendoFileLayout").kendoUpload({

async: {

saveUrl: "../Handlers/UploadPDF.ashx",

removeUrl: "../Handlers/RemovePDF.ashx",

autoUpload: true

},

success: onSuccessLayout,

upload: function onUploadLayout(e) {

e.data = { jobid: pageValues.jobId, jobroundid: layoutRoundId, fullname: globalValues.fullName };

}

});

But to get layoutRoundId I wire a click event

$(".uploadwrapper").click(function () {

layoutRoundId = $(this).data("roundid");

});

This works, but I cannot get a good event for the drop event. Also once I am inside the kendoUpload event I seem to lose context and cannot reference parents or siblings

Upload

asked on 12 Sep 2012

0 answers

133 views

Bubble Chart: sizeField not working when data is grouped

I have a bubble chart shown below. It works ok, except the sizeField is not sizing appropriately. If I remove the grouping, the sizeField will work correctly, but I will not see the data grouped how I would like it. (Comment out the "group:" section to see difference).

Is this a bug or a problem in my code?

<script>

var Productivity = [

{

perHour: 1100,

score: 5.25,

units: 49610,

area: "Territory 31",

year: 2012

},

{

perHour: 800,

score: 8.53,

units: 304197,

area: "Territory 32",

year: 2012

},

{

perHour: 965,

score: 8.62,

units: 13403,

area: "Territory 33",

year: 2012

},

{

perHour: 785,

score: 7.97,

units: 125007,

area: "Territory 34",

year: 2012

},

{

perHour: 690,

score: 8.04,

units: 137459,

area: "Territory 36",

year: 2012

},

{

perHour: 1050,

score: 7.9,

units: 214197,

area: "Territory 42",

year: 2012

},

{

perHour: 705,

score: 5.2,

units: 95403,

area: "Territory 43",

year: 2012

},

{

perHour: 1190,

score: 9.8,

units: 425007,

area: "Territory 44",

year: 2012

},

{

perHour: 250,

score: 4.5,

units: 189592,

area: "Territory 46",

year: 2012

}

];

function createChart() {

$("#chart").kendoChart({

dataSource: {

data: Productivity

,group: {

field: "area"

}

},

series: [{

name: "Accuracy vs. Productivity",

type: "bubble",

xField: "perHour",

yField: "score",

sizeField: "units"

}]

,tooltip: {

visible: true,

format: "{2:N0} units",

opacity: 1

}

});

}

$(document).ready(function() {

setTimeout(function() {

// Initialize the chart with a delay to make sure

// the initial animation is visible

createChart();

$("#example").bind("kendo:skinChange", function(e) {

createChart();

});

}, 400);

});

</script>

Charts

asked on 12 Sep 2012