Questions on Kendo UI for jQuery Forum

1 answer

96 views

Strange binding

Hello,

i'd like using data-binding attribute into a template but the data object that's bound to an html tag is not correctly associated.

for exemple:
Simple binding: http://jsfiddle.net/rKQDM/7/
More complex (expressions & events): http://jsfiddle.net/rKQDM/5/

What's wrong?

Thanks in advance.

Templates

answered on 10 Jun 2012

0 answers

100 views

No manager for DataSource?

When looking through the code, I don't see a manager class for DataSource instances (or a simple master list), which I need to add KednoUI support to Illuminations for Developers[1]. I can add a patcher that alters the KendoUI source as it's loaded on every site that uses it (I do this for YUI3), but I'd rather not do that as it can be dangerous.

I have the same issue with widgets, but I can use the somewhat slow method of searching through all of jQuery's internal 'data' structures to find KendoUI widgets that are rendered to the page.

Any suggestion on how to get all the instantiated DataSource instances on a given web page?

[1] http://www.illuminations-for-developers.com/

Data Source

asked on 10 Jun 2012

0 answers

127 views

Tweaking the implicit template

When a grid does not have a rowTemplate specified the kendoGrid configuration the component will build an implicit default template.

I have a situation where the grid is displaying columns A,B,C,D from a data source having A,B,C,D,X,Y,Z and I need to twiddling an entire row when some condition exists amongst X, Y and Z.

The real problem is more involved in this manner and involves a Database view V on the server and XML data responses.

dataSource1 fetches column names from metadata of V
dataSource2 fetches data from V
grid displays some columns of dataSource2 (A,B,C,D) and needs to set css of row based on X,Y,Z

dataSource1.

each column name is used to setup the filelds: property of dataSource2 schema:model
fields[this.name] = this.name+'/text()';

dataSource2.

every column in V will be available

grid

the actual columns displayed can be controlled by the user by typing in a list of regex's such as
^store ^city ^state ^zip mgr
A routine guess() will take the input and find matching column names (case-insensitve). This makes using a static template difficult.

The grid setup is thus:

$("#stores").kendoGrid({

dataSource: dataSource,

autoBind: false,

selectable: "multiple",

groupable: true,

resizable: true,

reorderable: true,

columns: guess('^store ^city ^state ^zip'),

dataBound: function (e) {

$(e.sender.wrapper).find('[data-row-is-special=true]').addClass('my-row-is-special');

}

});

The only piece remaining is how do I set data element 'row-is-special' when I am not using a custom template.

The solution I chose was to tweak grid in the following manner:

Add a new property named "onCloseImplicitRowTag" to the templateSettings: property of the grid configuration
and use it my grid configuration:
templateSettings: { onCloseImplicitRowTag: '# if (X && X != Z && Y && Y > 0) {# data-row-is-special="true" #}#' }

If everything is functioning properly the grids implicit <TR will get a data-row-is-special=true and databound will convert that info into a class setting that has the desired display attributes (bold, italic, white on red)

The kendo.grid.js _tmpl: was modified as follows:

In the "if (!rowTemplate)" section just prior to

rowTemplate += ">";<br>

this was added

var option = settings.onCloseImplicitRowTag;

