Questions on Kendo UI for jQuery Forum

1 answer

76 views

Customize texts

Hello

I want to customize the texts of kendo grid. How can I make this?:

Toolbar:
- Save Changes (save)
- Cancel changes (cancel)

Commands:
- Delete (destroy). When I try to delete a row it appears a modal box that asks me if I really want to delete it ("Are you sure you want to delete this record?"), I'd like to change it too.

Is there any easy way to change it?

Thanks a lot.

Grid

answered on 18 Jan 2012

1 answer

152 views

Window in grid

Hi everyone,

Just discovered the Kendo UI. Awsome!
I'm trying to add a button to open a window with datepicker on a grid and it seems to be tricky...
The datepicker should then update a SQL database but i will check through odata later.

Here is the first code:
*edit: here is my try with the window code:

<head>

<title>Test</title>

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

<link href="styles/kendo.silver.css" rel="stylesheet"/>

<link href="styles/common.css" rel="stylesheet"/>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.core.min.js"></script>

<script src="js/kendo.fx.min.js">//Menu</script>

<script src="js/kendo.popup.min.js"></script>

<script src="js/kendo.menu.min.js"></script>

<script src="js/kendo.data.min.js">//Grid</script>

<script src="js/kendo.pager.min.js"></script>

<script src="js/kendo.sortable.min.js"></script>

<script src="js/kendo.draganddrop.min.js"></script>

<script src="js/kendo.groupable.min.js"></script>

<script src="js/kendo.grid.min.js"></script>

<script src="js/kendo.resizable.min.js">//Windows</script>

<script src="js/kendo.window.min.js"></script>

</head>

<body>

<div id="main">

<?php include("menu.php"); ?>

<div id="content">

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

</div>

<script>

function createData() {

var data = [];

<?php

$mysql_serveur = "localhost";

$mysql_pseudo = "root";

$mysql_pass = "";

$mysql_bdd = "test";

$connexion = mysql_pconnect($mysql_serveur,$mysql_pseudo,$mysql_pass) or die("Erreur1");

if(!$connexion ) die("Erreur2");

if(!mysql_select_db($mysql_bdd)) die("Erreur3");

$sql = "SELECT * FROM table ORDER BY DUE";

$req = mysql_query($sql);

$datejour=date("Y-m-d");

$djour = explode("-", $datejour);

while ($row = mysql_fetch_assoc($req)){

$dfin = explode("-", $row['DUE']);

if($dfin<$djour){

if($row['START']<>0) {$start=$row['START'];} else{

$start="<span id='date' class='".$row['NUM']."'>Select</span>";

}

if($row['DESC']<>"") {$des="Description";} else{$des="";}

echo 'data.push({

ID: "'.$row['NUM'].'",

NOM: "'.$row['NOM'].'",

DEP: "'.$row['DEP'].'",

DUE: "'.$row['DUE'].'",

DES: "'.$des.'",

START: "'.$start.'",

COMP: "'.$row['DONE'].'"

});';

}

?>

return data;

}

</script>

<script>

