jQuery UI Widgets Forums Grid How to hide jqxgrid after selecting a row for jqxdropdownbutton

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 10 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • syedkhaleel2010
    Participant

    Hi Team,

    I am using jqxdropdownbutton with jqxgrid.
    My requirement is to hide jqx grid once user hase selected value for jqxdropdownbutton.
    Present after selecting a row from jqxgrid it is not hiding.I have click somewhere on the page to hide it.

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dropdowngrid.htm

    Please suggest ur solution for this.


    Nadezhda
    Participant

    Hello syedkhaleel2010,

    You can use ‘rowselect’ event (jqxGrid) and ‘close’ method (jqxDropDownButton) to implement your requirement. Please, find the following example which shows how do that:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 () {
                // prepare the data
                var data = generatedata(100);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxdropdownbutton").jqxDropDownButton({ width: 150, height: 25});
                $("#jqxgrid").jqxGrid(
                {
                    width: 550,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    columnsresize: true,
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                $("#jqxgrid").on('rowselect', function (event) {
                    var args = event.args;
                    var row = $("#jqxgrid").jqxGrid('getrowdata', args.rowindex);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                    $("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);
                });
                $('#jqxgrid').on('rowselect', function (event) {
                    $('#jqxdropdownbutton').jqxDropDownButton('close');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxdropdownbutton">
                <div style="border-color: transparent;" id="jqxgrid">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.