Filter from another gird

[mac]

Hi,

I have 2 grids and I want to filter de 2nd grid with a value from the 1st, but the filter doesn't work.



1st grid, I get the value of the row value that I want to filter, and set the filter on 2nd grid:

Code: [Select]

    newObj.rowClick = function (evt, obj) {
var dataCell = obj.rowData;
var $gridStock=$( "#grid_table" ).pqGrid();
//alert(dataCell[2]);
var filterObject =
{
on:true,
condition: 'contain',
value: dataCell[2]
};
var colM=$gridStock.pqGrid( "option", "colModel" );
//set filter of 1st column
colM[2].filter = filterObject;
$gridStock.pqGrid("refreshDataAndView");
$gridStock.pqGrid( "option", "colModel", colM );
//var filterModel=$gridStock.pqGrid( "option", "filterModel" ); 
//console.log(colM[2],filterModel);
}
And this is the inizialization of filterModel on 2nd grid:

Code: [Select]

var newObj = {
filterModel: { mode : "AND" },
},

Log returns

>var $gridStock=$( "#grid_table" ).pqGrid();
>var filterModel=$gridStock.pqGrid( "option", "filterModel" );
>filterModel
Object {on: true, mode: "AND", header: false}
>var colM=$gridStock.pqGrid( "option", "colModel" );
>colM
[Object,Object,Object {
childCount: 0
colSpan: 1
dataIndx: 1
dataType: "string"
editor: Object
filter: Object {
   condition: "contain"
   on: true
   value: "CEREZA"
   __proto__: Object }
leftPos: 2
resizable: true
rowSpan: 1
title: "Familia"
validations: Array[2]
width: 150
__proto__: Object}
]

What I'm doing wrong?

[paramvir]

do you want to filter the second grid locally or remotely. What is the value of dataModel.location of second grid.

[mac]

I have the 2nd grid remotely.
I've seen another posts and I've implemented filter localy, and it works the first time, but if I change the filter (click on another row with a diferent name) it doesn't work, continue showing the first filtered items. Maybe because the first have all the items, and when I put the next filter it only have the items of the first filter?  What I have to do for the local filter work?

1st grid, I get the value of the row value that I want to filter, and set the filter on 2nd grid:

Code: [Select]

    newObj.rowClick = function (evt, obj) {

var dataCell = obj.rowData;
var $gridStock=$( "#grid_table" ).pqGrid();
$gridStock.pqGrid( "option", "dataModel.location", "local" );
//alert(dataCell[2]);
var filterObject =
{
on:true,
condition: 'contain',
value: dataCell[2]
};
var colM=$gridStock.pqGrid( "option", "colModel" );
//set filter of 1st column
colM[2].filter = filterObject;

$gridStock.pqGrid( "option", "colModel", colM );
var filterModel=$gridStock.pqGrid( "option", "filterModel" ); 
console.log(colM[2],filterModel);
$gridStock.pqGrid("refreshDataAndView");

$gridStock.pqGrid( "option", "dataModel.location", "remote" );
}

[paramvir]

remote server side filtering is meant for location == 'remote' as shown in the demos

However if you want to do local filtering with location == 'remote' you could add type: 'local' in filterModel of 2nd grid

filterModel: { mode: 'AND', type:'local' },

Addition ==================

In addition to above, please also use filter method instead of manually adding filter to column and refreshDataAndView

Code: [Select]

            $grid.pqGrid("filter", {
                oper: 'replace',
                data: [{ dataIndx: dataIndx, condition: condition, value: value}]
            });


[mac]

Thanks a lot, it works. I'm local filtering with location == 'remote', and used filter method.

Didn't know that you can add type in filterModel, this isn't in documentation API or it is?

[mac]

Hello,

I have another question.

When I filter a item that's in the grid it works, but when I filter some item that isn't in the grid it shows the last coincidence and is not showing No rows to display.

Example:
I look for APPLES and in the grid I have: APPLES, MELONS, and APPLES.
It shows 2 apples, it's fine.
I look for ORANGES and it shows 2 apples and the melons, should display: No rows to display.

Ah, when I click some of the rows bad filtered it raises a exception:

