or
<!doctype html>
<
html
>
<
head
>
<
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.selectable.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
>
<
script
src
=
"js/kendo.calendar.min.js"
>//Datepicker</
script
>
<
script
src
=
"js/kendo.datepicker.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<?
php
include("menu.php"); ?>
<
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
})
};
});
</
script
>
<
div
id
=
"content"
>
<
div
id
=
"grid"
></
div
>
</
div
>
<
script
>
function createData() { // mysql extraction
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
=
'undo'
class
=
''
>Select</
span
>"; //".$row['NUM']."
}
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;
}
//////////////////////////
$(document).ready(function() {
///////////////////////////////////////////////////////////////////////Table
$("#grid").kendoGrid({
dataSource: {data: createData(),pageSize: 20},
height: 360,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",
change: onChange,
columns: [
{field: "ID", width: 15, title: "Code" },
{field: "NOM", width: 150, title: "Name" },
{field: "DEP",width: 40,title: "Department"},
{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#"
>Completed</
a
>'}]
});
//////////////////////////////////////////////////////////////////////////Select
var window = $("#window");
function onChange(arg) {
var Date = $.map(this.select(), function(item) {
var temp= $(item).text();
if(temp.indexOf('Select')!=-1) {
return temp.substring(0,temp.indexOf('#'));
}
else {}
});
window.data("kendoWindow").refresh('date.php?date='+Date);
window.data("kendoWindow").center();
window.data("kendoWindow").open();
}
window.kendoWindow({
width: "45%",
title: "Pick a date",
modal: true,
visible: false
});
});
</
script
>
<
div
id
=
"window"
></
div
>
</
div
>
</
br
></
br
>
</
div
>
</
body
>
</
html
>
window.data("kendoWindow").open();
. Any clue?dataSource.add({ name:
"first"
});
dataSource.sync();
dataSource.add({ name:
"second"
});
dataSource.sync();