Questions on Kendo UI for jQuery Forum

1 answer

84 views

Turn off a widget

Is there a way to turn off a widget once it has been applied?

So if I have a case like:

$(this).kendoGrid(...)

I need to turn it off for a certain case. Is that possible?

General Discussions

answered on 27 Apr 2012

0 answers

99 views

Where is the upload sample in the download

Hi, I'm new to kendo and I downloaded kendo web and found no upload example on the examples/index.html. Where can I find it please? Thanks.

Update: Got it working, though still didn't see it as part of the examples folder. Thanks.

Upload

asked on 26 Apr 2012

6 answers

308 views

Grid DataSource question

Hello,

I'm currently trying to create a variable that will be used as a grid DataSource. When I create a typeless variable, this is working perfectly.... however, if I cast my variable as a kendo.data.DataSource, the grid doesn't work anymore.

Here's my code:

var myDataSource = {

schema: {

model: {

id: "RecordID",

fields: {

RecordID: { editable: false, nullable: true },

FirstName: { editable: true },

LastName: { editable: true }

}

},

type: "odata",

serverPaging: true,

serverSorting: true,

pageSize: 100,

batch: false,

transport: {

read: "http://localhost:1625/Data/GetPatients",

create: { url: "http://localhost:1625/Data/Create", contentType: "application/json; charset=utf-8", type: "POST" },

update: { url: "http://localhost:1625/Data/Update", contentType: "application/json; charset=utf-8", type: "POST" },

destroy: { url: "http://localhost:1625/Data/Destroy", contentType: "application/json; charset=utf-8", type: "POST", dataType: "json" },

parameterMap: function (data, operation) {

if (operation !== "read") {

return kendo.stringify(data);

} else {

return kendo.data.transports["odata"].parameterMap(data, operation);

}

};

var myDataSource2 = new kendo.data.DataSource({

schema: {

model: {

id: "RecordID",

fields: {

RecordID: { editable: false, nullable: true },

FirstName: { editable: true },

LastName: { editable: true }

}

},

type: "odata",

serverPaging: true,

serverSorting: true,

pageSize: 100,

batch: false,

transport: {

read: "http://localhost:1625/Data/GetPatients",

create: { url: "http://localhost:1625/Data/Create", contentType: "application/json; charset=utf-8", type: "POST" },

update: { url: "http://localhost:1625/Data/Update", contentType: "application/json; charset=utf-8", type: "POST" },

destroy: { url: "http://localhost:1625/Data/Destroy", contentType: "application/json; charset=utf-8", type: "POST", dataType: "json" },

parameterMap: function (data, operation) {

if (operation !== "read") {

return kendo.stringify(data);

} else {

return kendo.data.transports["odata"].parameterMap(data, operation);

}

});

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: myDataSource, //This is working but if you change it to myDataSource2, then it doesn't work

height: 500,

scrollable: {

virtual: true

},

editable: true,

sortable: true,

toolbar: ["create", "save"],

columns: ["RecordID", "FirstName", "LastName", { command: "destroy"}]

});

As mentionned in the code, myDataSource is working but not myDataSource2.

Am I missing something here?

Best regards,

Simon

Grid

answered on 26 Apr 2012

5 answers

298 views

Issues adding a row using the API

$("#shortList").kendoGrid({

height: 400,

columns: [{

field: "name",

title: "Name"

}],

dataSource: {

data: [

{

name: "Test"

}]

}

});

then I get this exception when trying to add a row using API later:
TypeError: 'undefined' is not an object (evaluating 'this._set.indexOf')

$("#shortList").data("kendoGrid").addRow();

Using the latest commercial version of your software. How do I add a row using API?

Grid

answered on 26 Apr 2012

1 answer

103 views

Problem with grid.select when Grouping a Column

Hello,

I have a grid that when an item is selected, it changes an image based on the selected data item.

The code firing on the change event is as follows:

function showSelectedImage() {

var grid = $("#grid").data("kendoGrid");

//var data = grid.dataItem(grid.select());

grid.select().each(function () {

var data = grid.dataItem($(this));

if (null != data) {

$("#documentPreview").attr("src", data.ImageUrl);

$("#documentPreview").attr("alt", data.DocumentId);

$("#documentView").attr("src", data.ImageUrl);

$("#documentView").attr("alt", data.DocumentId);

$("#openImageHyperLink").attr("href", data.ImageUrl);

if ($("#documentPreview").is(":hidden")) {

$('#documentPreview').slideDown("slow", "easein", null);

}

if (null != data.ExtraPageUrls) {

buildPager(data.ExtraPageUrls);

}

});

}

This code works fine on an un-grouped grid. However, when grouping is enabled, when you click an item in the second group, the data item return is the next one in the list, rather than the current one. If you click the preceding group footer, you get the data item for the first item in the next group.

It is as if the group footer is bound to a data item, messing up the sequence......

E.G:

SUPPLIER NAME GROUP HEADER
DATA 1
DATA 2
SUPPLIER NAME GROUP FOOTER
DATA 3
DATA 4

-----

Clicking Data 3 row returns DATA 4 data item.

Clicking SUPPLIER NAME GROUP FOOTER returns DATA 3 Data Item

HELP!!!!!

Grid

answered on 26 Apr 2012

2 answers

89 views

Editable grid bug?

I am using a grid that has inline editing enabled. If it Edit the grid, but then hit cancel instead of update, it caused the row to be removed.

I have reproduced this in the following JSFiddle: http://jsfiddle.net/sFaUp/1/
If you hit edit, then cancel, the row gets removed.

This seems like a bug to me, however its possible I have something configured incorrectly. Could I receive some help with this?

Thanks!

Grid

answered on 26 Apr 2012

0 answers

190 views

data source needed in initialisation for html table?

Hi guys
This is no doubt an incredibly stupid question and I'll probably not be able to articulate it properly, but here goes...

I'm trying to integrate kendo web ui into an aspx page that returns data in an html table at runtime. I have no control over any datasource, I can only return data into an html table, data surrounded by tr and td tags when the page loads, obviously I'm hoping kendo can add sorting, pagination and filtering. I can get a basic sort but pagesize and height etc don't work. I'm not sure whether I should be calling a datasource at some point within the initialisation (though the sort works without)

I can build a basic html table

<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody>

add then add in the report which returns all the data within TR and TD tags

and then use the basic initialisation like so..

<script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
});
            </script>

and it returns one very long sortable table (my sample data is hundreds of rows) with the page number 1 in the footer

what do I need to add to get a smaller size and split the data into multiple pages ?

sample data:


<script src="kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>
<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody><<tr ><td class="">Course 1</td><td class="">BN1BANI/2FD</td><td class="">Course</td></tr><tr ><td class="">Sport 2yr FT Day</td><td class="">KN1ICTW/2FD</td><td class="">Course</td></tr><tr ><td class="">Chemistry Non-cert </td><td class="">KNCBRCH/1FD</td><td class="">Course</td></tr><tr ><td class="">Physics Non-cert 1yr FT Day</td><td class="">KNCBRPH/1FD</td><td class="">Course</td></tr></tbody>
</table><script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
});
            </script>

forgive me this once for the rambling post - I'm probably a million miles away from what the problem really is and have not learned all of the terminology yet

Grid

asked on 26 Apr 2012

5 answers

1.0K+ views

Conditionally visible custom command?

Is it possible to have custom commands that are only rendered if some property in the data row is set?

I thought of data looking something like this:

[

{name:"Olivia", email:"olivia@olivia.com", showContactInfo: 1 },

{name:"Michael", email:"michael@yahoo.com",showContactInfo: 0},

{name:"Peterl", email:"pe@ter.com",showContactInfo: 0}

]

The idea is that you could:

if (showContactInfo) // make the custom command visible for this row

Another way to go could be a detail template, which was only accessible for some rows depending on the condition?

/Thomas

Grid

answered on 26 Apr 2012

1 answer

91 views

Grid / Hierarchy Or Detail template grid grouping does not work for child grid

Hi Guys,

I have a Grid with a detail template that contains a child grid; groupable is set to true for both girds.

When I try grouping a column in the child grid, it will only allow me to drag it to the parent gird grouping area.

Is this a know issue? I have attached a screen shot to show you what is happening.

Grid

answered on 26 Apr 2012

2 answers

203 views

Constrain dragging to the x or y axis

Hi all

Is it possible to constrain dragging to a particular x or y axis? Or, failing that, constrain it to a particular region? From the demo I can see that the drop area can be constrained, but it's the actual dragging (or its visualization) that I want to limit to a particular axis...

Thanks
G

Drag and Drop

answered on 26 Apr 2012