Uncaught TypeError: Cannot read property '1' of undefined pqgrid.min.js:9
g._onClickCell pqgrid.min.js:9
(anonymous function) jquery-ui-1.10.4.custom.js:401
(anonymous function) pqgrid.min.js:9
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4767

[paramvir]

It's working fine in the examples.

Please post a small test case with reproducible issue.

[mac]

Here you have an example, I'm reproducing the issue with that code. If you need somthing tell me.

Thanks.

Code: [Select]

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<!--jQuery dependencies-->
<link href="css/south-street/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="pqgrid.min.css" />
    <script src="pqgrid.min.js"></script>
<script src="js/jquery.vbuton.js"></script>
<!--PQ Grid Office theme-->
<script src="js/jquery.ui.touch-punch.js"></script>

</head>
<body>

<div id="grid_table1"></div>


<table class="StockTable" id="StockTable">
<tbody><tr valign="middle" id="header">
<th class="lineNum">lineNum</th>
<th class="familia">Familia</th>
<th class="variedad">Variedad</th>
</tr><tr id="Tr1" class="rowcolor1"><td class="lineNum">5</td>
<td class="familia">CEREZA</td><td class="variedad">EARLY BIGI</td>
</tr><tr id="Tr1" class="rowcolor1"><td class="lineNum">6</td><td class="familia">CEREZA</td>
<td class="variedad">EARLY BIGI</td></tr><tr id="Tr1" class="rowcolor1"><td class="lineNum">7</td>
<td class="familia">MANZANA</td><td class="variedad">CRIPPS PINK</td>
</tr><tr id="Tr1" class="rowcolor1"><td class="lineNum">8</td><td class="familia">MANZANA</td>
<td class="variedad">CRIPPS PINK</td></tr><tr id="Tr1" class="rowcolor1"><td class="lineNum">9</td>
<td class="familia">MANZANA</td><td class="variedad">CRIPPS PINK</td></tr><tr id="Tr1" class="rowcolor1">
<td class="lineNum">10</td><td class="familia">ALBARICOQUE</td><td class="variedad">2084-14</td>
</tr><!-- repeating rows end -->
</tbody></table>   

<script>

$(function () { //Stock1

var tbl = $("table.StockTable");
var obj = $.paramquery.tableToArray(tbl);


var newObj = { width: 500,
height:500,
title:"Stock",
resizable:true,
draggable:true,
groupModel:{
            dataIndx: [1],               
            collapsed: [ false],
            title: ["<b style='font-weight:bold;'>{0} ({1} palets)</b>"],
            dir: ["up"]
            //,icon: ["circle-plus", "circle-triangle", "triangle"]
        },
filterModel: { on: true, mode: 'AND', header: true, type: 'local' },
editModel: { clicksToEdit: 0, saveKey: 13 },
scrollModel:{theme:true},
selectionModel: { type: 'cell', mode: 'block'},
hoverMode:'cell',
numberCell:{resizable:true,title:"#",width:30,minWidth:30},

//selectionModel:{type: 'cell',mode:'block'},

};

newObj.colModel = [{ title: "lineNum", hidden: true, dataType: "integer"},

    { title: "Variedad", width: 250, dataType: "string", resizable:true, filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] },
render:function( ui ){
//console.log(ui.rowData[14]);
if (ui.rowData[14]=='1'){
$grid.pqGrid( "addClass", {rowIndx: ui.rowData.rowIndx, cls: 'glow'} );
}
return ui.rowData[ui.dataIndx];
}},
{ title: "Familia", dataType: "string"},

];
//$("#grid_table1").pqGrid(newObj);
console.log(obj.data);
newObj.dataModel = {         location: "local",
        sorting: "local",
        sortDir: "up",
data: obj.data
};

newObj.changeTable = function (data){
console.log(this);
}
var $grid = $("#grid_table1").pqGrid(newObj);

$grid.pqGrid("filter", { oper: 'add', data: [] })
.pqGrid("refresh");

});


</script>
</body>
</html>


[paramvir]

Thanks for reporting this issue, you would get the fix by Monday.

I'm moving this thread to the Bug Report Board.

[paramvir]

mac

This issue has been fixed in the new version 2.1.0