Custom Elements

Show Demo List

Theme:

Demo
View Source
API Reference

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element Row Details</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script type="text/javascript">        var data = new Array();        var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];        var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];        var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];        var titleofcourtesy = ["Ms.", "Dr.", "Ms.", "Mrs.", "Mr.", "Mr.", "Mr.", "Ms.", "Ms."];        var birthdate = ["08-Dec-48", "19-Feb-52", "30-Aug-63", "19-Sep-37", "04-Mar-55", "02-Jul-63", "29-May-60", "09-Jan-58", "27-Jan-66"];        var hiredate = ["01-May-92", "14-Aug-92", "01-Apr-92", "03-May-93", "17-Oct-93", "17-Oct-93", "02-Jan-94", "05-Mar-94", "15-Nov-94"];        var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];        var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];        var postalcode = ["98122", "98401", "98033", "98052", "SW1 8JR", "EC2 7JR", "RG1 9SP", "98105", "WG2 7LT"];        var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];        var homephone = ["(206) 555-9857", "(206) 555-9482", "(206) 555-3412", "(206) 555-8122", "(71) 555-4848", "(71) 555-7773", "(71) 555-5598", "(206) 555-1189", "(71) 555-4444"];        var notes = ["Education includes a BA in psychology from Colorado State University in 1970.  She also completed 'The Art of the Cold Call.'  Nancy is a member of Toastmasters International.",            "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.",            "Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.",            "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.",            "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses 'Successful Telemarketing' and 'International Sales Management.'  He is fluent in French.",            "Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses 'Multi-Cultural Selling' and 'Time Management for the Sales Professional.'  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.",            "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled 'Selling in Europe,' he was transferred to the London office in March 1993.",            "Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.",            "Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German."];        var k = 0;        for (var i = 0; i < firstNames.length; i++) {            var row = {};            row["firstname"] = firstNames[k];            row["lastname"] = lastNames[k];            row["title"] = titles[k];            row["titleofcourtesy"] = titleofcourtesy[k];            row["birthdate"] = birthdate[k];            row["hiredate"] = hiredate[k];            row["address"] = address[k];            row["city"] = city[k];            row["postalcode"] = postalcode[k];            row["country"] = country[k];            row["homephone"] = homephone[k];            row["notes"] = notes[k];            data[i] = row;            k++;        }        var source =        {            localData: data,            dataType: "array"        };        // initialize the row details.        var initRowDetails = function (id, row, element, rowinfo) {            var tabsdiv = null;            var information = null;            var notes = null;            // update the details height.            rowinfo.detailsHeight = 200;            element.append(JQXLite("<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'>Title</li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>"));            tabsdiv = JQXLite(element.children()[0]);            if (tabsdiv != null) {                information = tabsdiv.find('.information');                notes = tabsdiv.find('.notes');                var title = tabsdiv.find('.title');                title.text(row.firstname);                var container = JQXLite('<div style="margin: 5px;"></div>')                container.appendTo(JQXLite(information));                var photocolumn = JQXLite('<div style="float: left; width: 15%;"></div>');                var leftcolumn = JQXLite('<div style="float: left; width: 45%;"></div>');                var rightcolumn = JQXLite('<div style="float: left; width: 40%;"></div>');                container.append(photocolumn);                container.append(leftcolumn);                container.append(rightcolumn);                var photo = JQXLite("<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>");                var image = JQXLite("<div style='margin-top: 10px;'></div>");                var imgurl = '../images/' + row.firstname.toLowerCase() + '.png';                var img = JQXLite('<img height="60" src="' + imgurl + '"/>');                image.append(img);                image.appendTo(photo);                photocolumn.append(photo);                var firstname = "<div style='margin: 10px;'><b>First Name:</b> " + row.firstname + "</div>";                var lastname = "<div style='margin: 10px;'><b>Last Name:</b> " + row.lastname + "</div>";                var title = "<div style='margin: 10px;'><b>Title:</b> " + row.title + "</div>";                var address = "<div style='margin: 10px;'><b>Address:</b> " + row.address + "</div>";                JQXLite(leftcolumn).append(firstname);                JQXLite(leftcolumn).append(lastname);                JQXLite(leftcolumn).append(title);                JQXLite(leftcolumn).append(address);                var postalcode = "<div style='margin: 10px;'><b>Postal Code:</b> " + row.postalcode + "</div>";                var city = "<div style='margin: 10px;'><b>City:</b> " + row.city + "</div>";                var phone = "<div style='margin: 10px;'><b>Phone:</b> " + row.homephone + "</div>";                var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + row.hiredate + "</div>";                JQXLite(rightcolumn).append(postalcode);                JQXLite(rightcolumn).append(city);                JQXLite(rightcolumn).append(phone);                JQXLite(rightcolumn).append(hiredate);                var notescontainer = JQXLite('<div style="white-space: normal; margin: 5px;"><span>' + row.notes + '</span></div>');                JQXLite(notes).append(notescontainer);                JQXLite(tabsdiv).jqxTabs({ width: 820, height: 170 });            }        }        JQXElements.settings["dataTableSettings"] =        {            source: new jqx.dataAdapter(source),            pageable: true,            pageSize: 3,            rowDetails: true,            sortable: true,            ready: function () {                // expand the first details.                document.querySelectorAll('jqx-data-table')[0].showDetails(0);            },            initRowDetails: initRowDetails,            columns: [                  { text: 'First Name', dataField: 'firstname', width: 200 },                  { text: 'Last Name', dataField: 'lastname', width: 200 },                  { text: 'Title', dataField: 'title', width: 200 },                  { text: 'City', dataField: 'city', width: 100 },                  { text: 'Country', dataField: 'country' }            ]        }    </script></head><body>    <div class="example-description">        This demo illustrates the Row Details functionality of the Datatable custom element.    </div>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