$(document).ready(function() {

$("#menu").kendoMenu();

var getEffects = function () {

return ($("#opacity")[0].checked ? "fadeIn" : "");

};

var initMenu = function () {

$("#menu").kendoMenu({

animation: { open: { effects: getEffects() } },

hoverDelay: 2

})

};

$("#grid").kendoGrid({

dataSource: {data: createData(),pageSize: 20},

height: 360,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

columns: [

{field: "NOM", width: 150, title: "Name" },

{field: "DEP",width: 40,title: "Depth"},

{field: "DES",width: 30,title: "Description",template:'<a href="description.php?des=#=ID#">#=DES#</a>'},

{field: "DUE",width: 30,title: "Due date"},

{width: 50,title: "Started",template:'#=START#'},

{width: 30,title: "Completed",template:'<a href="maj.php?comp=#=ID#">Select</a>'}

]

});

initMenu();

</script>

<script>

$(document).ready(function() {

var window = $("#window"),

date = $("#date")

.bind("click", function() {

window.date("kendoWindow").open();

});

if (!window.data("kendoWindow")) {

window.kendoWindow({

width: "500px",

title: "Pick a date",

actions: ["Refresh", "Close"],

content: 'ajaxContent.html',

open: onOpen,

activate: onActivate,

close: onClose,

deactivate: onDeactivate,

resize: onResize,

dragend: onDragEnd,

refresh: onRefresh

});

}

});

</script>

<div id="window"></div>

</div>

</body>

Where are the mistakes?

Charts

answered on 18 Jan 2012

4 answers

256 views

Question about iframe

// line 822

if (options.content && !isLocalUrl(options.content)) {

contentHtml.html(templates.iframe(options));

}

I think it's worth to give the programmer to decide on the insertiframe. It may be helpful:)

Window

answered on 18 Jan 2012

1 answer

306 views

How to do drag and drop with selected rows in a grid?

I have a selectable grid and I want to be able to drag the selected row into a drop target.

I tried attaching kendoDraggable on all the grid rows to make all the rows draggle something like this:

$("#grid tr").kendoDraggable({
hint: function() {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
},
dragstart: function() { console.log("drag start");},
dragend: function() {console.log("drag end");}
});

Unfortunately, this doesn't work. What I am doing wrong?

Grid

answered on 17 Jan 2012

2 answers

547 views

Shared DataSource - each UI element seems to read?

I have a shared DataSouce that I wish to bind to multiple UI elements (dropdown and chart).

The DataSource has a change event so I can intercept the data.

What I observe is that EACH UI element seems to cause the DataSource to execute rather than the first one only.

Here is some code to illustrate :-

var metaDataSource

;

function createPieChart() {

$("#pie").kendoChart({

dataSource: metaDataSource,

title: {

text: "Total XDC Hits"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "pie",

labels: {

visible: "true",

template: "#= kendo.format('{0:P}', percentage)#"

}

},

series:

[{

field: "TotalHits",

categoryField: "Name"

}],

chartArea: {

height: 300,

margin: 1

},

plotArea: {

margin: 1

}

});

}

function createList() {

$("#list").kendoDropDownList({

index: 0,

dataSource : metaDataSource,

dataTextField: "Name",

dataValueField: "ID",

change: onSelectXDC

});

}

function onSelectXDC() {

var dl=$("#list").data("kendoDropDownList");

var txt = dl.text();

var val = dl.value();

log(kendo.format("Select XDC :: {0} {1}", txt, val ));

}

function OnListXDC(e) {

var view = metaDataSource.view();

log(kendo.format("ds listxdc, #rows={0}",view.length));

$(view).each(function() {

log(kendo.format("ID={0}, Name={1}, Hits={2}",this.ID,this.Name,this.TotalHits));

});

}

$(document).ready(function(){

metaDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/metrics/listxdc",

data: {

json: "true",

simu: "true"

}

},

schema: {

model: {

fields: {

ID: { type: "number" },

Name: { type: "string" },

Path: { type: "string" },

TotalHits: { type: "number" }

}

},

change: OnListXDC

});

createList();

createPieChart();

});

I define the DataSource and then call createList to use this with a dropdown. This works and I see the change event for the DataSource as expected.

Next, I call createPieChart to use the same DataSource BUT I get another change on the DataSource and another network call is made?

I wish for there to be a single network call and for the results to be bound to the two UI elements until I call .read() on the DataSource to trigger an update.

Can you please take a look and see if I am doing something wrong here?

Data Source

answered on 17 Jan 2012

3 answers

373 views

Handle AJAX request

Hello,

When I have any kind of error my JSON response is like:

{ error: true, message: "Error caused ....", date: "date ... " },

When I make an AJAX conn by myself I can check whether there has been any error or not, but how can I check it when kendoGrid makes a connection to "Save data"?

Thanks.

Grid

answered on 17 Jan 2012

5 answers

168 views

Filter Trouble

This doesn't seem to return anything (Should show Jane), am I using Filters incorrectly?

var stuff = [

{

FirstName: "Joe",

LastName: "Smith"

},

{

FirstName: "Jane",

LastName: "Smith"

}];

var ds = new kendo.data.DataSource({data: stuff});

$("#grid").kendoGrid({

columns:[

{

field: "FirstName",

title: "First Name"

},

{

field: "LastName",

title: "Last Name"

}],

dataSource: ds.filter([{ field: "FirstName", operator: "neq", value: "Joe" }])

});

Data Source

answered on 17 Jan 2012

2 answers

709 views

How do we increase the dropdownlist items font

how to increase dropdownlist items font size

DropDownList

answered on 17 Jan 2012

3 answers

219 views

Is there a way to reset the URL of a datasource

Hi

I'm using a datasource to populate a grid. When the page loads for the first time I set the URL variable to the datasource. How can I change the URL of the datasource after it was created? The url changes when the user clicks on several items in the page and I don't want to use data property to send parameters to the url (the url changes and the parameters also).

If I initialize the datasource in every click I have strange behaviour. I've read in the forum that it's not advisable to do that

Thanks for your attention

Data Source