ExtenableGridTest

SSA Search

by riaanc

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
My editable grid input field:
<input type="text" class="ssaSearch"/>
<br/>
My other editable grid input field with different display columns and selected item format:
<input type="text" class="ssaSearch2"/>

CSS

.egssa-pointer{
  cursor: pointer;
}

.egssa-table-container
{
  height: 400px;
  overflow-y: auto;
}

JavaScript

/*
RC: Run a jquery selector on a plain text input field. 

For now the JSON must look like this
{
	items: [
  	{"SqlColumnName1": "SqlColumnRowColumn1", "SqlColumnName2": "SqlColumnRowColumn2", ...},
    {"SqlColumnName1": "SqlColumnRowColumn1", "SqlColumnName2": "SqlColumnRowColumn2", ...},
    ...  	
  ]
}

options.primaryKeyColumn name is used to set attribute on the input field. Use inspect on the text input to see the data-attribute. The attribute will be e.g. 'data-egssa-value="5282264"'

options.columnCaptions is an array that determines the columns which should be displayed and have the format:
[
	{columnName: "sqlColumnName1", caption: "Friendly Human Readable Caption for Column"},
  {columnName: "sqlColumnName1", caption: "Friendly Human Readable Caption for Column"}
]

Only column specified in columnCaptions option will be displayed.
*/

$(function() {
    $(".ssaSearch").editableGridSSA({
      searchItemName: "CRM blah blah GitHub Repo",
      delaySearch: 500,
      placeholder: "Enter CRM search query here",
      searchUrl: "https://api.github.com/search/repositories",
      primaryKeyColumn: "id",
      formatSelection: function(dataItem){return dataItem.name},
      onSelectItem: function(dataItem){alert("Selected item primary key: " + dataItem["id"])},
      columnCaptions: [
        {"columnName": "name", "caption": "Repo Name"}, 
        {"columnName": "description", "caption": "Description"}
        ]
    });

    $(".ssaSearch2").editableGridSSA({
        searchItemName: "GitHub Repo",
      searchUrl: "https://api.github.com/search/repositories",
      primaryKeyColumn: "id",
      formatSelection: function(dataItem){return dataItem.name + " - " + dataItem.owner.login},
      onSelectItem: function(dataItem){alert("Selected item primary key: " + dataItem["id"])},
      columnCaptions: [
        {"columnName": "full_name", "caption": "Full Name"}, 
        {"columnName": "html_url", "caption": "URL"}
        ]
    });

});




(function($)...