This is a migrated thread and some comments may be shown as answers.

Window in grid

1 Answer 147 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Gy asked on 17 Jan 2012, 07:48 AM

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?

Window in grid

1 Answer, 1 is accepted