help wanted
Description
I have used JSGrid for one of my project where users needs to select equipment's from huge list for this requirement drop down was not feasible, so have created a custom field with search popup in this user will search the equipment and press the select button.. this button will populate the number to text box..
its working expected except its requiring same button to be select twice.. in first attempt popup closes but textbox remains empty.. in second attempt its populate the text box.. same applies when user search with new search term and table gets cleared for new data to load..
// Search popup with jsgrid
$(document).ready(function () {
var mLink = function (config) {
jsGrid.Field.call(this, config);
};
mLink.prototype = new jsGrid.Field({
itemTemplate: function (value, item) {
var $text = "<button class = 'btn btn-default btn-xs btn-select1' value=" +
item.EQUNR + " data-dismiss='modal'>Select</button>";
return $("<div>").append($text);
}
});
jsGrid.fields.mLink = mLink;
$('#AddEdit').on('hidden.bs.modal', function () {
ClearUserForm();
});
//$('#linkModal').on('shown.bs.modal', function () {
// loadEquipmentSearch();
//});
$("#searchData").on('change keyup copy paste cut input focusout', function () {
//if ($("#searchData").val().length > 2) {
$("#EquipmentsSearch").jsGrid("search");
//}
//else {
// $("#EquipmentsSearch").jsGrid("option", "data", []);
//}
}).keydown(function (event) {
if (event.which == 13) {
event.preventDefault();
}
}).click(function () {
//if ($("#searchData").val().length > 2) {
$("#EquipmentsSearch").jsGrid("search");
//}
//else {
// $("#EquipmentsSearch").jsGrid("option", "data", []);
//}
});
loadEquipmentSearch();
});
function loadEquipmentSearch() {
$("#EquipmentsSearch").jsGrid({
filtering: false,
width: "100%",
editing: false,
inserting: false,
sorting: false,
pageLoading: true,
loadIndication: false,
paging: true,
autoload: false,
pageSize: 10,
pageIndex: 1,
pageButtonCount: 5,
pagerFormat: "{first} {prev} {pages} {next} {last} Page: {pageIndex} of {pageCount} displaying: {itemsPageCount} records filtered from total : {itemsCount}",
controller: {
loadData: function (filter) {
var d = $.Deferred();
var model = {
pageIndex: filter.pageIndex,
pageSize: filter.pageSize,
sortField: filter.sortField === undefined ? null : filter.sortField,
sortOrder: filter.sortOrder === undefined ? null : filter.sortOrder,
SearchString: $("#searchData").val(),
Section: $("#txtPlantSection").val(),
PlannerGroup: $("#txtPlannerGroup").val(),
};
$.ajax({
type: "GET",
headers: {
'X-XSRF-Token': token
},
url: baseUrl() + "/api/Data/PagedEquipments",
dataType: "json",
data: model
}).done(function (response) {
d.resolve({
data: response.records,
itemsCount: response.total
});
});
return d.promise();
}
},
rowClick: function () { },
fields: [
{ name: "EQUNR", title: "Number", width: 60 },
{ name: "Descr", title: "Description", width: 190 },
{ name: "PlantSection", title: "Section", width: 40 },
{ name: "PlannerGroup", title: "Planner Group", width: 60 },
{ name: "WERKS", title: "Plant", width: 30 },
{ name: "Link", title: "Select", type: "mLink", width: 40, align: "center" },
],
onRefreshed: function () {
$(".jsgrid-pager").contents().filter(function () {
return this.nodeType == 3;
}).each(function () {
this.textContent = this.textContent.replace('{itemsCount}', $("#EquipmentsSearch").jsGrid("_itemsCount"));
this.textContent = this.textContent.replace('{itemsPageCount}', $("#EquipmentsSearch").jsGrid("option", "data").length);
});
}
});
};
//Base Table where edit screen is having search option
JSGrid = $("#Stoppages").jsGrid({
width: "100%",
//height: "auto",
heading: true,
inserting: false,
editing: true,
sorting: true,
autoload: true,
paging: false,
pageLoading: true,
loadIndication: false,
pageSize: 10,
pageIndex: 1,
pageButtonCount: 5,
controller: {
loadData: function (filter) {
var d = $.Deferred();
var model = {
StartDate: $("#txtPeriodRange").data('daterangepicker').startDate.format('MM/DD/YYYY'),
EndDate: $("#txtPeriodRange").data('daterangepicker').endDate.format('MM/DD/YYYY'),
Line: $('#ddlLine option:selected').val()
};
$.ajax({
type: "GET",
headers: {
'X-XSRF-Token': token
},
url: baseUrl() + "/api/Data/StJSGrid",
dataType: "json",
data: model
}).done(function (response) {
d.resolve({
data: response,
itemsCount: response
});
});
return d.promise();
}
},
fields: [
{
name: "Equipment", title: 'Equipment', width: 120, type: "text", sorting: false, validate: {
validator: function (value, item) {
var isValid = false;
if (item.Equipment === undefined) {
isValid = false;
}
else if (item.Equipment.toString().length < 1 || item.Equipment.toString().length > 18) {
isValid = false;
}
else {
isValid = true;
}
return isValid;
},
message: function (value, item) {
return "Invalid Equipment Number";
}
}
},
{
name: "EquipmentPicker", title: "", width: 28, align: "left",
editTemplate: function (value, item) {
var grid = this._grid;
var $customButton = $('<a href="#" title="Select Equipments">')
.html(' <i class="fa fa-th"></i>')
.click(function (e) {
loadEquipmentSearch();
setTimeout(function () {
d = $.Deferred();
$('#linkModal .btn-select1').click(function () {
var i = $(this);
d.resolve(i.val());
});
d.done(function (value) {
grid.option("fields")[11].editControl.val(value);
});
$("#linkModal").modal('show');
}, 300);
});
return $customButton;
}
},
{
type: "control",
deleteButton: false,
itemTemplate: function (value, item) {
var $result = $([]);
var $customButton = $('<a href="#" title="Split">')
.html(' <i class="fa fa-columns"></i>')
.click(function (e) {
e.stopPropagation();
});
return $result;
}
}
],
onItemUpdated: function (args) {
$("#Stoppages").jsGrid("loadData");
}
});