Skip to content
Related Articles

Related Articles

Improve Article

EasyUI jQuery combogrid widget

  • Last Updated : 06 Apr, 2021
Geek Week

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 a combogrid using jQuery EasyUI. combogrid combines an editable text box with drop-down datagrid panel, from which enables users to quickly find and select.

Downloads for EasyUI for jQuery:


<input class="easyui-combogrid">


  • loadMsg: The message displayed when datagrid load remote data.
  • idField: The id field name.
  • textField: The text field to be displayed in textbox.
  • mode: Defines how to load datagrid data when text changed.
  • filter: Defines how to select the local data when ‘mode’ is set to ‘local’.


  • options: Return the options object.
  • grid: Return the datagrid object.
  • setValue: Set the component value.
  • setValues: Set the component value array.
  • clear: Clear the component value.


  • First, add jQuery Easy UI scripts needed for your project.

 <link rel=”stylesheet” type=”text/css”  


<link rel=”stylesheet” type=”text/css”  


<script type=”text/javascript”  


<script type=”text/javascript”  


Example :


    <link rel="stylesheet" type="text/css" 
    <link rel="stylesheet" type="text/css" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <div style="margin-bottom:20px">
            <select class="easyui-combogrid" style="width:100%" data-options="
                    panelWidth: 500,
                    idField: 'itemid',
                    textField: 'productname',
                    method: 'get',
                    columns: [[
                        {field:'itemid',title:'Item ID',width:80},
                        {field:'listprice',title:'List Price',
                        {field:'unitcost',title:'Unit Cost',
                    fitColumns: true,
                    label: 'Select Item:',
                    labelPosition: 'top'




My Personal Notes arrow_drop_up
Recommended Articles
Page :