jQWidgets jqxGrid columnreordered Event
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxGrid is used to illustrate a jQuery widget that shows data in tabular form. Moreover, it renders full support for connecting with data, as well as paging, grouping, sorting, filtering, and editing.
The columnreordered event is activated whenever a column of a displayed jqxGrid is shifted to a different locale.
Syntax:
$("#Selector").on("columnreordered", function (event) {
// Arguments of the event
var args = event.args;
// Text of the column
var columnText = args.columntext;
// Data field of the column
var dataField = args.datafield;
// Index of the old column
var oldIndex = args.oldindex;
// Index of the new column
var newIndex = args.newindex;
});Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<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>
The below example illustrates the jqxGrid columnreordered event in jQWidgets.
Example:
HTML
<!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.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></head> <body> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h3>jQWidgets jqxGrid columnreordered Event </h3> <br /> <div id="jqxg"></div> <br /> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { var d = new Array(); var subjectNames = ["C++", "Scala", "Java", "C", "R", "JavaScript"]; var pageNumber = ["7", "8", "12", "11", "10", "19"]; for (var j = 0; j < 50; j++) { var r = {}; r["subjectnames"] = subjectNames[(Math.floor( Math.random() * subjectNames.length)) ]; r["pagenumber"] = pageNumber[(Math.floor( Math.random() * pageNumber.length)) ]; d[j] = r; } var src = { localdata: d, datatype: "array", }; var data_Adapter = new $.jqx.dataAdapter(src); $("#jqxg").jqxGrid({ source: data_Adapter, columnsreorder: true, theme: 'energyblue', height: "260px", width: "240px", columns: [ { text: "Subject Name", datafield: "subjectnames", width: "120px", }, { text: "Page No.", datafield: "pagenumber", width: "120px", }, ], }); $("#jqxg").on("columnreordered", function (event) { var ct = event.args.columntext; $('#log').text( "Text of reordered column: " + ct); }); }); </script></body> </html> |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm
Please Login to comment...