jQWidgets Forums

Tagged: datagrid toolbar, jqwidgets datagrid toolbar, jqwidgets grid toolbar

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

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

Author

grid toolbar custom menu Posts

June 28, 2014 at 7:57 am grid toolbar custom menu #56519

Participant

hi
I wanted to make this example
http://jsfiddle.net/_stephan_/Q92wz/2/
But settings menu does not seem to work
I’am used version : 3.3.0

thank you

<!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/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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.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/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
var myTable = $('<div id="myTable"></div>')
$('#myApp').append(myTable);

var source = {
    localdata: [
        ["Alfreds Futterkiste", "Maria Anders"],
        ["Ana Trujillo Emparedados y helados", "Ana Trujillo"],
        ["Antonio Moreno Taquera", "Antonio Moreno"],
        ["Around the Horn", "Thomas Hardy"],
        ["Berglunds snabbkp", "Christina Berglund"],
        ["Blauer See Delikatessen", "Hanna Moos"],
        ["Blondesddsl pre et fils", "Frdrique Citeaux"]
    ],
    datafields: [{
        name: 'Company',
        map: '1',
    }, {
        name: 'Contact',
        map: '0',
    }],
    datatype: "array"
};

myTable.jqxGrid({
    width: "100%",
    height: "100%",
    columnsresize: true,
    sortable: true,
  
    pageable: true,
    source: new $.jqx.dataAdapter(source),
    columns: [{
        text: 'Company Name',
        datafield: 'Company',
        width: 250
    }, {
        text: 'Contact Name',
        datafield: 'Contact',
        width: 180
    }]
});

createToolbar(myTable, false);

function createToolbar(myTable, showSearch) {
   
	var toolbarId = 'myToolbar';
    var settingsId = toolbarId + '_settings';
    var colsDef = myTable.jqxGrid('columns').records;
    var settings, checkbox;

    // increase table pager height to make room for the toolbar
    myTable.jqxGrid('pagerheight', 38);

    // create HTML markup for the toolbar with a settings button and a table filtering input control
    var toolbarList = $('<ul />');
    mToolbar = $('<div id="' + toolbarId + '" class="gridToolbar" />');
    mToolbar.append(toolbarList);

    // add settings menu to the toolbar
    toolbarList.append('<li id="' + settingsId + '" style="padding: 1px 4px;">' + 'Settings...' + '<ul style="width:440px">' + '<div class="gridSettingsHeader"><b>Show/Hide Columns</b></div>' + '</ul>' + '</li>');

    // addd filtering input to the toolbar, add an 'X' shaped clear button
    if (showSearch) {
        toolbarList.append('<li style="position:relative;list-style: none; margin: 0;" ignoretheme="true">' + '<input class="toolbarSearchInput" />' + '</li>');
    }

    // Add one checkbox to settings menu for each column that can be shown/hidden
    settings = mToolbar.find('#' + settingsId + ' ul');
    for (var idx = 0; idx < colsDef.length; idx++) {
        if (colsDef[idx].filterable == true) {
            // create checkbox HTML markup
            checkbox = $('<div style="float:left;margin-left: 10px;text-overflow:ellipsis;overflow:hidden" df="' + colsDef[idx].datafield + '">' + colsDef[idx].text + '</div>');
            settings.append(checkbox);
            // convert it into jqx checkbox
            checkbox.jqxCheckBox({
                width: 130,
                height: 25,
                checked: (colsDef[idx].hidden != true)
            });
            // register the on-change handler for toggling column visibility
            checkbox.on('change', function (event) {
                if (event.args.checked) {
                    myTable.jqxGrid('showcolumn', $(this).attr('df'));
                } else {
                    myTable.jqxGrid('hidecolumn', $(this).attr('df'));
                }
            });
        }
    }

    // add the toolbar to the data table
    myTable.find('.jqx-grid-pager').append(mToolbar);
    mToolbar.jqxMenu({
        width: (showSearch ? 250 : 100),
        height: 28,
        autoOpen: false
    });
    mToolbar.jqxMenu('setItemOpenDirection', settingsId, 'right', 'up');
    mToolbar.jqxMenu('showTopLevelArrows', false);
    mToolbar.find('input').jqxInput({
        placeHolder: "Search",
        height: 22,
        width: 140
    });
}
    
            
        });
    </script>
	
	<style>
	body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 10px;
    left: 8px;
    bottom: 10px;
    right: 8px;
}
.gridToolbar {
    border: medium none;
    left: 4px;
    position: absolute;
    top: 6px;
}
.gridSettingsHeader {
    border-bottom: 1px solid rgb(200, 200, 200);
    margin: 2px 0px 8px 2px;
}
div.jqx-grid-pager input.toolbarSearchInput {
    font-size:12px;
    margin-left:20px;
    margin-top:1px;
    height: 20px;
}
	</style>
</head>
<body>
    <div id='myApp'>
        
       
    </div>
</body>
</html>

June 28, 2014 at 8:23 pm grid toolbar custom menu #56522

mustafa

Participant

I see this article

Note: To run a sample that includes data binding, you must open it via “http://…” protocol since Ajax makes http requests.

June 29, 2014 at 8:09 am grid toolbar custom menu #56526

Peter Stoev

Keymaster

Hi mustafa,

Toolbar is expected to be created in this way: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?arctic

Best Regards,
Peter Stoev

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

June 30, 2014 at 8:57 pm grid toolbar custom menu #56579

mustafa

Participant

hi peter
I did not understand you,Is there an error in the above code?
Or you Can you give me a sample code? ( html page )
thank you

July 1, 2014 at 6:16 am grid toolbar custom menu #56592

Peter Stoev

Keymaster

Hi mustafa,

Yes, there is issue in the code. The toolbar is not created correctly. Please, look at the demo I posted you which shows how this feature is expected to be turned on and used.

Best Regards,
Peter Stoev

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

July 1, 2014 at 6:44 am grid toolbar custom menu #56597

mustafa

Participant

hi peter
but Example you gave is not the same

http://jsfiddle.net/_stephan_/Q92wz/2/

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?arctic

July 1, 2014 at 6:49 am grid toolbar custom menu #56598

Peter Stoev

Keymaster

Hi mustafa,

The example I gave you shows how the Grid Toolbar is expected to be created. The example from this guy is some custom UI, not related to the Toolbar which is also not supported by us.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.