if (option) {

type = typeof option;

if (type === STRING) {

rowTemplate += ' ' + option;

}

Hope this is helpful and the concept gets rolled into a future version

Regards,
Richard

Grid

asked on 10 Jun 2012

2 answers

100 views

XML data, one field has two possible xml constructs.

I have some XML data that is constructed differently when the server detects a missing value

<STORES>

...

<CITY>Chattanooga</CITY>

...

</STORES>

<STORES>

...

<CITY missing=" " />

...

</STORES>

In the first and normal case my schema model defintion works fine

model: {

fields: {

...

, city: "CITY/text()"

...

}

In the second case when the server sends missing=" ", the grid shows [object Object] instead of a null or blank value.

Is there a single specifier I can use for city: so that I get either #text or @missing ?

Thanks,
Richard

Data Source

answered on 10 Jun 2012

1 answer

143 views

create ,destroy through php

Hello,
i have problem with create ,destroy through php
i use POST,PUT and doesn't work

<div id="grid"></div>

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

<div class="tabstrip">

<ul>

<li class="k-state-active">

Ville

</li>

<li>

Détail Pays

</li>

</ul>

<div>

<div class="frs"></div>

</div>

<div>

<div class='frs-details'>

<ul>

<li><label>Libelle:</label>#= libelle #</li>

<li><label>Code:</label>#= code #</li>

</ul>

</div>

</script>

<script>

$(document).ready(function() {

var element = $("#grid").kendoGrid({

dataSource: {

pageSize:6,

height: 450,

sortable: true,

pageable: true,

selectable: "row",

resizable: true,

filterable: true,

serverPaging: true,

type: "json",

transport: {

read:{

url: "fic.php?fic=pays",

dataType: "json",

},

update: {

url: "fic.php?fic=up_pays",

type: "POST"

},

create: {

url: "fic.php?fic=add_pays",

type: "PUT"

},

destroy: {

url: "fic.php?fic=des_pays",

dataType: "json",

Type: "POST"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

error: function(e) {

alert(e.responseText);

},

schema: {

model: {

id: "IDpays",

fields: {

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

libelle: { validation: { required: true } },

code: { validation: { required: false} }

}

},

detailTemplate: kendo.template($("#tab_frs").html()),

detailInit: detailInit,

dataBound: function() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

toolbar: ["create"],

columns: [{title: "ID", field: "IDpays" },{ field: "libelle" },{ field: "code" },

{ command: ["edit", "destroy"], title: " ", width: "210px" }],

editable: "popup"

});

function detailInit(e) {

var detailRow = e.detailRow;

detailRow.find(".tabstrip").kendoTabStrip({

animation: {

open: { effects: "fadeIn" }

}

});

detailRow.find(".frs").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "fic.php?fic=ville"

},

pageSize:6,

filter: { field: "IDpays", operator: "eq", value: e.data.IDpays }

},

scrollable: false,

sortable: true,

pageable: true,

selectable: "row",

resizable: true,

change: function() {

document.getElementById("A1").value=this.dataItem(this.select()).IDContact;

},

columns: [

{ field: "IDville",title:"ID", width: 70 },

{ field: "libelle", width: 100 },]

});

}

</script>

Grid

answered on 10 Jun 2012

1 answer

527 views

how to empty the datasource contents

I am doing a cache based grid application and what i want to do is feed the datasource with the cached data if that request is cached and then refresh the widgets. I have tried several things including the desperate loop all data and remove() but that doesn't work because for some reason i only removes certain elements. Any ideas on this?

Data Source

answered on 10 Jun 2012

2 answers

132 views

Reorder-able list view?

If I have a list view, I want users to be able to drag and drop to re-order things. Has anyone done this? This is one of two critical features that are missing and I need to address before recommending KendoUI.

ListView

answered on 10 Jun 2012

0 answers

97 views

Doesn't work for me

I have been wrestling with this all day. I can't get it to work. The only thing I get when I do the example using a datepicker is a an empty textbox.

Does anyone have any advice? I'm using VS2010 and did the common install and used Telerik MVC 3 to create the project.

General Discussions

asked on 09 Jun 2012

0 answers

425 views

Example: Treeview load on demand - append to selected node

Greetings,
After spending a great deal of time trying to get this to work, I finally found a simple solution. Call the tree.append and pass the new item and current node as a jquery object.

treeview.append({ text: "new item text" }, $(e.node))

here is a simple sample on jsfiddle... http://jsfiddle.net/jldoubleu/BSUFs/1/

Also, the sample code.

var treeview = null

$(document).ready(function() {

treeview = $("#tree").kendoTreeView({

select: onItemSelected,

dataSource: [{text: "A"},{text: "B"},{text: "C"},{text: "D"}]

}).data("kendoTreeView");

function onItemSelected(e) {

for (var ictr = 0; ictr < 5; ictr++) {

treeview.append({ text: e.node.innerText + "-" + ictr}, $(e.node))

}

});

Enjoy...

TreeView

asked on 09 Jun 2012

0 answers

147 views

serverPaging not work in my project..

Hey.. I wanna ask about serverPaging. I use it to do server side paging on my grid. I've set the pageSize to 10 and serverPaging to true in datasource object. I've also set pageable to true in my grid. But when i click the page (below the grid), it always select all the data and display all of them..

If i remove serverPaging(set to false), the paging is working but on client side only. In server side, it select all the data..

I use ASP.NET MVC 3 with SQL Server 2008.. Please Help me.. I'll give screenshot of the code and firebug.

Please help me.. Thanks and regards...!!! ^_^

Data Source

asked on 09 Jun 2012