editableGridTerritory

by riaanc

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://jsfiddle.net/riaanc/e67st5mg/7/show_js/"></script>


My editable grid territory field loading territories by ajax from <a href="https://jsfiddle.net/riaanc/8nrcqz6k/show_js/">https://jsfiddle.net/riaanc/8nrcqz6k/show_js/</a>:
<br/>
<input type="text" class="territoryFieldAjax" />

<br/>
<br/>
My editable grid territory field loading territories in textarea below 
<br/>
<input type="text" class="territoryFieldJson" />
<br/>
<br/>
<textarea id="txtInput" style="float:left; width: 400px; height: 400px;">  
[
  {
    "terr_territoryid": -1069146751,
    "terr_caption": "Bellville",
    "terr_parentid": -2147483638,
    "terr_rangeend": -971116126
  },
  {
    "terr_territoryid": -2147483637,
    "terr_caption": "Cape Town Medi-clinic",
    "terr_parentid": -2147483638,
    "terr_rangeend": -2049453012
  },
  {
    "terr_territoryid": 991947098,
    "terr_caption": "Cape Town MRI",
    "terr_parentid": -2147483639,
    "terr_rangeend": 1074047745
  },
  {
    "terr_territoryid": 160831245,
    "terr_caption": "Century City",
    "terr_parentid": -2147483638,
    "terr_rangeend": 285667112
  },
  {
    "terr_territoryid": -1657330507,
    "terr_caption": "Chris Barnard Memorial Hospital",
    "terr_parentid": -2147483638,
    "terr_rangeend": -1559299882
  },
  {
    "terr_territoryid": -873085499,
    "terr_caption": "Claremont Hospital",
    "terr_parentid": -2147483638,
    "terr_rangeend": -775054874
  },
  {
    "terr_territoryid": -2147483638,
    "terr_caption": "Dr Morton and Partners",
    "terr_parentid": -2147483639,
    "terr_rangeend": 909846449
  },
  {
    "terr_territoryid": -1461269255,
    "terr_caption": "Fountain Medical Centre",
    "terr_parentid":...

CSS

.egterritory-pointer {
  cursor: pointer;
}

.egterritory-table-container {
  height: 400px;
  overflow-y: auto;
  margin-left: -20px;
  padding-top: 20px
}

.egterritory-item {    
  padding-left: 20px;
}

.egterritory-item.display-hidden {    
  display: none;
}

.egterritory-item.no-children{
  margin-left: 20px;
}

.egterritory-item-name{
  cursor: pointer;
  padding: 3px;
}



.egterritory-item-name:hover{
  background-color: #ccc;
  border-radius: 4px;
}

.egterritory-caret
{
  padding: 0px 4px 0px 4px;
  cursor: pointer;
}


.egterritory-item.collapsed div.egterritory-item {
  display: none;
}

/*FROM OTHER JSFIDDLE*/

.editableGridDialog-backdrop {
  display: block;
  opacity: 0.2;
  background-color: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
}

.editableGridDialog-dialog {
  background-color: white;
  color: rgb(51, 51, 51);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 800px;
  border-radius: 5px;
  text-align: left;
  position: fixed;
  left: 50%;
  top: 40%;
  margin-left: -400px;
  margin-top: -200px;
  overflow: hidden;
  z-index: 99999;
  display: none;
}

.editableGridDialog-header {
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.editableGridDialog-header h4 {
  margin: 0;
  line-height: 1.42857143;
}

.editableGridDialog-body {
  padding: 15px;
}

JavaScript

//------------- DEMO USAGE ---------------
function RunDemo() {
  $(".territoryFieldAjax").editableGridTerritory({
    searchItemName: "CRM territory",    
    placeholder: "Enter territory something here",
    dataUrl: "https://jsfiddle.net/riaanc/8nrcqz6k/show_js/",        
    onSelectItem: function(dataItem) {
      alert("Selected territory primary key: " + dataItem["territoryID"])
    }    
  });

  $(".territoryFieldJson").editableGridTerritory({
    searchItemName: "CRM territory",    
    placeholder: "Enter territory something here",
    data: JSON.parse($("#txtInput").val()),
    onSelectItem: function(dataItem) {
      alert("Selected territory primary key: " + dataItem["territoryID"])
    }    
  });
  
}


//-------------------COPY FROM HERE TO END -----------------------
/* editableGridTerritory
Run a jquery selector on a plain text input field. 

For now the JSON must look like this
[
	{
    "terr_territoryid": -1069146751,
    "terr_caption": "Bellville",
    "terr_parentid": -2147483638,
    "terr_rangeend": -971116126
  },
  ...
]

The territory id will be stored in the input text field e.g. 'data-egterritoryid="-1069146751"'

*/

(function($) {

  var dialogHtml = `
<div class="editableGridDialog-dialog">
  <div class="editableGridDialog-header">
    <h4>Search for <span class="egterritory-searchitem"><span></h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">
    <div class="input-group">
  		<input type="text" class="form-control egterritory-searchbox" placeholder="">
  		<span class="input-group-addon"><i class="fa fa-search egterritory-icon"></i></span>
		</div>
    <div class="egterritory-table-container">
    	<div class="egterritory-table">
      </div>
    </div>  
    <div style="text-align: right; padding-top: 8px;">
    	<button type="button" class="btn btn-primary egterritory-btnclose">Cancel</button>        	
    <div>
    
</div>`;

  var dialog = $(dialogHtml);
  $(".egterritory-btnclose",...