Ajax DataGrid Support Product Page

Solved

Problem Master Detail Datagrid

Reported 04 Oct 2011 01:53:17
1
has this problem
04 Oct 2011 01:53:17 Gianluca Zeri posted:
Hi,
I have two problems with Ajax Datagrid. The first selecting a row from the master I (Table orders) should see the items ordered, but I see the following error
controlAjaxDataGrid(document, 'dmx_grid3', 'setFilter', 'form', 'NUMERO_ORDINE', '=', '{NUMERO_ORDINE}')

The second problem concerns the index or primary key. To see the correct data in the second datagrid I need to do three join: NUMERO_ORDINE, DATA, COD_AGENTE. This is possible?
Here's the query I use in SQL to see the data that interest me (though it may be helpful)
select .......
from (`ordini`
join `righeordine` on
(
(
(`ordini`.`NUMERO_ORDINE` = `righeordine`.`NUMERO_ORDINE`) and
(`ordini`.`COD_AGENTE` = `righeordine`.`COD_AGENTE`) and
(`ordini`.`DATA` = `righeordine`.`DATA`)
)
))
where
(
(`ordini`.`COD_AGENTE` = '030') and
(`ordini`.`NUMERO_ORDINE` = 226)
);

Replies

Replied 04 Oct 2011 10:02:28
04 Oct 2011 10:02:28 Teodor Kuduschiev replied:
Hello Gianluca,

Can you please provide a link to your page?
Replied 04 Oct 2011 20:25:48
04 Oct 2011 20:25:48 Gianluca Zeri replied:
Hi,
This page is under construction and I can not put it online now. I do not have good database yet.

If you can help me write the code of the page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Clienti BiForce - La Doppia Forza Vendite" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Gianluca Zeri / puntozeri Multimedia" />
<link rel="stylesheet" type="text/css" href="css/variant-multi-alt.css" title="BiForce" media="all" />
<title>Clienti BiForce.it</title>
<style type="text/css">
body {
	background-image: url(imgs/background.jpg);
}
</style>
<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/flexigrid.pack.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/dmxGrid/dmxgrid_pale_blue/dmxgrid_pale_blue.css" />
<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>
</head>

