Ajax Event Calendar Support Product Page
link calendar to datagrid
Asked 11 Oct 2012 21:45:51
1
has this question
11 Oct 2012 21:45:51 phil vouers posted:
I have ajax event cal and ajax datagrid on the same page. I want to click on an event and have it display the event in datagrid. I have my recordset setup with mysql but can't figure how to pass the event to datagrid My id column for the recordset id eventID.Normally I would append ?ID=<recordset ID> to the link going to the data grid??
I'm sure it is with a behavior but need some examples for guidance
Thanks
Phil
Replies
Replied 12 Oct 2012 11:45:21
12 Oct 2012 11:45:21 Teodor Kuduschiev replied:
Hello Phil,
You should Use the filter Datagrid behavior.
Use ##id## to pass the event id and filter the column containing the IDs in your Datagrid.
You should Use the filter Datagrid behavior.
Use ##id## to pass the event id and filter the column containing the IDs in your Datagrid.
Replied 12 Oct 2012 18:12:41
12 Oct 2012 18:12:41 phil vouers replied:
I did that to no avail.. I have now set up test page you can look at.
test.goochweb.com
also when you click a link it refreshes and opens a new browser tab???
If I hard link by doing test.goochweb.com/index.php?eventID=2 it works they way it should
thanks
Phil
test.goochweb.com
also when you click a link it refreshes and opens a new browser tab???
If I hard link by doing test.goochweb.com/index.php?eventID=2 it works they way it should
thanks
Phil
Replied 12 Oct 2012 19:05:06
12 Oct 2012 19:05:06 Teodor Kuduschiev replied:
Hello Phil,
Please remove the links from the events.
Please remove the links from the events.
Replied 12 Oct 2012 19:10:24
12 Oct 2012 19:10:24 phil vouers replied:
Do you mean the links checkbox?? If so I did and now nothing happens?
It's back now with the box checked
It's back now with the box checked
Replied 12 Oct 2012 19:21:15
12 Oct 2012 19:21:15 Teodor Kuduschiev replied:
Yes i mean to turn the links off - they need to be disabled as the datagrid is on the same page.
Replied 12 Oct 2012 19:26:54
12 Oct 2012 19:26:54 phil vouers replied:
ok.. closer I can see the datagrid search for data bu none shows yet
Replied 12 Oct 2012 19:32:03
12 Oct 2012 19:32:03 Teodor Kuduschiev replied:
Please email me your php page:
Replied 12 Oct 2012 19:32:33
12 Oct 2012 19:32:33 phil vouers replied:
here is my datagrid filter
test.goochweb.com/myevent.jpg
test.goochweb.com/myevent.jpg
Replied 12 Oct 2012 19:34:02
12 Oct 2012 19:34:02 Teodor Kuduschiev replied:
403 Permission Denied
You do not have permission for this request /myevent.jpg
Please email me your php page so i can check your code.
You do not have permission for this request /myevent.jpg
Please email me your php page so i can check your code.
Replied 12 Oct 2012 19:39:34
12 Oct 2012 19:39:34 phil vouers replied:
your send email isn't working but I added an image of the datagrid filer to the page now
Replied 12 Oct 2012 19:44:00
12 Oct 2012 19:44:00 phil vouers replied:
here is the hard way code of the page
========================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="p7qc/p7qc.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="Styles/dmx_ajaxcalendar.css" />
<link rel="stylesheet" type="text/css" href="Styles/dmxAjaxCalendar/apple_dark/apple_dark.css" />
<link rel="stylesheet" type="text/css" href="Styles/dmxGrid/dmxgrid/dmxgrid.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmx_events_calendar.js"></script>
<script type="text/javascript" src="ScriptLibrary/jquery.jsonp-1.1.1.min.js"></script>
<script type="text/javascript" src="ScriptLibrary/flexigrid.pack.js"></script>
<script type="text/JavaScript">
<!--
function controlAjaxDataGrid(scope, id, action) {//v1.3
var j = window.$ || null, scope = scope || document;
if (scope != document && scope.document) {
j = scope.$ || null;
scope = scope.document;
}
if (!j) return;
var tgt = scope.getElementById(id);
if (tgt && tgt.grid) {
switch (action) {
case 'reload' :j('#' + id, scope).flexReload();break;
case 'goToPage' :tgt.grid.changePage(arguments[3] || '');break;
case 'setFilter':
if (arguments[3] && arguments[3] == 'custom') {
j('#' + id, scope).setFilter(
arguments[4] || '',
arguments[5] || '',
arguments[6] || ''
);
} else if (arguments[3] && arguments[3] == 'form') {
j('#' + id, scope).setFilter(
arguments[4] || '',
arguments[5] || '',
arguments[6] ? $(arguments[6]).val() : ''
);
}
break;
}
}
}
//-->
</script>
<script type="text/javascript" src="ScriptLibrary/calendar_translation_en.js"></script>
</head>
<body>
<table width="98%" border="0" cellspacing="2" cellpadding="5">
<tr>
<td width="89%">
<div class="dmx_ajax_event_calendar apple_dark" id="dmxAjaxCalendar1" style="width:800px;"></div>
<script type="text/javascript">
// <
.dmxAjaxCalendar(
{"id": "dmxAjaxCalendar1", "legend_position": "none", "ajax_feeds": [{"url": "calendar_ajax/calendar_get_events2.php"}], "onEventClick": "controlAjaxDataGrid(document, \'dmx_grid1\', \'setFilter\', \'custom\', \'eventID\', \'=\', \'##id##\');"}
);
}
);
// ]]>
</script></td>
<td width="11%">
<p>
<div class="dmxgrid">
<script type="text/javascript" language="javascript">
<!--
$(function(){$('#dmx_grid1').flexigrid({
url: "ajax_servers/dmx_grid1.php",
sortname: "startdt",
dataType: "json",
rpOptions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
width: 350,
sortorder: "DESC",
colModel: [{
display: "eventID",
name: "eventID",
width: 20,
sortable: true,
align: "left",
hide: true
},
{
display: "startdt",
name: "startdt",
width: 30,
sortable: true,
align: "center",
hide: false
},
{
display: "descrip",
name: "descrip",
width: 300,
sortable: true,
align: "left",
hide: false
}]
});});
//-->
</script>
<table id="dmx_grid1"><tr><td></td></tr></table>
</div>
</p>
<p><img src="myevent.jpg" width="245" height="82" /> </p></td>
</tr>
</table>
</body>
</html>
=================================================
========================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="p7qc/p7qc.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="Styles/dmx_ajaxcalendar.css" />
<link rel="stylesheet" type="text/css" href="Styles/dmxAjaxCalendar/apple_dark/apple_dark.css" />
<link rel="stylesheet" type="text/css" href="Styles/dmxGrid/dmxgrid/dmxgrid.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmx_events_calendar.js"></script>
<script type="text/javascript" src="ScriptLibrary/jquery.jsonp-1.1.1.min.js"></script>
<script type="text/javascript" src="ScriptLibrary/flexigrid.pack.js"></script>
<script type="text/JavaScript">
<!--
function controlAjaxDataGrid(scope, id, action) {//v1.3
var j = window.$ || null, scope = scope || document;
if (scope != document && scope.document) {
j = scope.$ || null;
scope = scope.document;
}
if (!j) return;
var tgt = scope.getElementById(id);
if (tgt && tgt.grid) {
switch (action) {
case 'reload' :j('#' + id, scope).flexReload();break;
case 'goToPage' :tgt.grid.changePage(arguments[3] || '');break;
case 'setFilter':
if (arguments[3] && arguments[3] == 'custom') {
j('#' + id, scope).setFilter(
arguments[4] || '',
arguments[5] || '',
arguments[6] || ''
);
} else if (arguments[3] && arguments[3] == 'form') {
j('#' + id, scope).setFilter(
arguments[4] || '',
arguments[5] || '',
arguments[6] ? $(arguments[6]).val() : ''
);
}
break;
}
}
}
//-->
</script>
<script type="text/javascript" src="ScriptLibrary/calendar_translation_en.js"></script>
</head>
<body>
<table width="98%" border="0" cellspacing="2" cellpadding="5">
<tr>
<td width="89%">
<div class="dmx_ajax_event_calendar apple_dark" id="dmxAjaxCalendar1" style="width:800px;"></div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#dmxAjaxCalendar1"
.dmxAjaxCalendar({"id": "dmxAjaxCalendar1", "legend_position": "none", "ajax_feeds": [{"url": "calendar_ajax/calendar_get_events2.php"}], "onEventClick": "controlAjaxDataGrid(document, \'dmx_grid1\', \'setFilter\', \'custom\', \'eventID\', \'=\', \'##id##\');"}
);
}
);
// ]]>
</script></td>
<td width="11%">
<p>
<div class="dmxgrid">
<script type="text/javascript" language="javascript">
<!--
$(function(){$('#dmx_grid1').flexigrid({
url: "ajax_servers/dmx_grid1.php",
sortname: "startdt",
dataType: "json",
rpOptions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
width: 350,
sortorder: "DESC",
colModel: [{
display: "eventID",
name: "eventID",
width: 20,
sortable: true,
align: "left",
hide: true
},
{
display: "startdt",
name: "startdt",
width: 30,
sortable: true,
align: "center",
hide: false
},
{
display: "descrip",
name: "descrip",
width: 300,
sortable: true,
align: "left",
hide: false
}]
});});
//-->
</script>
<table id="dmx_grid1"><tr><td></td></tr></table>
</div>
</p>
<p><img src="myevent.jpg" width="245" height="82" /> </p></td>
</tr>
</table>
</body>
</html>
=================================================
Replied 12 Oct 2012 19:44:22
12 Oct 2012 19:44:22 Teodor Kuduschiev replied:
Ah.. You have added filter in the grid settings? It should be aplied to the calendar behaviors only.
Replied 12 Oct 2012 19:50:08
12 Oct 2012 19:50:08 phil vouers replied:
so I should remove the filter from datagrid??
Replied 12 Oct 2012 19:55:06
12 Oct 2012 19:55:06 phil vouers replied:
that did it.. Thanks for the great support. I was so use to sending ID's to a new page on other things we do that I just went and added the filter.
Thanks again
Thanks again
Replied 12 Oct 2012 20:05:24
12 Oct 2012 20:05:24 Teodor Kuduschiev replied:
You are welcome!