How to design combo grids using jQuery EasyUI?

jQuery EasyUI is a powerful and user-friendly JavaScript library that can be used to create various UI components, including combo grids. Combo grids are a combination of drop-down lists and data grids, which allow users to select data from a list with a grid-like interface.

In this article, we will go over the steps to design combo grids using jQuery EasyUI.


<!DOCTYPE html>
   <meta charset="UTF-8">
   <title>Combo Grids with jQuery EasyUI</title>
   <script src=""></script>
   <link rel="stylesheet" type="text/css" href="">
   <script type="text/javascript" src=""></script>
      #combo-grid {
         height: 300px;
         width: 500px;
      $(function() {
            url: '',
            type: 'GET',
            success: function(data) {
                  panelWidth: 500,
                  idField: 'id',
                  textField: 'email',
                  columns: [[
                     {field:'first_name',title:'First Name',width:100,align:'right'},
                     {field:'last_name',title:'Last Name',width:100,align:'right'}
                  onSelect: function(rowIndex, rowData) {
   <h1>Combo Grids with jQuery EasyUI</h1>
   <p>This example shows how to create a combo grid using jQuery EasyUI.</p>
   <div id="combo-grid"></div>


  • The code sets up a combo grid using the jQuery EasyUI library. The combo grid is a drop-down list with a grid-like interface, displaying data from a JSON file.

  • The grid has four columns: ID, Name, Price, and Quantity. When an item is selected from the grid, its data is logged to the console. The code imports the necessary JavaScript and CSS files from the EasyUI library and sets up some basic styling for the grid.


Designing combo grids using jQuery EasyUI is a simple and effective way to create user-friendly interfaces for selecting items from a list. By following the steps outlined in this article, you can create a customized combo grid that suits your needs. With jQuery EasyUI, you can add features such as styling, event listeners, and data sources to your combo grid, making it a powerful tool for web design.

Updated on: 17-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started