jQuery UI Widgets › Forums › Grid › How to hide jqxgrid after selecting a row for jqxdropdownbutton
Tagged: close, dropdownbutton, grid, jqxDropDownButton, jqxgrid, rowselect
This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 1 month ago.
-
Author
-
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.
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,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.