jQuery UI Widgets Forums Grid Export filter search to CVS

This topic contains 2 replies, has 2 voices, and was last updated by  nguyentran 10 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Export filter search to CVS #31153

    nguyentran
    Member

    Hi.
    i had make 1 demo same http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/statusbar.htm

    after click find
    i need export search value in gridview to tvs
    i had read http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/dataexport.htm
    but i need export searh value of girdview.
    Tks for help

    Export filter search to CVS #31165

    Dimitar
    Participant

    Hello nguyentran,

    The exportdata method successfully exports the filtered values of the grid. Here is a modified version of the Statusbar demo, which shows how to export the grid:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var getAdapter = function () {
    // prepare the data
    var data = generatedata(15);
    var source =
    {
    localdata: data,
    datatype: "array",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'available', type: 'bool' }
    ],
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    commit(true);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    return dataAdapter;
    }
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 680,
    source: getAdapter(),
    theme: theme,
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
    var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
    var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
    container.append(addButton);
    container.append(deleteButton);
    container.append(reloadButton);
    container.append(searchButton);
    statusbar.append(container);
    addButton.jqxButton({ theme: theme, width: 60, height: 20 });
    deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
    reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
    searchButton.jqxButton({ theme: theme, width: 50, height: 20 });
    // add new row.
    addButton.click(function (event) {
    var datarow = generatedata(1);
    $("#jqxgrid").jqxGrid('addrow', null, datarow[0]);
    });
    // delete selected row.
    deleteButton.click(function (event) {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('deleterow', id);
    });
    // reload grid data.
    reloadButton.click(function (event) {
    $("#jqxgrid").jqxGrid({ source: getAdapter() });
    });
    // search for a record.
    searchButton.click(function (event) {
    var offset = $("#jqxgrid").offset();
    $("#jqxwindow").jqxWindow('open');
    $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
    });
    },
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
    { text: 'Product', datafield: 'productname', width: 170 },
    { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
    { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    // create jqxWindow.
    $("#jqxwindow").jqxWindow({ resizable: false, theme: theme, autoOpen: false, width: 210, height: 180 });
    // create find and clear buttons.
    $("#findButton").jqxButton({ width: 70, theme: theme });
    $("#clearButton").jqxButton({ width: 70, theme: theme });
    // create dropdownlist.
    $("#dropdownlist").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
    source: [
    'First Name', 'Last Name', 'Product', 'Quantity', 'Price'
    ]
    });
    if (theme != "") {
    $("#inputField").addClass('jqx-input-' + theme);
    }
    // clear filters.
    $("#clearButton").click(function () {
    $("#jqxgrid").jqxGrid('clearfilters');
    });
    // find records that match a criteria.
    $("#findButton").click(function () {
    $("#jqxgrid").jqxGrid('clearfilters');
    var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
    var datafield = "";
    switch (searchColumnIndex) {
    case 0:
    datafield = "firstname";
    break;
    case 1:
    datafield = "lastname";
    break;
    case 2:
    datafield = "productname";
    break;
    case 3:
    datafield = "quantity";
    break;
    case 4:
    datafield = "price";
    break;
    }
    var searchText = $("#inputField").val();
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = searchText;
    var filtercondition = 'contains';
    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
    // apply the filters.
    $("#jqxgrid").jqxGrid('applyfilters');
    });
    $("#export").click(function () {
    var data = $("#jqxgrid").jqxGrid('exportdata', 'csv');
    });
    });
    </script>
    </head>
    <body class='default'>
    <button id="export">
    Export
    </button>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    <div id="jqxwindow">
    <div>
    Find Record</div>
    <div style="overflow: hidden;">
    <div>
    Find what:</div>
    <div style='margin-top: 5px;'>
    <input id='inputField' type="text" class="jqx-input" style="width: 200px; height: 23px;" />
    </div>
    <div style="margin-top: 7px; clear: both;">
    Look in:</div>
    <div style='margin-top: 5px;'>
    <div id='dropdownlist'>
    </div>
    </div>
    <div>
    <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Find"
    id="findButton" />
    <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Clear"
    id="clearButton" />
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Export filter search to CVS #31167

    nguyentran
    Member

    awwwn my bad, it work before i asked . thank u so much bro

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

You must be logged in to reply to this topic.