EnhanceDataGrid.js

© 2023 Zeikman

Introduction

EnhanceDataGrid (EDG) is a jQWidget' jqxGrid plugin that provides a set of features like, Data-filter-find, Display-row-numbering, Easy-to-update-datasource, Get-selected-row-data, and more. Those features are really useful, especially for web applications that require a lot of interaction with the user. EDG inherits all the properties from jqxGrid.

Please take note that jQWidget is NOT FREE FOR COMMERCIAL, read the licensing here.

Version : Beta v0.3.1

Features

  • Search Input Data Filter/Find
  • Useful Built-in Components Data reload button, delete button, and etc
  • Simple Data Binding Easy to defined JSON source
  • Useful Methods getSelectedRowData(), updateSourceUrl(), and etc

Dependencies

  • JSZIP - Necessary for jqxGrid Export (Excel)

Recommended Plugins

  • Font Awesome - Default button component's icon
  • jQuery-Confirm - Utilizes jQuery.confirm, jQuery.alert, and etc on grid's messaging
  • Bootstrap - Needed when setup useBootstrap:true which utilizes Boostrap Modal on grid's messaging

Get Started

Include EnhanceDataGrid library after jqxGrid library.

<link rel="stylesheet" href="path-to-jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="path-to-jqwidgets/jqwidgets/jqxgrid.js"></script>
<!-- ## Remember to include all jqxgrid related libraries and other necessary dependency libraries ## -->

<link rel="stylesheet" href="path-to-EnhanceDataGrid/EnhanceDataGrid.css" type="text/css" />
<script type="text/javascript" src="path-to-EnhanceDataGrid/EnhanceDataGrid.js"></script>

Default Functionality

Documentation
This example shows the basic syntax of EnhanceDataGrid. By default, EnhanceDataGrid displays the row number along with the aggregate Row Total.
jqxInput
jqxDateTimeInput
jqxCheckBox
Entertainment
Computers
Sports
jqxRadioButton
12 Months Contract
6 Months Contract
jqxComboBox
jqxTextArea