altRows boolean false

Sets or gets the altRows property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,altRows:true, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

autoRowHeight boolean true

Sets or gets the autoRowHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoRowHeight:false, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

aggregatesHeight number 34

Sets or gets the aggregatesHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,aggregatesHeight:40, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

autoShowLoadElement boolean true

Sets or gets the autoShowLoadElement property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoShowLoadElement:false, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsHeight number 30

Sets or gets the columnsHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,columnsHeight:20, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columns array []

Sets or gets the columns property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnGroups array []

Sets or gets the columnGroups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", columnGroups:columnGroups		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsResize boolean false

Sets or gets the columnsResize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsReorder boolean false

Sets or gets the columnsReorder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",columnsReorder:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",disabled:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

editable boolean false

Sets or gets the editable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",editable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

editSettings object { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }

Sets or gets the editSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", editSettings:"editSettings"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

exportSettings object { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"}

Sets or gets the exportSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", exportSettings:"exportSettings"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

enableHover boolean true

Sets or gets the enableHover property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",enableHover:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

enableBrowserSelection boolean false

Sets or gets the enableBrowserSelection property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",enableBrowserSelection:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterable boolean false

Sets or gets the filterable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterHeight number 30

Sets or gets the filterHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterHeight:35,filterable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterMode string "default"

Sets or gets the filterMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterable:true, filterMode:"advanced"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

groups array []

Sets or gets the groups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", groups:'['firstname']'		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

groupsRenderer function null

Sets or gets the groupsRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", groupsRenderer:"groupsRenderer"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",height:350		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

initRowDetails function null

Sets or gets the initRowDetails property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", initRowDetails:"initRowDetails"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

incrementalSearch boolean true

Sets or gets the incrementalSearch property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",incrementalSearch:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

localization object default localization strings.

Sets or gets the localization property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", localization:"localization"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerHeight number 28

Sets or gets the pagerHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",pagerHeight:35		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSize number 10

Sets or gets the pageSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",pageSize:15		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSizeOptions array ['5', '10', '20']

Sets or gets the pageSizeOptions property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pageSizeOptions:'[15, 25, 35]'		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageable boolean false

Sets or gets the pageable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerPosition string "bottom"

Sets or gets the pagerPosition property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerPosition:"top"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerMode string "default"

Sets or gets the pagerMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerMode:"advanced"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerButtonsCount number 5

Sets or gets the pagerButtonsCount property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerRenderer function null

Sets or gets the pagerRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerRenderer:"pagerRenderer"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

ready function null

Sets or gets the ready property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", ready:"ready"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowDetails boolean false

Sets or gets the rowDetails property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",rowDetails:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

renderToolbar function null

Sets or gets the renderToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", renderToolbar:"renderToolbar"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

renderStatusbar function null

Sets or gets the renderStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", renderStatusbar:"renderStatusbar"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rendering function null

Sets or gets the rendering property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", rendering:"rendering"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rendered function null

Sets or gets the rendered property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", rendered:"rendered"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",rtl:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

source object null

Sets or gets the source property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sortable boolean false

Sets or gets the sortable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",sortable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showAggregates boolean false

Sets or gets the showAggregates property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showAggregates:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showToolbar boolean false

Sets or gets the showToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showToolbar:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showStatusbar boolean false

Sets or gets the showStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showStatusbar:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

statusBarHeight number 34

Sets or gets the statusBarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",statusBarHeight:40		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

scrollBarSize number 17

Sets or gets the scrollBarSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",scrollBarSize:20		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

selectionMode string "multipleRows"

Sets or gets the selectionMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", selectionMode:"singleRow"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

serverProcessing boolean false

Sets or gets the serverProcessing property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",serverProcessing:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showHeader boolean true

Sets or gets the showHeader property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showHeader:false		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

toolbarHeight number 34

Sets or gets the toolbarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",toolbarHeight:40		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

bindingComplete Event

Code examples

Bind to the bindingComplete event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("bindingComplete", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellBeginEdit Event

Code examples

Bind to the cellBeginEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellBeginEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellEndEdit Event

Code examples

Bind to the cellEndEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellEndEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellValueChanged Event

Code examples

Bind to the cellValueChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellValueChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnResized Event

Code examples

Bind to the columnResized event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("columnResized", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnReordered Event

Code examples

Bind to the columnReordered event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("columnReordered", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sort Event

Code examples

Bind to the sort event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("sort", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filter Event

Code examples

Bind to the filter event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("filter", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageChanged Event

Code examples

Bind to the pageChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("pageChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSizeChanged Event

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("pageSizeChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowClick Event

Code examples

Bind to the rowClick event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowClick", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowDoubleClick Event

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowDoubleClick", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowSelect Event

Code examples

Bind to the rowSelect event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowSelect", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowUnselect Event

Code examples

Bind to the rowUnselect event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowUnselect", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowBeginEdit Event

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowBeginEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowEndEdit Event

Code examples

Bind to the rowEndEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowEndEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowExpand Event

Code examples

Bind to the rowExpand event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowExpand", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowCollapse Event

Code examples

Bind to the rowCollapse event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowCollapse", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

addRow Method

Parameter	Type	Description
rowIndex	number
rowData	object
rowPosition	string	"last" and "first". By default "last" is used

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").addRow(10,{},'first');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

addFilter Method

Parameter	Type	Description
dataField	string
filerGroup	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").addFilter('firstName',new $.jqx.filtergroup());								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

applyFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").applyFilters();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginUpdate();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginRowEdit Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginRowEdit(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginCellEdit Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginCellEdit(10,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clearSelection Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clearSelection();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clearFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clearFilters();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clear Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clear();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").destroy();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

deleteRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").deleteRow(0);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endUpdate();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

ensureRowVisible Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").ensureRowVisible(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endRowEdit Method

Parameter	Type	Description
rowIndex	number
cancelChanges	boolean

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endRowEdit(10,true);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endCellEdit Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endCellEdit(10,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

exportData Method

Parameter	Type	Description
exportDataType	string	'xls', 'html', 'xml', 'json', 'csv', 'tsv' or 'pdf'

Return Value
Object(optional)

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").exportData('xls');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").focus();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").getColumnProperty('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToPage Method

Parameter	Type	Description
pageIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToPage(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToPrevPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToPrevPage();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToNextPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToNextPage();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getSelection Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getSelection();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getRows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getRows();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getView Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getView();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getCellValue Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").getCellValue(1,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

hideColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").hideColumn('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

hideDetails Method

Parameter	Type	Description
rowIndex	boolean

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").hideDetails(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

isBindingCompleted Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").isBindingCompleted();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

lockRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").lockRow(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").refresh();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").render();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

removeFilter Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").removeFilter(firstName);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

scrollOffset Method

Parameter	Type	Description
top	number
left	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").scrollOffset(10,0);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

setColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string
propertyValue	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").setColumnProperty('firstName','text','New Text');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").showColumn('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

selectRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").selectRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showDetails Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").showDetails(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

setCellValue Method

Parameter	Type	Description
rowIndex	number
dataField	string
value	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").setCellValue(1,'firstName','New Value');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sortBy Method

Parameter	Type	Description
dataField	string
sortOrder	string	'asc', 'desc' or null

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").sortBy('firstNmae','asc');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updating Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").updating();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updateBoundData Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").updateBoundData();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

unselectRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").unselectRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updateRow Method

Parameter	Type	Description
rowIndex	number
rowData	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").updateRow(1,{});								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

unlockRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").unlockRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods