jQuery UI Widgets › Forums › Grid › Display two grids in one page
This topic contains 7 replies, has 3 voices, and was last updated by Amar Kansara 10 years, 3 months ago.
-
Author
-
Hi I have two grids as follows
<script type=”text/javascript”>
$(document).ready(function(){
var data = {{evtx_data|safe}};var source =
{
localdata: data,
datatype: “json”,
datafields:
[
{ name: ‘evidence’, map: ‘fields>evidence’, type: ‘string’ },
{ name: ‘created_timestamp’, map: ‘fields>created_timestamp’, type: ‘date’ },
{ name: ‘timestamp_desc’, map: ‘fields>timestamp_desc’, type: ‘string’ },
{ name: ‘filename’, map: ‘fields>filename’, type: ‘string’ },
{ name: ‘file_path’, map: ‘fields>file_path’, type: ‘string’ },
{ name: ‘record_number’, map: ‘fields>record_number’, type: ‘stirng’ },
{ name: ‘orig_filename_lagacy’, map: ‘fields>orig_filename_lagacy’, type: ‘string’ },
{ name: ‘computer_name’, map: ‘fields>drive_letter’, type: ‘string’ },
{ name: ‘user_sid’, map: ‘fields>user_sid’, type: ‘string’ },{ name: ‘event_identifier’, map: ‘fields>event_identifier’, type: ‘string’ },
{ name: ‘event_level’, map: ‘fields>event_level’, type: ‘string’ },
{ name: ‘event_category’, map: ‘fields>event_category’, type: ‘string’ },
{ name: ‘event_name’, map: ‘fields>event_name’, type: ‘string’ },
{ name: ‘strings’, map: ‘fields>strings’, type: ‘string’ },
{ name: ‘xml_string’, map: ‘fields>xml_string’, type: ‘string’ },
{ name: ‘vss’, map: ‘fields>vss’, type: ‘string’ },],
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1350,
height:450,
source: dataAdapter,
altrows: true,
sortable: true,
groupable: true,
columnsresize: true,
selectionmode: ‘multiplecellsextended’,
columns:
[
{ text: ‘Evidence’, columntype: ‘textbox’, datafield: ‘evidence’, width: 130 },
{ text: ‘Created’, columntype: ‘textbox’, datafield: ‘created_timestamp’, width: 90 },
{ text: ‘Timestamp Description’, columntype: ‘textbox’, datafield: ‘timestamp_desc’, width: 60 },
{ text: ‘File Name’, columntype: ‘textbox’, datafield: ‘filename’, width: 130},{ text: ‘File Path ‘, columntype: ‘textbox’, datafield: ‘file_path’, width: 100 },
{ text: ‘Record Number’, columntype: ‘textbox’, datafield: ‘record_number’, width: 60 },
{ text: ‘computer Name’, columntype: ‘textbox’, datafield: ‘computer_name’, width: 60 },
{ text: ‘User Sid ‘, columntype: ‘textbox’, datafield: ‘user_sid’, width: 70 },{ text: ‘Event Identifier’, columntype: ‘textbox’, datafield: ‘event_identifier’, width: 70 },
{ text: ‘Event Level’, columntype: ‘textbox’, datafield: ‘event_level’, width: 70 },
{ text: ‘Event Category’, columntype: ‘textbox’, datafield: ‘event_category’, width: 70 },
{ text: ‘Event Name’, columntype: ‘textbox’, datafield: ‘event_name’, width: 70 },
{ text: ‘Strings’, columntype: ‘textbox’, datafield: ‘strings’, width: 70 },
{ text: ‘Xml String’, datafield: ‘xml_string’, cellsalign: ‘right’, cellsformat: ‘n2’ }
]
});
$(“#excelExport”).jqxButton({ theme: theme });
$(“#xmlExport”).jqxButton({ theme: theme });
$(“#csvExport”).jqxButton({ theme: theme });
$(“#tsvExport”).jqxButton({ theme: theme });
$(“#htmlExport”).jqxButton({ theme: theme });
$(“#jsonExport”).jqxButton({ theme: theme });
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
$(“#tsvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘tsv’, ‘jqxGrid’);
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘jqxGrid’);
});
$(“#jsonExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’, ‘jqxGrid’);
});
});</script>
</head>
<body>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float:left;margin-left: 5px;”>
<div id=’jqxgrid’ style=width:100%></div>
<div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<br /><br />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
<br /><br />
<input type=”button” value=”Export to TSV” id=’tsvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to HTML” id=’htmlExport’ />
<br /><br />
<input type=”button” value=”Export to JSON” id=’jsonExport’ />
</div>
</div>
</div>and another
<script type=”text/javascript”>
$(document).ready(function(){
var data = {{evt_data|safe}};var source =
{
localdata: data,
datatype: “json”,
datafields:
[
{ name: ‘evidence’, map: ‘fields>evidence’, type: ‘string’ },
{ name: ‘created_timestamp’, map: ‘fields>created_timestamp’, type: ‘date’ },
{ name: ‘timestamp_desc’, map: ‘fields>timestamp_desc’, type: ‘string’ },
{ name: ‘filename’, map: ‘fields>filename’, type: ‘string’ },
{ name: ‘file_path’, map: ‘fields>file_path’, type: ‘string’ },
{ name: ‘record_number’, map: ‘fields>record_number’, type: ‘stirng’ },{ name: ‘computer_name’, map: ‘fields>drive_letter’, type: ‘string’ },
{ name: ‘source_name’, map: ‘fields>source_name’, type: ‘string’ },{ name: ‘event_identifier’, map: ‘fields>event_identifier’, type: ‘string’ },
{ name: ‘event_type_string’, map: ‘fields>event_type_string’, type: ‘string’ },
{ name: ‘event_category’, map: ‘fields>event_category’, type: ‘string’ },{ name: ‘strings’, map: ‘fields>strings’, type: ‘string’ },
{ name: ‘vss’, map: ‘fields>vss’, type: ‘string’ },],
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1350,
height:450,
source: dataAdapter,
altrows: true,
sortable: true,
groupable: true,
columnsresize: true,
selectionmode: ‘multiplecellsextended’,
columns:
[
{ text: ‘Evidence’, columntype: ‘textbox’, datafield: ‘evidence’, width: 130 },
{ text: ‘Created’, columntype: ‘textbox’, datafield: ‘created_timestamp’, width: 90 },
{ text: ‘Timestamp Description’, columntype: ‘textbox’, datafield: ‘timestamp_desc’, width: 60 },
{ text: ‘File Name’, columntype: ‘textbox’, datafield: ‘filename’, width: 130},{ text: ‘File Path ‘, columntype: ‘textbox’, datafield: ‘file_path’, width: 100 },
{ text: ‘Record Number’, columntype: ‘textbox’, datafield: ‘record_number’, width: 60 },
{ text: ‘computer Name’, columntype: ‘textbox’, datafield: ‘computer_name’, width: 60 },
{ text: ‘source name ‘, columntype: ‘textbox’, datafield: ‘source_name’, width: 70 },{ text: ‘Event Identifier’, columntype: ‘textbox’, datafield: ‘event_identifier’, width: 70 },
{ text: ‘Event Category’, columntype: ‘textbox’, datafield: ‘event_category’, width: 70 },
{ text: ‘Event type string’, columntype: ‘textbox’, datafield: ‘event_type_string’, width: 70 },{ text: ‘Strings’, datafield: ‘strings’, cellsalign: ‘right’, cellsformat: ‘n2’ }
]
});
$(“#excelExport”).jqxButton({ theme: theme });
$(“#xmlExport”).jqxButton({ theme: theme });
$(“#csvExport”).jqxButton({ theme: theme });
$(“#tsvExport”).jqxButton({ theme: theme });
$(“#htmlExport”).jqxButton({ theme: theme });
$(“#jsonExport”).jqxButton({ theme: theme });
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
$(“#tsvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘tsv’, ‘jqxGrid’);
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘jqxGrid’);
});
$(“#jsonExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’, ‘jqxGrid’);
});
});</script>
</head>
<body>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float:left;margin-left: 5px;”>
<div id=’jqxgrid’ style=width:100%></div>
<div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<br /><br />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
<br /><br />
<input type=”button” value=”Export to TSV” id=’tsvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to HTML” id=’htmlExport’ />
<br /><br />
<input type=”button” value=”Export to JSON” id=’jsonExport’ />
</div>
</div>
</div>someone please help.what modifiacations should i make to be able to show both grids in the same HTML page
Hello josh,
Just change one of the grid’s id (e.g. from jqxgrid to jqxgrid2) and do the same for all variables with the same name (e.g. from dataAdapter to dataAdapter2). Then put both code pieces in one page. There should be no issues as long as you do not have any conflicting ids/variables.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/thanks dimitar,
do i have to change the body div ids for example <div jqxgrid> to <div jqxgrid1> ?Hi josh,
All ids in a web page have to be be unique, thus you will have to change the div ids in the HTML code and their references in the script.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I tried it by changing stuff as suggested by Dimitar. But not succeed. I am pasting code here for your reference..
Divisions to display grids. This gets visible as relevant controls gets focus on page.
<div id=’jqxWidget’ style=”width:100%”>
<div id=”Items” style=”display:none;height:50%; background-color:Aqua”>
<div id=”jqxItemGrid”></div>
</div>
<div id=”Supp” style=”display:none;height:50%; background-color:Blue”>
<div id=”jqxSuppGrid”></div>
</div>
</div>Script to load supplier grid on <div ID=’Supp’>
<script type=”text/javascript”>
$(document).ready(function()
{
var ItemUrl = ‘data/ItemList.txt’;
var sourceI =
{
datatype: “csv”,
datafields: [
{ name: ‘MCode’, type: ‘string’ },
{ name: ‘SDesc’, type: ‘string’ },
{ name: ‘MName’, type: ‘string’ }
],
url: ItemUrl
};
var ItemDA = new $.jqx.dataAdapter(sourceI);
$(“#jqxItemGrid”).jqxGrid(
{
width: 500,
height: 300,
source: ItemDA,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlerow’,
rowsheight: 20,
columns: [
{ text: ‘Material Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘MName’, width: 300 },
{ text: ‘Short Desc’, filtertype: ‘none’, datafield: ‘SDesc’, width: 120 },
{ text: ‘Code’, filtertype: ‘none’, datafield: ‘MCode’, width: 60, visible: ‘false’ }
]
});
$(‘#jqxItemGrid’).on(‘rowclick’, function(event) {
var ItemData = $(‘#jqxItemGrid’).jqxGrid(‘getrowdata’, event.args.rowindex);
document.getElementById(“<%= txtMatCode.ClientID %>”).value = ItemData.MCode;
document.getElementById(“<%= txtMatName.ClientID %>”).value = ItemData.MName;
});
$(‘#clrItemFilter’).jqxButton({ height: 25 });
$(‘#clrItemFilter’).click(function() {
$(“#jqxItemGrid”).jqxGrid(‘clearfilters’);
});
});
</script>Script to load Items grid in <div id=’Items’>
<script type=”text/javascript”>
$(document).ready(function() {
var SuppUrl = ‘data/SuppList.txt’;
var sourceS =
{
datatype: “csv”,
datafields: [
{ name: ‘SCode’, type: ‘string’ },
{ name: ‘SName’, type: ‘string’ }
],
url: SuppUrl
};
var SuppDA = new $.jqx.dataAdapter(sourceS);$(“#jqxSuppGrid”).jqxGrid(
{
width: 500,
height: 300,
source: SuppDA,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlerow’,
rowsheight: 20,
columns: [
{ text: ‘Supplier Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘SName’, width: 300 },
{ text: ‘Code’, filtertype: ‘none’, datafield: ‘SCode’, width: 60, visible: ‘false’ }
]
});$(‘#jqxSuppGrid’).on(‘rowclick’, function(event) {
var SuppData = $(‘#jqxSuppGrid’).jqxGrid(‘getrowdata’, event.args.rowindex);
//alert(data.MName + ” ” + data.MCode);
document.getElementById(“<%= txtAcCode.ClientID %>”).value = SuppData.SCode;
document.getElementById(“<%= txtSupp.ClientID %>”).value = SuppData.SName;
alert(ItemDA.toString);
});
$(‘#clrSuppFilter’).jqxButton({ height: 25 });
$(‘#clrSuppFilter’).click(function() {
$(“#jqxSuppGrid”).jqxGrid(‘clearfilters’);
});
});
</script>Right now the supplier grid is displaying correctly but not the Item Grid.
But if I change the order of script i.e. if I write Item Grid script first
Item Grid will be display correctly but not the Supplier grid..Hello Amar Kansara,
Please put both grids’ initialization code in a single script tag and a single $(document).ready() and move the script to the header of your page.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
Thanks for prompt reply, I actually have did it already, without result. I even have merge the code of both script into one. But same result.
FYI: Earlier I was using this on content page called from Master page. May be this could be the problem.
Later I tried with individual page, result is still same;
Hello Dimitar,
I got the solution. I find out that the clearfilters is causing the problem. I commented the area from both grid script as if I don’t need clear filter buttons on each columns.
// $(‘#clrItemFilter’).jqxButton({ height: 25 });
// $(‘#clrItemFilter’).click(function() {
// $(“#jqxItemGrid”).jqxGrid(‘clearfilters’);
// });// $(‘#clrSuppFilter’).jqxButton({ height: 25 });
// $(‘#clrSuppFilter’).click(function() {
// $(“#jqxSuppGrid”).jqxGrid(‘clearfilters’);
// });Thanks and best regards
Amar -
AuthorPosts
You must be logged in to reply to this topic.