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 9 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Display two grids in one page #48691

    josh
    Participant

    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

    Display two grids in one page #48696

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Display two grids in one page #48700

    josh
    Participant

    thanks dimitar,
    do i have to change the body div ids for example <div jqxgrid> to <div jqxgrid1> ?

    Display two grids in one page #48719

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Display two grids in one page #57785

    Amar Kansara
    Participant

    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..

    Display two grids in one page #57787

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Display two grids in one page #57791

    Amar Kansara
    Participant

    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;

    Display two grids in one page #57795

    Amar Kansara
    Participant

    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

    • This reply was modified 9 years, 7 months ago by  Amar Kansara.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.