How to add combobox in editable datagrid using jQuery EasyUI

Author - Webner

Following is the code to add Combobox in editable data grid:

Index.html:

<table id="dg" title=” Combobox in editable datagrid ” style="width:100%;height:700px"
toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="false" singleSelect="true" autoSave="true" data-options="pageSize:50">
<thead>
<tr>
<th field="Item_number"width="100" editor="{
Type:'combobox',
Options:{url:'get_itemname.php',
valueField:'itemno',
textField:'itemname' }}">Item Name</th>
<th field="type" width="70">Cost</th>
</tr>
</thead>
get_itemname.php
<?php 
$host = "localhost";
$user = "username";
$pass = "password";
$db = "database_name";
$conn = mysql_connect ( $host, $user, $pass ) or die ( "Unable to connect!" );
mysql_select_db ( $db ) or die ( "Unable to select database!" );
$getItemQuery="SELECT `itemno,itemname` FROM item";
$getItemQuery_Result=mysql_query ($getItemQuery );

$JsonData=array();

while ( $row = mysql_fetch_assoc($getItemQuery_Result) ) 
          {
           $item_no = $row ['itemno'];
           $item_name = $row ['itemname'];
	   $Item_obj=new Item($item_no, $item_name);
	   array_push($JsonData, $Item_obj);
	   }
echo json_encode($JsonData);  //return data back to the client in Json format 

class Item
{
 public $itemno;
 public $itemname;
 function __construct($itemno,$itemName) 
  {
   $this->itemno=$itemno;
   $this->itemname=$itemName;
}
}

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

Send your message