<body>
<div id="containerfull"><!-- Use"containerfull" for 100% width. For fixed width, use "container980", "container760" or "container600" (the number is the layout width in pixels). -->
	<div id="header">
		[h1]<a href="index_no2.html">BiForce</a>[/h1]
		[h2]dove l'unione fa la forza........[/h2]
	</div>
	<div id="menu">[list][*]<a href="home.asp">Home</a>[/*][*]<a href="#">760px width</a>[/*][*]<a href="#">600px width</a>[/*]
			<!--[*]<a class="current" href="index.html">100% width</a>[/*]-->[/list]
</div>
	
	<div id="feature">
		<div class="left">			
			[h2]<a href="#">Ordini</a>[/h2]
			<p>&nbsp;</p>
		</div>

		<div class="right">
			[h2]&nbsp;[/h2]
</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div id="main">
		<div id="content_full">
		  <div class="dmxgrid">
<script type="text/javascript" language="javascript">
<!--
$(function(){$('#dmx_grid2').flexigrid({
    url: "ajax_servers/dmx_grid2.asp",
    title: "Ordini Clienti",
    width: 850,
    height: 400,
    dataType: "json",
    rpOptions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
    onrowclick: "controlAjaxDataGrid(document, 'dmx_grid3', 'setFilter', 'form', 'NUMERO_ORDINE', '=', '{NUMERO_ORDINE}');",
    colModel: [{
        display: "NUMERO ORDINE",
        name: "NUMERO_ORDINE",
        width: 140,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "DATA",
        name: "DATA",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "NUMERATORE",
        name: "NUMERATORE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "RIFERIMENTO",
        name: "RIFERIMENTO",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "DATA CONSEGNA",
        name: "DATA_CONSEGNA",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "TIPO ORDINE",
        name: "TIPO_ORDINE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "COD CLIENTE",
        name: "COD_CLIENTE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    }],
    searchitems: [{
        display: "NUMERO ORDINE",
        name: "NUMERO_ORDINE"
    },
    {
        display: "COD CLIENTE",
        name: "COD_CLIENTE"
    }]
});});
//-->
</script>
<table id="dmx_grid2"><tr><td></td></tr></table>
</div>
          <br />
          <br />
          <div class="dmxgrid">
<script type="text/javascript" language="javascript">
<!--
$(function(){$('#dmx_grid3').flexigrid({
    url: "ajax_servers/dmx_grid3.asp",
    rp: 20,
    title: "Righe Ordine",
    width: 1024,
    height: 150,
    dataType: "json",
    rpOptions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
    autoload: false,
    striped: false,
    colModel: [{
        display: "NUMERO ORDINE",
        name: "NUMERO_ORDINE",
        width: 140,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "DATA",
        name: "DATA",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "COD CLIENTE",
        name: "COD_CLIENTE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "COD ARTICOLO",
        name: "COD_ARTICOLO",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "PREZZO",
        name: "PREZZO",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "QUANTITA",
        name: "QUANTITA",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "SCONTO MERCE",
        name: "SCONTO_MERCE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "SCONTO 1",
        name: "SCONTO_1",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "SCONTO 2",
        name: "SCONTO_2",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "COD AGENTE",
        name: "COD_AGENTE",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    },
    {
        display: "PROGRESSIVO",
        name: "PROGRESSIVO",
        width: 100,
        sortable: true,
        align: "left",
        hide: false
    }],
    searchitems: [{
        display: "NUMERO ORDINE",
        name: "NUMERO_ORDINE"
    },
    {
        display: "COD CLIENTE",
        name: "COD_CLIENTE"
    }]
});});
//-->
</script>
<table id="dmx_grid3"><tr><td></td></tr></table>
</div>
<br />
		  <br />
<br />

<div class="left">			
                [h3]<a href="ordini_New.asp">Nuovo Ordine</a>[/h3]
                <p>&nbsp;</p>
                <p>Per ulteriori informazioni, consigli e risorse aggiuntive, visitare il sito <a href="http://puntozeri.it/contact/index.asp">puntoZeri.it</a>.</p>
            </div>

			<div class="right">
				[h3]Statistiche[/h3]
                <p>T</p>
			</div>
			<div class="clear">&nbsp;</div>
		</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div id="footer">
		<div id="footersections">
			<div class="half">
				[h2]Footer area #1[/h2]
				<p>&nbsp;</p>
			</div>

			<div class="quarter">
				[h2]Footer area #2[/h2]
				<p>&nbsp;</p>
</div>

			<div class="lastquarter">
				[h2]Footer menu[/h2][list][*][/*][*][/*][/list]	
			</div>     
			<div class="clear">&nbsp;</div> 
		</div>
	</div>   

	<div id="credits">
    <script language="JavaScript" type="text/javascript">
var d=new Date();
var dI = 2010
yr=d.getFullYear();
if (yr==dI)
	    document.write(yr);
else if (yr!=dI)
	    document.write(dI+" - "+yr);		
</script> 
    <span class="small">&copy; project and designer by <a href="http://www.puntozeri.it" target="_blank">puntozeri.it</a>&nbsp;[img]http://www.puntozeri.it/img/loghi/PuntoZeriweb.png" alt="puntoZeri" width="25" height="28" border="0" align="absMiddle"/></span>
	</div>  
</div>
</body>
</html>

Replied 06 Oct 2011 09:45:31
06 Oct 2011 09:45:31 Miroslav Zografski replied:
Hello Gianluca,

Try instead of using the name of the column to set in its number (each column has zero based index so your first column in the grid has index of 0 and its value can be retrieved by calling {0} instead of {first_column_name} and so on).

About the filter you need to apply on the second grid - there is no workaround as of now to have a multiple column filter.
Replied 07 Oct 2011 01:54:22
07 Oct 2011 01:54:22 Gianluca Zeri replied:
Hello.
I substituted the value of field_name with an index {0}, since the column is the first in two datagrid, but it did not work:

$(function(){$('#dmx_grid2').flexigrid({
url: "ajax_servers/dmx_grid2.asp",
title: "Ordini Clienti",
width: 850,
height: 400,
dataType: "json",
rpOptions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
onrowclick: "controlAjaxDataGrid(document, 'dmx_grid3', 'setFilter', 'form', '{0}', '=', '{0}');",
colModel: [{
display: "NUMERO ORDINE",
name: "NUMERO_ORDINE",
width: 140,
sortable: true,
align: "left",
hide: false

Best regard
Replied 07 Oct 2011 10:25:04
07 Oct 2011 10:25:04 Miroslav Zografski replied:
Hello Gianluca,

You need to substitute only the part which will take the value of the column. In your case :
controlAjaxDataGrid(document, 'dmx_grid3', 'setFilter', 'form', 'NUMERO_ORDINE', '=', '{0}')

Replied 07 Oct 2011 11:58:32
07 Oct 2011 11:58:32 Gianluca Zeri replied:
Hi,
I can not get it to work! I also changed {NUMERO_ORDINE} = {0} and NUMERO_ORDINE = {0} and {0} = {0} and NUMERO ORDINE (real name of the field) = {0}, but I always error.

Thanks
Replied 05 Dec 2011 13:59:02
05 Dec 2011 13:59:02 Miroslav Zografski replied:
Hello Gianluca,

This appears to be a bug in the latest version of the grid. This issue is addressed in the upcoming grid update.
Replied 19 Dec 2011 16:26:31
19 Dec 2011 16:26:31 Vulcho Vulev replied:
Hello Gianluca Zeri.

Please download the latest version from our site:

Quote
Version 1.1.0

Greatly improved all row and column behaviors
Various source file optimizations for smaller size
This reply was removed on 3/28/2012 4:12:17 PM.
See the changelog

Reply to this topic