jQWidgets Forums

Tagged: addrow; nestedGrid; Grid

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

AddRow deletes other nested grids Posts
October 19, 2015 at 4:20 pm AddRow deletes other nested grids #77086

N.I.Alam
Participant

Hi,
I have a a grid with two data columns ‘String1’ and ‘String2’. The grid has a nested grid of Checkboxes. There are Add buttons to add a row for each grid.
The problem is when i add a row to the main (outer) grid it deleted the nested grids of previous rows.

To see the problem,
1. Add a roww to the main grid using the add button,
2. Expand the row to see the nested grid of checkboxes
3. Add a row to the checkbox grid using the nested add button
4. Now add a row to the outer group using its Add button again

You will notice that the first row collapses and deletes the nested row in it.

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../../HTML5/jQWidgets-lib/jqwidgets/styles/jqx.base.css” />
<link rel=”stylesheet” href=”../../../HTML5/jQWidgets-lib/jquery-ui-1.11.4/jquery-ui.min.css” media=”all”>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxCheckBox.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.storage.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.edit.js”></script>
<!– <script type=”text/javascript” src=”../../../scripts/gettheme.js”></script> –>
<script type=”text/javascript”>
$( document ).ready( function ()
{
var LowerGrid = { addbutton: ‘LGAdd’, parggc: false, name: ‘LowerGrid’, datafields: [{ name: ‘CheckBox’, format: ‘CheckBox’ }], nested: [] };
var UpperGrid = { addbutton: ‘UGAdd’, parggc: true, name: ‘UpperGrid’, datafields: [{ name: ‘String1’, format: ‘String’ }, { name: ‘String2’, format: ‘String’ }], nested: [LowerGrid] };
$( ‘#’ + UpperGrid.name ).jqxGrid( {} );
$( ‘#’ + UpperGrid.addbutton ).jqxButton();
$( ‘#’ + UpperGrid.addbutton ).on( ‘click’, function ( event )
{
OnGroupButtonAdd( $( $.find( ‘#’ + UpperGrid.name ) ) );
} );
function GGC_SetValue( Grid_, data, initialize, selection )
{
if ( initialize )
{
var data = [];// [[‘2’, ‘A’], [‘3’, ‘B’], [‘8’, ‘C’]];
data = MatToData( Grid_, data );

var gname = “#” + Grid_.name;
var gname1 = Grid_.name;
var source = { datatype: “array” };
var grid = $( $.find( gname ) );
var CD = GetDataFields_and_Columns( grid, Grid_ );
source[‘datafields’] = CD.D;
var dataAdapter = new $.jqx.dataAdapter( source );
var rowdets = Create_rowdetails( Grid_ );
$( gname ).jqxGrid(
{
editable: true,
width: 600,
height: 300,
source: dataAdapter,
rowdetails: true,
columns: CD.C
} );
if ( rowdets != ” )
{
$( gname ).jqxGrid(
{
initrowdetails: function ( index )
{
initlevel( index, Grid_ );
},
rowdetailstemplate: { rowdetails: rowdets, rowdetailsheight: 300, rowdetailshidden: true },
} );

}
$( gname ).on( ‘cellvaluechanged’, function ( event )
{

var args = event.args;
var value = args.newvalue;
var cname = “#” + event.currentTarget.id;
} )
}
else
{
var index = ”;
if ( selection >= 0 )
{
index = selection;
}
if ( Grid_.parggc )
{
index = ”;
}

var gname = Grid_.name;
var grid = $( $.find( ‘#’ + gname + index ) );

var rows = grid.jqxGrid( ‘getboundrows’ );
for ( var i = rows.length – 1; i >= 0 ; i– )
{
grid.jqxGrid( ‘deleterow’, rows[i].uid );
}
data = MatToData( Grid_, data );
var value = grid.jqxGrid( ‘addrow’, 0, data );

}
}
function MatToData( Grid_, data )
{
var datadisp = [];
for ( var i = 0; i < data.length; i++ )
{
var row = {};
for ( var j = 0; j < data[i].length; j++ )
{
var C = Grid_.datafields[i];
row[C.name] = data[i][j];
}
datadisp.push( row );
}
return datadisp;
}
function initlevel( index, Grid_ )
{
for ( var i = 0; i < Grid_.nested.length; i++ )
{
var gname = Grid_.nested[i].name;
var grid = $( $.find( ‘#’ + gname + index ) );
var rowdet = Create_rowdetails( Grid_.nested[i] );

if ( grid != null )
{
var source = { datatype: “array” };

var CD = GetDataFields_and_Columns( grid, Grid_.nested[i] );
source[‘datafields’] = CD.D;
var dataAdapter = new $.jqx.dataAdapter( source );
grid.jqxGrid( {
editable: true,
source: dataAdapter,
rowdetails: true,
width: 200,
height: 120,
columns: CD.C
} );
if ( rowdet != ” )
{
grid.jqxGrid(
{
rowdetailstemplate: { rowdetails: rowdet, rowdetailsheight: 150, rowdetailshidden: true },
rowdetails: true,
initrowdetails: function ( index )
{
initlevel( index, Grid_.nested[i] );
},
} );
}
grid.on( ‘cellvaluechanged’, function ( event )
{
console.log( event.currentTarget.id, event.currentTarget.div, value, args.rowindex, args.datafield );
} )
}
var button = $( $.find( ‘#’ + Grid_.nested[i].addbutton ) );
if ( button != null )
{
button.jqxButton( { width: 100 } );
button.on( ‘click’, function ( event )
{

OnGroupButtonAdd( grid );
//var data = {};
// for ( var j = 0; j < Grid_.nested[i].datafields.length ; j++ )
//{
// var varname = Grid_.nested[i].datafields[j].name;

// var value = ”;
// data[varname] = ”;
//}
// grid.jqxGrid( ‘addrow’, null, [data] );
} );

}

}
}
function Create_rowdetails( Grid_ )
{
var str = ”;
for ( var i = 0; i < Grid_.nested.length; i++ )
{
var str = str + “<div id='” + Grid_.nested[i].name + “‘></div>”
var str = str + “<div><input id='” + Grid_.nested[i].addbutton + “‘ value='” + ‘Add’ + “‘></input></div>”;
}
return str;
}
function GetDataFields_and_Columns( grid, Grid_ )
{
var columns1 = [];
var datafield = [];

for ( var i = 0; i < Grid_.datafields.length; i++ )
{
var varname = Grid_.datafields[i].name;
var C = Grid_.datafields[i];
var tp = ‘string’;
var tp2 = ‘textbox’;
var l = { text: C.name, dataField: varname };
if ( C.format == ‘CheckBox’ )
{
tp = ‘bool’;
tp2 = ‘checkbox’;
}
datafield.push( { name: varname, type: tp } );
l.columntype = tp2,
l.width = 100;
columns1.push( l );
}
var l = {
text: ”, datafield: ‘Delete’, width: 100, columntype: ‘button’, cellsrenderer: function ()
{
return ‘Delete’;
}, buttonclick: function ( row )
{
var id = grid.jqxGrid( ‘getrowid’, row );
grid.jqxGrid( ‘deleterow’, id );
}
};
columns1.push( l );
return { C: columns1, D: datafield };
}
function OnGroupButtonAdd( grid )
{
grid.jqxGrid( ‘addrow’, null, {} );
// $( ‘#’ + UpperGrid.name ).jqxGrid( ‘addrow’, null, {} );
}

GGC_SetValue( UpperGrid, [], true, -1 );
} );
</script>
</head>
<body class=’default’>
<div id=”UpperGrid”></div>
<div>
<input id=”UGAdd” value=”Add”></input>
</div>
</body>
</html><!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../../HTML5/jQWidgets-lib/jqwidgets/styles/jqx.base.css” />
<link rel=”stylesheet” href=”../../../HTML5/jQWidgets-lib/jquery-ui-1.11.4/jquery-ui.min.css” media=”all”>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxCheckBox.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.storage.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../../HTML5/jQWidgets-lib/jqwidgets/jqxgrid.edit.js”></script>
<!– <script type=”text/javascript” src=”../../../scripts/gettheme.js”></script> –>
<script type=”text/javascript”>
$( document ).ready( function ()
{
var LowerGrid = { addbutton: ‘LGAdd’, parggc: false, name: ‘LowerGrid’, datafields: [{ name: ‘CheckBox’, format: ‘CheckBox’ }], nested: [] };
var UpperGrid = { addbutton: ‘UGAdd’, parggc: true, name: ‘UpperGrid’, datafields: [{ name: ‘String1’, format: ‘String’ }, { name: ‘String2’, format: ‘String’ }], nested: [LowerGrid] };
$( ‘#’ + UpperGrid.name ).jqxGrid( {} );
$( ‘#’ + UpperGrid.addbutton ).jqxButton();
$( ‘#’ + UpperGrid.addbutton ).on( ‘click’, function ( event )
{
OnGroupButtonAdd( $( $.find( ‘#’ + UpperGrid.name ) ) );
} );
function GGC_SetValue( Grid_, data, initialize, selection )
{
if ( initialize )
{
var data = [];// [[‘2’, ‘A’], [‘3’, ‘B’], [‘8’, ‘C’]];
data = MatToData( Grid_, data );

var gname = “#” + Grid_.name;
var gname1 = Grid_.name;
var source = { datatype: “array” };
var grid = $( $.find( gname ) );
var CD = GetDataFields_and_Columns( grid, Grid_ );
source[‘datafields’] = CD.D;
var dataAdapter = new $.jqx.dataAdapter( source );
var rowdets = Create_rowdetails( Grid_ );
$( gname ).jqxGrid(
{
editable: true,
width: 600,
height: 300,
source: dataAdapter,
rowdetails: true,
columns: CD.C
} );
if ( rowdets != ” )
{
$( gname ).jqxGrid(
{
initrowdetails: function ( index )
{
initlevel( index, Grid_ );
},
rowdetailstemplate: { rowdetails: rowdets, rowdetailsheight: 300, rowdetailshidden: true },
} );

}
$( gname ).on( ‘cellvaluechanged’, function ( event )
{

var args = event.args;
var value = args.newvalue;
var cname = “#” + event.currentTarget.id;
} )
}
else
{
var index = ”;
if ( selection >= 0 )
{
index = selection;
}
if ( Grid_.parggc )
{
index = ”;
}

var gname = Grid_.name;
var grid = $( $.find( ‘#’ + gname + index ) );

var rows = grid.jqxGrid( ‘getboundrows’ );
for ( var i = rows.length – 1; i >= 0 ; i– )
{
grid.jqxGrid( ‘deleterow’, rows[i].uid );
}
data = MatToData( Grid_, data );
var value = grid.jqxGrid( ‘addrow’, 0, data );

}
}
function MatToData( Grid_, data )
{
var datadisp = [];
for ( var i = 0; i < data.length; i++ )
{
var row = {};
for ( var j = 0; j < data[i].length; j++ )
{
var C = Grid_.datafields[i];
row[C.name] = data[i][j];
}
datadisp.push( row );
}
return datadisp;
}
function initlevel( index, Grid_ )
{
for ( var i = 0; i < Grid_.nested.length; i++ )
{
var gname = Grid_.nested[i].name;
var grid = $( $.find( ‘#’ + gname + index ) );
var rowdet = Create_rowdetails( Grid_.nested[i] );

if ( grid != null )
{
var source = { datatype: “array” };

var CD = GetDataFields_and_Columns( grid, Grid_.nested[i] );
source[‘datafields’] = CD.D;
var dataAdapter = new $.jqx.dataAdapter( source );
grid.jqxGrid( {
editable: true,
source: dataAdapter,
rowdetails: true,
width: 200,
height: 120,
columns: CD.C
} );
if ( rowdet != ” )
{
grid.jqxGrid(
{
rowdetailstemplate: { rowdetails: rowdet, rowdetailsheight: 150, rowdetailshidden: true },
rowdetails: true,
initrowdetails: function ( index )
{
initlevel( index, Grid_.nested[i] );
},
} );
}
grid.on( ‘cellvaluechanged’, function ( event )
{
console.log( event.currentTarget.id, event.currentTarget.div, value, args.rowindex, args.datafield );
} )
}
var button = $( $.find( ‘#’ + Grid_.nested[i].addbutton ) );
if ( button != null )
{
button.jqxButton( { width: 100 } );
button.on( ‘click’, function ( event )
{

OnGroupButtonAdd( grid );
//var data = {};
// for ( var j = 0; j < Grid_.nested[i].datafields.length ; j++ )
//{
// var varname = Grid_.nested[i].datafields[j].name;

// var value = ”;
// data[varname] = ”;
//}
// grid.jqxGrid( ‘addrow’, null, [data] );
} );

}

}
}
function Create_rowdetails( Grid_ )
{
var str = ”;
for ( var i = 0; i < Grid_.nested.length; i++ )
{
var str = str + “<div id='” + Grid_.nested[i].name + “‘></div>”
var str = str + “<div><input id='” + Grid_.nested[i].addbutton + “‘ value='” + ‘Add’ + “‘></input></div>”;
}
return str;
}
function GetDataFields_and_Columns( grid, Grid_ )
{
var columns1 = [];
var datafield = [];

for ( var i = 0; i < Grid_.datafields.length; i++ )
{
var varname = Grid_.datafields[i].name;
var C = Grid_.datafields[i];
var tp = ‘string’;
var tp2 = ‘textbox’;
var l = { text: C.name, dataField: varname };
if ( C.format == ‘CheckBox’ )
{
tp = ‘bool’;
tp2 = ‘checkbox’;
}
datafield.push( { name: varname, type: tp } );
l.columntype = tp2,
l.width = 100;
columns1.push( l );
}
var l = {
text: ”, datafield: ‘Delete’, width: 100, columntype: ‘button’, cellsrenderer: function ()
{
return ‘Delete’;
}, buttonclick: function ( row )
{
var id = grid.jqxGrid( ‘getrowid’, row );
grid.jqxGrid( ‘deleterow’, id );
}
};
columns1.push( l );
return { C: columns1, D: datafield };
}
function OnGroupButtonAdd( grid )
{
grid.jqxGrid( ‘addrow’, null, {} );
// $( ‘#’ + UpperGrid.name ).jqxGrid( ‘addrow’, null, {} );
}

GGC_SetValue( UpperGrid, [], true, -1 );
} );
</script>
</head>
<body class=’default’>
<div id=”UpperGrid”></div>
<div>
<input id=”UGAdd” value=”Add”></input>
</div>
</body>
</html>

October 20, 2015 at 6:26 am AddRow deletes other nested grids #77104

Peter Stoev
Keymaster

Hi N.I.Alam,

Row Details are initialized and re-initialized when the Grid needs to be re-rendered. Such re-render is caused when you Add a row, when you remove a row, when you filter or sort the Grid. The behavior which according to you is an issue is actually a normal and designed behavior. You can keep track on your changes or synchronize your Grids with DB so when they are created they will use most recent Data coming from a DB.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 20, 2015 at 10:06 am AddRow deletes other nested grids #77131

N.I.Alam
Participant

Hi,
Thanks for your response, but is there no way around it, if i do not want to keep a data base?
Can i stop the grid from re-rendering?

October 20, 2015 at 10:18 am AddRow deletes other nested grids #77132

Peter Stoev
Keymaster

Hi N.I.Alam,

No, you cannot stop the Grid from re-rendering especially when you add/delete/update its records.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.