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

How get column header in a row selected type grid?

1 Answer 324 Views

Grid

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

Gy asked on 23 Jan 2012, 02:53 AM

Hi,

Here is my code:

<!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>

I'm looking to get the column header data in a java var and get a condition on the window.data("kendoWindow").open();. Any clue?
If you see some easier way or mistakes, i'm beginning in such coding. So, waiting for your remarks.

1 Answer, 1 is accepted

answered on 26 Jan 2012, 06:42 AM

Problem solved like this:

That's for the remote window, calling a php file with pickdater inside:

var window = $("#window");

var windesc = $("#windesc");

$(".pop").click(function(){

var caseid = $(this).attr("id");

window.data("kendoWindow").refresh('date.php?'+caseid);

window.data("kendoWindow").center();

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

});

window.kendoWindow({

width: "45%",

title: "Pick a date",

modal: true,

visible: false

});

The html page got a

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

Then the grid is builted with MySQL calls:

<script>

function createData() { // mysql extraction

var data = [];

<?php

$mysql_serveur = "localhost";

$mysql_pseudo = "root";

$mysql_pass = "";

$mysql_bdd = "cmms";

$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 job 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="<div id='date=".$row['NUM']."' class='pop'>Select</div>"; //".$row['NUM']."

}

if($row['DESC']<>"") {$des="<div id='desc=".$row['NUM']."' class='desc' ti=".$row['DEP'].">Description</div>";} else{$des="";}

$sub = substr($row['DEP'],0,2);

echo 'data.push({

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

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

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

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

DES: "'.$des.'",

START: "'.$start.'",

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

});';

}

?>

return data;

}

</SCRIPT>

And the grid:

$("#grid").kendoGrid({

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

height: 360,

toolbar: ["save", "cancel"],

editable: true,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

selectable: "row",

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:'#=DES#'},

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

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

{width: 30,title: "Completed",template:'<div id="comp=#=ID#" class="pop">Select</div>'}]

});

Thread closed.