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.
|
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
. . .
<ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" Create="onCreate" ToolbarClick="toolbarClick" />
</ej:Grid>
function onCreate(args) {
$(".e-gridtoolbar").find(".e-gridsearchbar").keyup(function (e) {
setTimeout(function () {
var str = $(e.target).val();
$("#Grid").ejGrid("search", str);
}, 1000)
})
} |
|
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
. . .
<ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" Create="onCreate" ToolbarClick="toolbarClick" />
</ej:Grid>
function toolbarClick(args) {
if (args.itemName == "Search" && args.model.searchSettings.key == "" && searchApplied && $("#Grid_searchbar").val() == "") {
searchApplied = false;
searchKey = "";
keyValue = [];
}
}
function actionBegin(args){
if (args.requestType == "searching" && this.model.searchSettings.key == "")
this.model.query.queries = [];
}
function actionComplete(args) {
if (args.requestType == "searching") {
if (this.model.searchSettings.key != "") {
Searchkeyword = this.model.searchSettings.key.split(",");
if (Searchkeyword.length > 1) {
if (args.requestType == "searching") {
if (this.model.searchSettings.key != "") {
// split based on the (,)
searchKey = this.model.searchSettings.key;
keyValue = args.keyValue.split(",");
}
this.clearSearching();
// searching apply
if (this.commonQuery.queries.length > 0)
this.commonQuery.queries = [];
var i,pred = ej.Predicate("CustomerID", "contains", $.trim(keyValue[0]), true);
for(i=1;i<keyValue.length;i++){
pred = pred["or"]("CustomerID", "contains", $.trim(keyValue[i]), true);
}
this.commonQuery.where(pred);
searchApplied = true;
$(".e-ejinputtext.e-gridsearchbar").val(searchKey)
this.refreshContent();
this.model.allowSearching = false;
}
$("#Grid_searchbar").val(searchKey);
this.model.searchSettings.key = searchKey;
}
}
}
} |
|
[index.cshtml]
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar="@(new List<string>() {"Search" })" created="created" actionBegin="actionBegin" actionComplete="actionComplete">
<e-grid-columns>
. . . .
</e-grid-columns>
</ejs-grid>
<script>
var debounceTimer = null;
var gquery, val;
function created(e) {
document.getElementById("Grid_searchbar").addEventListener('keyup', (event) => {
clearTimeout(debounceTimer); // you can customize as per your requirement(Searh action trigger while KEYPRESS)
debounceTimer = setTimeout(() => { searchFun(event); }, 500);
})
}
function actionBegin(args) {
if (args.requestType == "searching") {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
const keys = args.searchString.split(','); //Split your search text and get the values
var flag = true;
var predicate;
if (keys.length > 1) {
if (this.searchSettings.key !== '') {
val = args.searchString;
// preparing filter query
keys.forEach((key) => {
this.getColumns().forEach(col => {
if (flag) {
predicate = new ej.data.Predicate(col.field, 'contains', key);
flag = false;
} else {
var pre = new ej.data.Predicate(col.field, "contains", key);
predicate = predicate.or(pre); }
});
});
gquery = this.query;
this.query = new ej.data.Query().where(predicate);
this.searchSettings.key = '';
this.refresh();
}
}
}
}
function actionComplete(e) {
if (e.requestType === 'refresh') {
this.query = gquery;
document.getElementById(this.element.id + '_searchbar').value = val;
}
}
function searchFun(event) {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
var value = event.target.value;
grid.search(value);
clearTimeout(debounceTimer);
}
</script> |
|
[index.cshtml]
@{
ViewData["Title"] = "Home Page";
List<Object> toolbarItems = new List<Object>();
toolbarItems.Add(new { template = "#toolbarTemplate" });
}
<div id="toolbarTemplate" type="text/x-template">
<div>
<ejs-multiselect id="games" width="200" allowFiltering="true" select="MultiSelectSelectAction" removing="MultiSelectRemovedAction" dataBound="MultiSelectDataBoundAction" placeholder="Search here...">
</ejs-multiselect>
</div>
</div>
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar=toolbarItems>
<e-grid-columns>
. . . .
</e-grid-columns>
</ejs-grid>
<script>
var debounceTimer = null, predicate;
function MultiSelectDataBoundAction(args) {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
var data = [];
grid.getColumns().forEach(item => {
var dt = new ej.data.DataUtil.distinct(grid.dataSource, item.field);
data= data.concat(dt);
})
this.dataSource = data; //MultiSelection component dataSource binding here
}
function MultiSelectSelectAction(args) {
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
var keys;
if (this.value && this.value.length > 0) {
this.value = this.value.filter((v, i, a) => a.indexOf(v) === i);
var itemData = this.value;
itemData.push(args.itemData);
keys = itemData ; //Split your search text and get the values
} else {
keys = [args.itemData];
}
var flag = true;
var predicate;
if (keys.length >= 0) {
if (args.itemData !== '') {
let val = args.itemData;
keys.forEach((key) => {
grid.getColumns().forEach(col => {
//Create predicates for whole columns with search text value
if (flag) {
predicate = new ej.data.Predicate(col.field, 'contains', key);
flag = false;
} else {
var pre = new ej.data.Predicate(col.field, "contains", key);
predicate = predicate.or(pre);
}
});
})
grid.query = new ej.data.Query().where(predicate); // Bind the created predicate to Grid query property
grid.refresh();
}
}
}
|
