Skip to content
Related Articles

Related Articles

How to design combogrids using jQuery EasyUI ?
  • Last Updated : 17 Dec, 2020

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design combogrids. Combogrids are the combination of both editable input boxes with a dropdown grid panel.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Example 1: The following code demonstrates the basic combogrid using jQuery EasyUI plugin.

html






<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
            maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI ComboGrid</h2>
      
<p>Click the dropdown arrow to show the data.</p>
  
    <div style="margin:20px 0"></div>
  
    <div class="easyui-panel" style="width:100%; 
        max-width:400px; padding:30px 60px;">
          
        <div style="margin-bottom:20px">
            <select class="easyui-combogrid" 
                style="width:100%" data-options="
                    panelWidth: 600,                    
                    panelMinWidth: '50%',
                    idField: 'studentid',
                    textField: 'studentname',
                    url: 'datafile.json',
                    method: 'get',
                    value: 'ST-1',/*Initialize value*/
                    columns: [[{
                        field: 'studentid',
                        title: 'Student ID',
                        width: 100
                    },
                    {
                        field: 'studentname',
                        title: 'Name',
                        width: 120
                    },
                    {
                        field: 'age',
                        title: 'Age',
                        width: 80,
                        align: 'right'
                    },
                    {
                        field: 'marksscored',
                        title: 'Marks',
                        width: 150,
                        align: 'center'
                    },                        
                    {
                        field: 'gender',
                        title: 'Gender',
                        width: 60,
                        align: 'center'
                    }]],
                    fitColumns: true,
                    label: 'Select Student:',
                    labelPosition: 'top'
                ">
            </select>
        </div>
    </div>
</body>
  
</html>

datafile.json The following is the code for the “datafile.json” file used in all the examples.

{"total":10,"rows":[
    {"studentname":"Komal","age":10,"gender":"F",
      "marksscored":365,"studentid":"ST-1"},
    {"studentname":"Dalton","age":12,"gender":"M",
      "marksscored":185,"studentid":"ST-10"},
    {"studentname":"Rakesh","age":12,"gender":"M",
      "marksscored":385,"studentid":"ST-11"},
    {"studentname":"Ram","age":12,"gender":"M",
      "marksscored":265,"studentid":"ST-12"},
    {"selected":true,"studentname":"Ila","age":12,"gender":"P",
       "marksscored":355,"studentid":"ST-13"},
    {"studentname":"Manika","age":12,"gender":"F",
       "marksscored":158,"studentid":"ST-14"},
    {"studentname":"Madhavi","age":12,"gender":"F",
       "marksscored":456,"studentid":"ST-15"},
    {"studentname":"Preity","age":12,"gender":"M",
       "marksscored":235,"studentid":"ST-16"},
    {"studentname":"Parul","age":12,"gender":"F",
       "marksscored":564,"studentid":"ST-17"},
    {"studentname":"Amar","age":19,"gender":"F",
       "marksscored":638,"studentid":"ST-18"}
]}

Output: 

  • Basic output: 

  • Combogrid with initial value: 
     

  • Combogrid execution: 
     

 

Example 2: The following example demonstrates basic actions related to combogrid.

 

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
          
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI ComboGrid</h2>
      
<p>Click the buttons to perform some actions.</p>
  
  
    <div class="easyui-panel" style="width: 100%;
        max-width: 400px; padding: 30px 60px;">
        <div style="margin-bottom:20px">
  
            <input id="combogridID" 
                class="easyui-combogrid" 
                style="width:100%" data-options="
                    panelWidth: 600,
                    idField: 'studentid',
                    textField: 'studentname',
                    url: 'datafile.json',
                    method: 'get',
                    columns: [[
                    {
                        field: 'studentid',
                        title: 'Student ID',
                        width: 100
                    },
                    {
                        field: 'studentname',
                        title: 'Name',
                        width: 120
                    },
                    {
                        field: 'age',
                        title: 'Age',
                        width: 80,
                        align: 'right'
                    },
                    {
                        field: 'marksscored',
                        title: 'Marks',
                        width: 150,
                        align: 'center'
                    },                        
                    {
                        field: 'gender',
                        title: 'Gender',
                        width: 60,
                        align: 'center'
                    }
                    ]],
                    fitColumns: true,
                    label: 'Select Student:',
                    labelPosition: 'top'
                ">
        </div>
    </div>
    <div style="margin:20px 0">
        <div style="margin:20px 0">
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="getValue()">
                GetValue
            </a>
  
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="setValue()">
                SetValue
            </a>
              
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="setCustomValue()">
                Set Custom Value
            </a>
              
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="disable()">
                Disable
            </a>
              
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="enable()">
                Enable
            </a>
        </div>
  
        <div id="getValueResult"></div>
    </div>
  
    <script type="text/javascript">
  
        /* To set and get value */
        function getValue() {
            var val = $('#combogridID').combogrid('getValue');
            $('#getValueResult').html(val + " is set");
        }
        function setValue() {
            $('#combogridID').combogrid('setValue', 'ST-14');
        }
        function setCustomValue() {
            $('#combogridID').combogrid('setValue', {
                studentid: 'ST-19',
                studentname: 'Pari'
            });
        }
  
        /* To disable the combogrid */
        function disable() {
            $('#combogridID').combogrid('disable');
        }
  
        /* To enable the combogrid */
        function enable() {
            $('#combogridID').combogrid('enable');
        }
    </script>
</body>
  
</html>

Output: 

  • Basic Screen: 

  • Action demonstration: 
     

  • Custom setting: 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :