<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference --> 
    <link rel="stylesheet" href="http://cdn.syncfusion.com/14.2.0.26/js/web/flat-azure/ej.web.all.min.css" />
    <!-- Essential Studio for JavaScript  script references -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script> 
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/14.2.0.26/js/web/ej.web.all.min.js"> </script>
    <!--Add custom scripts here -->
</head>

<body>
    <div style="padding:10px">
        <h2>Enums</h2>
    </div>
   <div id="personList"></div>

  	<table id="listTable" class="table">
      <tr>
        <th>Id</th>
    	<th>PersonageType</th>
      	<th>Name</th>
      	<th>Surname</th>   
      </tr>
      <tr>
        <td>1</td>
      	<td>1</td>
        <td>Mustafa Kemal</td>
        <td>Atatrk</td>
      </tr>
      <tr>
        <td>2</td>
      	<td>2</td>
        <td>Mehmet Akif</td>
        <td>Ersoy</td>
      </tr>
  </table>
  
       <script type="text/javascript">
         PersonageTypes = [ { value: 1, text: "Great Leaders" }, { value: 2, text: "Intellectual" }, ];
        $(function () {
    		$("#personList").ejGrid({
        		dataSource: ej.DataManager($("#listTable")),
                editSettings:{ allowEditing: true},
                columns: [
                	{field: "Id", headerText: "Id", width:"100", isPrimaryKey:true, visible:false},
                	{field: "PersonageType", headerText: "PersonageType", width:"50",editType: ej.Grid.EditingType.Dropdown , dataSource:PersonageTypes},
                	{field: "Name", headerText: "Name", width:"100"},
                	{field: "Surname", headerText: "Surname", width:"100"}
                           ]
                          
   		});
        });
	</script>  
  
</body>

</html>

