jQuery UI Widgets › Forums › Grid › Solution keyvalue isn't working
Tagged: javascript datagridview, jquery datagrid, jquery grid foreighn key, jquery ui datagrid, jquery ui grid, jqwidgets, jqwidgets grid, key value
This topic contains 9 replies, has 2 voices, and was last updated by usrimas 10 years, 11 months ago.
-
Author
-
Hi,
I found solution in “gridkeyvaluescolumnwitharray.htm” sample and di this. But problem – this array is binded to remote database and then go to next positions at bottom grid, then it return error :
Uncaught TypeError: Cannot read property ‘prodstatus’ of undefined .
Here is mine source :
var prodSt = [
{ value: 0, label: “Sukurta” },
{ value: 1, label: “Įvertinta” },
{ value: 2, label: “Suplanuota” },
{ value: 3, label: “Paleista” },
{ value: 4, label: “Pradėta” },
{ value: 5, label: “Paskelbta baigtu” },
{ value: 7, label: “Baigta” } ];var statDb =
{
localdata : prodSt,
datatype : “array”,
datafields : [ { name: ‘value’, type: ‘int’ }, { name: ‘label’, type: ‘string’ } ]
};
var prodStat = new $.jqx.dataAdapter( statDb, { autoBind: true } );var url = “php/pagr_duom.php”;
var source =
{
dataType : ‘json’,
cache : false ,
datafields:
[
{ name: “prodid” , type: “string” },
{ name: “itemid” , type: “string” },
{ name: “name” , type: “string” },
{ name: “qtycalc” , type: “number” },
{ name: “dlvdate” , type: “date” },
{ name: “vtrmsalesid” , type: “string” },
{ name: “vtrmitemid” , type: “string” },
{ name: ‘status’, value: ‘prodstatus’, values: { source: prodStat.records, value: ‘value’, name: ‘label’ } },
{ name: ‘prodstatus’ , type: ‘int’ }
],
id : ‘prodid’,
root : ‘Rows’,
cache : false,
beforeprocessing: function( data ){ source.totalrecords = data[ 0 ].TotalRows; },
url : url,
data :
{
lenta : “prodtable”,
lent_id: “prodid”,
lent_st: [ “prodid”, “itemid”, “name”, “qtycalc”, “dlvdate”, “vtrmsalesid”, “vtrmitemid”, “prodstatus” ]
},
sort : function(){ $( “#” + mygrd ).jqxGrid( ‘updatebounddata’, ‘sort’ ); },
filter: function(){ $( “#” + mygrd ).jqxGrid( ‘updatebounddata’, ‘filter’ ); }
};
var dataAdapter = new $.jqx.dataAdapter( source );$( “#” + mygrd ).jqxGrid(
{
width : ’99%’,
source : dataAdapter,
showfilterrow : true,
filterable : true,
sortable : true,
theme : theme,
selectionmode : ‘multiplecellsextended’,
columnsresize : true,
virtualmode : true,
rendergridrows : function( obj ){ return obj.data; },
columns :
[
{ text: “Gamybos užsak.ID” , datafield: “prodid” , width: 120 },
{ text: “Prekės ID” , datafield: “itemid” , width: 100 },
{ text: “Prekės pavadinimas” , datafield: “name” , width: 300 },
{ text: “Kiekis” , datafield: “qtycalc” , width: 60, filtertype: “number” , cellsalign: “right” },
{ text: “Pagam.data” , datafield: “dlvdate” , width: 90, filtertype: “date” , cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: “Pardav.užsakymas” , datafield: “vtrmsalesid” , width: 150 },
{ text: “Pardav.užsak.prekė” , datafield: “vtrmitemid” , width: 150 },
{ text: ‘Gamyba būsena’ , datafield: ‘prodstatus’ , width: 150, displayfield: ‘status’, columntype: ‘dropdownlist’, filtertype: “list” }
//createeditor: function ( row, value, editor ){ editor.jqxDropDownList( { source: prodStat, displayMember: ‘label’, valueMember: ‘value’ } ); } }
]
});It seems, that grid isn’t waiting for new data from server and alreday return key/value without value ( null ) . All data from server are corrects . Datatype “int” and default 0 .
What I’m missing here ? Thanks in advance …
Hi usrimas,
The status field would be filled with data after the adapter’s binding is completed. If there’s a problem, it is not there. I suggest you to debug what your server returns as data and how your dataAdapter is filled with data. We would not be able to provide more information about that due to the reason that we do not know how your server code is implemented and what kind of data it returns.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
As I mentioned , data from server are true. Here they are( copy from JS console “Network” response, I did “Enter” for each row manually… ) :
[{“TotalRows”:71095,”Rows”:[
{“prodid”:”gu000005″,”itemid”:”260020240″,”name”:”Parapeto laikiklis Zn2,0″,”qtycalc”:”48″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000006″,”itemid”:”z260005090″,”name”:”Lankstinys 0.5mm cink 250mm”,”qtycalc”:”36″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000007″,”itemid”:”z269900210″,”name”:”Lankstinys pol”,”qtycalc”:”1″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},{“prodid”:”gu000009″,”itemid”:”z260010130″,”name”:”Lankstinys 1.0mm cink 625mm”,”qtycalc”:”2″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000015″,”itemid”:”z260012251″,”name”:”Kasetes G1000 Zn1.2mm, m2″,”qtycalc”:”8,74″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000018″,”itemid”:”260000200″,”name”:”Lankstinys Zn”,”qtycalc”:”2″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000019″,”itemid”:”260000200″,”name”:”Lankstinys Zn”,”qtycalc”:”1″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000020″,”itemid”:”260000200″,”name”:”Lankstinys Zn”,”qtycalc”:”1″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000023″,”itemid”:”229999312″,”name”:”Latakas80x100 2m, pol”,”qtycalc”:”15″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000026″,”itemid”:”229999341″,”name”:”Latako galinis dangtelis 80×100 pol”,”qtycalc”:”2″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000030″,”itemid”:”229999212″,”name”:”Lietvamzdis 60×80 2m pol”,”qtycalc”:”9″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000031″,”itemid”:”22035033999″,”name”:”Latako laikiklis 80×100″,”qtycalc”:”40″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000033″,”itemid”:”229999225″,”name”:”Virsutine alk\u016bn\u0117 60×80 50cm rr29″,”qtycalc”:”3″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000034″,”itemid”:”229999261″,”name”:”Apatine alkun\u0117 60×80 pol”,”qtycalc”:”3″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000040″,”itemid”:”229999271″,”name”:”Lietvamzdzio laikiklis 60×80 pol”,”qtycalc”:”12″,”dlvdate”:”2012-01-02 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000041″,”itemid”:”229999321″,”name”:”Latako jungtis 80×100 pol”,”qtycalc”:”14″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000042″,”itemid”:”z260010260″,”name”:”Kasetes G3000 Zn1.0mm, m2″,”qtycalc”:”123,6″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000044″,”itemid”:”241210999″,”name”:”Sniego u\u017etvara 2 vamzd\u017ei\u0173″,”qtycalc”:”7″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000045″,”itemid”:”z260010260″,”name”:”Kasetes G3000 Zn1.0mm, m2″,”qtycalc”:”17,57″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000047″,”itemid”:”z260015050″,”name”:”Lankstinys 1.5mm cink 138mm”,”qtycalc”:”20″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000048″,”itemid”:”z260012100″,”name”:”Lankstinys 1.2mm cink 312mm”,”qtycalc”:”111″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000049″,”itemid”:”z260012100″,”name”:”Lankstinys 1.2mm cink 312mm”,”qtycalc”:”122,1″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000050″,”itemid”:”z260010040″,”name”:”Lankstinys 1.0mm cink 125mm”,”qtycalc”:”120″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000051″,”itemid”:”241210999″,”name”:”Sniego u\u017etvara 2 vamzd\u017ei\u0173″,”qtycalc”:”8,8″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000053″,”itemid”:”220005031″,”name”:”Latako jungtis 60×80 Zn”,”qtycalc”:”10″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″},
{“prodid”:”gu000054″,”itemid”:”220005271″,”name”:”Lietvamzdzio laikiklis 60×80 Zn”,”qtycalc”:”10″,”dlvdate”:”2012-01-03 00:00:00″,”vtrmsalesid”:””,”vtrmitemid”:””,”prodstatus”:”7″}
]}]The last new row : “prodid”:”gu000054″ , “prodstatus”:”7″ . At the begin of grid are old data and they all are filled with status 7 ( end ).
This place I don’t fully understand : “The status field would be filled with data after the adapter’s binding is completed” . How this can be done ? Maybe here and it’s problem ? At first time, loading, the fills fine …
Then use filters – all is working OK, then status field fills correctly. This error occurs then moving vertical scroll down or going down of bottom of grid .
Peter, also data source php code :
<?php
header(‘Content-Type: text/plain; charset=UTF-8’);
require_once( ‘conf.php’ );
include( ‘adodb5/adodb.inc.php’ );ini_set( ‘mssql.charset’, ‘LITHUANIAN_CI_AS’ );
$conn = NewADOConnection( ‘ado_mssql’ );
$conn->Connect( $myCnt );$tot_rec = 0;
if ( isset( $_GET[ ‘lenta’ ] ) )
$lenta = $_GET[ ‘lenta’ ];
if ( isset( $_GET[ ‘lent_st’ ] ) )
{
$lent_st = $_GET[ ‘lent_st’ ];
$lent_se = implode( “,”, $lent_st );
}
if ( isset( $_GET[ ‘lent_id’ ] ) )
$lent_id = $_GET[ ‘lent_id’ ];
if ( isset( $_GET[ ‘lent_qr’ ] ) )
$lent_qr = $_GET[ ‘lent_qr’ ];$query = “SELECT ” . $lent_se . ” FROM ” . $lenta; //. ” WHERE prodid=’gu000033′”;
$qry = $query;
if ( isset( $_GET[ ‘sortdatafield’ ] ) )
{
$sortfield = $_GET[ ‘sortdatafield’ ];
$sortorder = $_GET[ ‘sortorder’ ];
if ( $sortfield != NULL )
$query = $query . ” ORDER BY ” .$sortfield . ” ” . $sortorder;
}if ( isset( $_GET[ ‘filterscount’ ] ) )
{
$filterscount = $_GET[ ‘filterscount’ ];
if ( $filterscount > 0 )
{
$where = ” WHERE (“;
$tmpdatafield = “”;
$tmpfilteroperator = “”;
for ( $i = 0; $i < $filterscount; $i ++ )
{
$filtervalue = $_GET[ “filtervalue” . $i ];
$filtervalue = iconv( “UTF-8”, “CP1257”, $filtervalue );
$filtercondition = $_GET[ “filtercondition” . $i ];
$filterdatafield = $_GET[ “filterdatafield” . $i ];
$filteroperator = $_GET[ “filteroperator” . $i ];if ( $tmpdatafield == “” )
$tmpdatafield = $filterdatafield;
else if ( $tmpdatafield <> $filterdatafield )
$where .= “)AND(“;
else if ( $tmpdatafield == $filterdatafield )
{
if ( $tmpfilteroperator == 0 )
$where .= ” AND “;
else $where .= ” OR “;
}// build the “WHERE” clause depending on the filter’s condition, value and datafield.
switch( $filtercondition )
{
case “CONTAINS”:
$where .= ” ” . $filterdatafield . ” LIKE ‘%” . $filtervalue .”%'”;
break;
case “DOES_NOT_CONTAIN”:
$where .= ” ” . $filterdatafield . ” NOT LIKE ‘%” . $filtervalue .”%'”;
break;
case “EQUAL”:
$where .= ” ” . $filterdatafield . ” = ‘” . $filtervalue .”‘”;
break;
case “NOT_EQUAL”:
$where .= ” ” . $filterdatafield . ” <> ‘” . $filtervalue .”‘”;
break;
case “GREATER_THAN”:
$where .= ” ” . $filterdatafield . ” > ‘” . $filtervalue .”‘”;
break;
case “LESS_THAN”:
$where .= ” ” . $filterdatafield . ” < ‘” . $filtervalue .”‘”;
break;
case “GREATER_THAN_OR_EQUAL”:
$where .= ” ” . $filterdatafield . ” >= ‘” . $filtervalue .”‘”;
break;
case “LESS_THAN_OR_EQUAL”:
$where .= ” ” . $filterdatafield . ” <= ‘” . $filtervalue .”‘”;
break;
case “STARTS_WITH”:
$where .= ” ” . $filterdatafield . ” LIKE ‘” . $filtervalue .”%'”;
break;
case “ENDS_WITH”:
$where .= ” ” . $filterdatafield . ” LIKE ‘%” . $filtervalue .”‘”;
break;
}
if ($i == $filterscount – 1)
{
$where .= “)”;
}
$tmpfilteroperator = $filteroperator;
$tmpdatafield = $filterdatafield;
}
$query = $query . $where;
$tot_rec ++;
}
}
$fvr = $_GET[ ‘recordstartindex’ ];
$lvr = $_GET[ ‘recordendindex’ ];
$rcnt = $lvr – $fvr;
$rs = $conn->execute( $query );
$trw = $rs->RecordCount();
$rs->Close();
$rs = null;
$rs = $conn->SelectLimit( $query, $rcnt, $fvr ) or die( “SQL klaida !” );
$rs->MoveFirst();
while ( !$rs->EOF )
{
$a = array();
for ( $i = 0; $i < $rs->FieldCount(); $i ++ )
{
$clnm = $lent_st[ $i ];
if ( $clnm != ‘name’ )
$retVar = strval( $rs->Fields( $clnm ) );
else
$retVar = iconv( “CP1257”, “UTF-8”, $rs->Fields( $clnm ) );
$a[ $clnm ] = $retVar;
}
$rtn[] = $a;
$rs->MoveNext();
}
$rs->Close();
$rs = null;
$conn->Close();
$conn = null;$ret[] = array( ‘TotalRows’ => $trw, ‘Rows’ => $rtn );
echo json_encode( $ret );
?>Hi usrimas,
The solution in that case is to set the Grid’s pageable property to true and to include jqxgrid.pager.js.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Sorry, but pagination isn’t in plans. Another question – can be done filter key->value ? I can do values through cell render function . But then how to filter ?
Thanks in advance !
Hi usrimas,
Filtering is done by the display value. If you want to add additional Server variables, you will have to use the formatData callback function – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks for the answer, Peter. As I understand from this description, in mine case I must to catch ‘filtervalue’ and replace value with key. Filtervalues are related with filterdatafield ?
Hi usrimas,
It is the opposite. When an end-user types into a filter textfield or chooses some items from a list of items, the Grid sends to a server the information which the user has entered. If you want to add additional values, you will need to implement the formatData callback function.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comDid this :
var dataAdapter = new $.jqx.dataAdapter( source,
{
formatData: function( data )
{
if ( data.filterscount > 0 )
{
for ( var i = 0; i < data.filterscount; i ++ )
{
var fld1 = “filterdatafield” + i;
var fld2 = “filtervalue” + i;
if ( data[ fld1 ] == ‘prodstatus’ )
{
var val = data[ fld2 ];
var arr = jQuery.grep( prodSt, function( mas ) { return mas.label == val } );
data[ fld2 ] = arr[ 0 ].value;
}
}
}
$.extend( data, {} );
return data;
}
});Works very fine … Thanks, Peter, for your help … 🙂
-
AuthorPosts
You must be logged in to reply to this topic.