We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
$('#Spreadsheet').ejSpreadsheet({
allowAutoFill: true
}); |
//..
$.ajaxSetup({ async: false });
$.getJSON("api/Spreadsheet/GetDataFromDB", {}, function (data) {
dataSource = data;
});
$.ajaxSetup({ async: true });
function renderAutoComplete(xlObj, elem) {
elem.ejAutocomplete({
id: 'SpreadCell',
dataSource: dataSource,
width: "100%",
fields: {text:"ItemName"}, /// To specify the field name from database
delaySuggestionTimeout: 10,
minCharacter: 2,
popupWidth: "150px",
popupHeight: "150px",
showEmptyResultText: false,
select: $.proxy(selectText, xlObj)
});
}
//..
|
|
namespace SpreadsheetWebAPI.Controllers
{
/// </summary>
[ServiceContract(Namespace = "")]
[XmlSerializerFormat]
public class SpreadSheetController : ApiController
{
private static string connetionString = ConfigurationManager.ConnectionStrings["SpreadDBConnectionString"].ConnectionString;
[AcceptVerbs("Get")]
[OperationContract]
[WebGet(BodyStyle = WebMessageBodyStyle.Bare)]
public HttpResponseMessage GetDataFromDB()
{
List<Order> orders = new List<Order>();
SqlConnection sqlCon = new SqlConnection(connetionString);
SqlCommand sqlComm = new SqlCommand("SELECT * FROM [dbo].[Table]", sqlCon);
sqlCon.Open();
SqlDataReader sqlDR = sqlComm.ExecuteReader();
while (sqlDR.Read())
{
Order order = new Order();
order.OrderID = (int)sqlDR.GetValue(0);
//..
orders.Add(order);
}
sqlCon.Close();
JavaScriptSerializer serializer = new JavaScriptSerializer();
string str = serializer.Serialize(orders);
return new HttpResponseMessage() { Content = new StringContent(str, Encoding.UTF8, "text/plain") };
}
}
public class Order
{
public int OrderID { get; set; }
//..
}
} |
|
<body>
<label>Select AutoComplete Cell</label>
<select id="cellName">
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
</select>
<div id="Spreadsheet"></div>
</body>
<script type="text/javascript">
//…
function cellEditing(args) {
var e = args.event, editElem = this.element.find("#" + spreadId + "_Edit")[0], acElem, actCell = this.getActiveCell(), cellName = $("#cellName").val();
if (e.keyCode == 13 && aComplete.showSuggestionBox) {
this.element.find("#" + spreadId + "_Edit").text(aComplete.suggestionList.find("li.e-hover").text());
aComplete.suggestionList.hide();
}
if (args.isEdit && !editElem.innerHTML.startsWith("=") && e.keyCode != 13) {
if (e.keyCode == 38 || e.keyCode == 40) {
if (aComplete.showSuggestionBox && aComplete.suggestionList) {
SuggestionSelect(aComplete, e); // SuggestionSelect() from Autocomplete_Plugin.min.js
return;
}
}
if (this.getAlphaRange(actCell.rowIndex, actCell.colIndex, actCell.rowIndex, actCell.colIndex) == cellName) {
acElem = aComplete.element;
acElem.val(editElem.innerHTML);
acElem.data("ejAutocomplete").search();
editCell = this.getActiveCellElem();
locate = editCell[0].getBoundingClientRect();
leftVal = locate.left + window.pageXOffset;
topVal = locate.top + window.pageYOffset + $(editElem).height();
$("#" + spreadId + "_autocomplete_suggestion").css({ left: leftVal, top: topVal });
}
}
}
//…
</script> |
