Questions on Kendo UI for jQuery Forum

6 answers

309 views

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

307 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

105 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

96 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

195 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

93 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

206 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

0 answers

143 views

DatePicker validates differently w/o value

I have the following code in my page:

<div id="myform">

<input type="date" id="myDate" name="myDate" data-date-msg="Invalid date" data-bind="value: myField" />

<br />

<button id="show" type="button">Show selected</button>

<button id="clear" type="button">Clear</button>

</div>

<script>

$(document).ready(function ()

{

var model = kendo.observable({ myField: new Date() });

$("#myDate").kendoDatePicker();

kendo.bind($("#myDate"), model);

var validatable = $("#myform").kendoValidator().data("kendoValidator");

$("#show").click(function ()

{

if (validatable.validate())

{

alert('Selected: ' + model.get("myField"));

}

});

$("#clear").click(function ()

{

model.set('myField', null);

});

</script>

Test cases:
1. Reload page, click "Clear", enter "abc" and click "Show selected" - it correctly displays the "Invalid date" and no alert is fired.
2. Reload page, enter "abc" in the DatePicker and click "Show selected" - it validates as true and shows an alert dialog.

Is there a way to make case 2 work the same as 1?

Validation

asked on 26 Apr 2012

1 answer

80 views

How to use KendoUI 'Grid DataTable' for mobile ?

hi,

Iam trying to use Grid DataTable on mobile app.But iam not able to display the table on my page.

Can u say any way to do this with example please...

Thanks,
Nandeeswar

Grid

answered on 26 Apr 2012