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();