Questions on Kendo UI for jQuery Forum

0 answers

146 views

Unbound Column

Hi,

i am new to KendoUI. So its maybe a stupid question :). But i don't find a solution.

I create remote datasource and bind it to a Listview with a template element. Like in our examples:

$("#openServiceCallsListView"

).kendoMobileListView({

	dataSource: remoteDataSource, 

	template: kendo.template($(

"#myRowTemplate"

).html())

	});

The Template looks like this:

<script type="text/x-kendo-tmpl" id="myRowTemplate"

<div>${field1} ${field2} ${field3}</div

</script>

It works and everything is fine. But now i need an unbound column which contains an image link. Something like:

"http://localhost/service/GetPicture?Model=" + encodeURIComponent(${field1} + "&Type=" + encodeURIComponent(${field2})

I don't know, can i call a javascript function in this template? Or is it possible to create a new field in the datasource?

Cu

Georg

Data Source

asked on 13 Sep 2012

1 answer

113 views

JSON datasource returns [object Error] only inside IE9

Hi,

I hava a grid and a datasource which receives data from a webservice.
The XML data I convert serverside to JSON using PHPs json_encode().
If I display these data in a Kendo grid ONly FireFox and Chrome show the data correclty inside the grid.

Internet Explorer 9 (IE 9) shows [object Error].
This message comes from my datasource:

...

error: function(e)

{

alert(e.errorThrown);

},

...

Can somebody tell me why IE9 does not accept these JSON data but other browsers do without any problem?
Is there any way to get more information what causes the error?

Thanks!

Data Source

answered on 13 Sep 2012

0 answers

121 views

CRUD sort and filter

Hello,
I have followed this example

grid-page-methods-crud

https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-page-methods-crud

Example is working fine
but when i added sort filter or paging but sort paging or filter doesn't work

what i am missing

Your feedback is appreciated

Best Regards
Wael

Grid

asked on 13 Sep 2012

2 answers

215 views

KendoDate issue with value()

Hello,

I noticed that you can set the value of the date picker using a date or a string with the proper format. If i use the date, I'm getting a different behaviour form the string, when I first put the text to the input

I have created the control with a change event option.

I'm setting the value of the control this way:

datepicker.value(new Date());

when i'm writing some invalid date in the input, the expected behaviour will be that the change event is not executed. But it's being executed.

I tested it with setting the value with a string:

datepicker.value("1/9/2011");

and the result is the expected. the event is not executed.

example:

<div id="Div6" class="k-content">
<div id="email-settings">
<div id="test" style="margin-top: -6px; margin-left: 180px">
<input id="datepicker" style="width:150px;" />
</div>
<div style="margin-top: 59px; margin-left: 180px">
<input id="monthpicker" value="10/10/2011" style="width:150px" />
</div>
</div>
<script>
$(document).ready(function () {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker({
change: function () {
// get widget
var widget = this;
alert("datepicker");
}
});
$("#monthpicker").kendoDatePicker({
change: function () {
// get widget
var widget = this;
alert("monthpicker");

}
});

var datepicker = $("#datepicker").data("kendoDatePicker");
var a = "1/9/2011";
datepicker.value(a);

var monthpicker = $("#monthpicker").data("kendoDatePicker");
var b = new Date();
monthpicker.value(b);
});
</script>

Regards

Date/Time Pickers

answered on 13 Sep 2012

2 answers

1.8K+ views

selectedIndex on kendoComboBox

Hello,

I have being working with the kendoCombobox trying to implement in our project.

I'm experencing one issue and I need a clarification.

I created a kendoCombobox, with some options. and i'm adding to it 2 events. one is the CHANGE event and the other is the SELECT event.

I notice that in the CHANGE event there is a selectedIndex propertie of the current event. (this.selectedIndex) that represents a "-1" when the item doesn't appear in the datasource and the current index when yes. I can access to the value and use it to performe some validation, but i want to know if is there any reason that this is not in the documentation? I tried to look for a selectedIndex implementation in the documentation of the comobobox, and i couldn't find anything, i only realized of this value when i have debugged with the chrome.

Thekns for your time.
Polit, Guillermo

Sungard Investran developer.

ComboBox

answered on 13 Sep 2012

1 answer

763 views

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

105 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

125 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

668 views

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

97 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