BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
[index.js]
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowFiltering='true' height='273px' :actionComplete='actionBegin' >
<e-columns>
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :filterBarTemplate = 'templateOptions'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format="yMd" :filterBarTemplate = 'dpTemplateOption'></e-column> </e-columns>
</ejs-grid>
data() {
return {
data: data,
templateOptions: {
create: function (args) {
elem = document.createElement('input');
return elem;
},
write: function (args) {
dObj = new MultiSelect({
dataSource: data,
fields: { text: "CustomerID", value:'CustomerID' },
change: function (args) {
var selVal = args.value;
var grid = document.getElementById('Grid').ej2_instances[0];
MultiSelectVals = args.value;
grid.filterByColumn("CustomerID", "equal", selVal[0]);
}
});
dObj.appendTo(elem);
},
},
dpTemplateOption:{
create: function(args) {
var element = document.createElement('input');
element.id = 'OrderDate';
return element;
},
write:function(args) {
datePicker = new DatePicker({ placeholder: 'Enter date', value: args.column.value,
change: function(args) {
var grid = document.getElementById('Grid').ej2_instances[0];
if (datePicker.element.value) {
grid.filterByColumn('OrderDate', 'equal', datePicker.element.value);
} else {
grid.removeFilteredColsByField('OrderDate');
}
} });
datePicker.appendTo('#OrderDate');
},
},
};
},
methods:{
actionBegin: function(args){
if(args.requestType == "filtering"){
args.cancel= true;
var currentPredicate, predicate=[];
for (var i=0,len =MultiSelectVals.length;i<len;i++){
currentPredicate = new Predicate("CustomerID", "equal", MultiSelectVals[i]);
predicate.push(currentPredicate);
}
var query = new Query().where(new Predicate.or(predicate)
var grid = document.getElementById('Grid').ej2_instances[0];
grid.query = query;
grid.refresh();
}
}
},
},
|
<ejs-grid ref='grid' :created='created' :actionComplete='actionComplete' :actionBegin='actionBegin' :allowPaging='true' :allowSorting='true' :allowFiltering='true'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey=true textAlign='Right' width='200'></e-column>
<e-column field='CustomerID' headerText='Customer ID' textAlign='Right' :filterBarTemplate = 'templateOptions' width='120'></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' type="date" format='yMd' :filterBarTemplate ='dpTemplateOption' width='90'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
. . . .
export default {
data() {
return {
templateOptions: {
create: function (args) {
elem = document.createElement('input');
return elem;
},
write: function (args) {
dObj = new MultiSelect({
dataSource: localData,
fields: { text: "CustomerID", value:'CustomerID' },
change: function (args) {
var selVal = args.value;
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
MultiSelectVals = args.value;
var currentPredicate, predicate=[];
for (var i=0,len =MultiSelectVals.length;i<len;i++){
currentPredicate = new Predicate("CustomerID", "equal", MultiSelectVals[i]);
predicate.push(currentPredicate);
}
var query = new Query().where(new Predicate.or(predicate))
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
grid.query = query;
grid.filterSettings.columns=[];
grid.refresh();
}
});
dObj.appendTo(elem);
},
},
dpTemplateOption:{
create: function() {
var element = document.createElement('input');
element.id = 'OrderDate';
return element;
},
write:function(args) {
. . . .
},
},
}
}, |
[code example]
var gridInstances = this.element.closest(".e-grid").ej2_instances[0] // Here, you can get the EJ2 Grid instances
gridInstances. removeFilteredColsByField("OrderDate"); // Clear the OrderDate filter state |
[code example]
var gridInstances = this.element.closest(".e-grid").ej2_instances[0] // Here, you can get the EJ2 Grid instances
gridInstances. removeFilteredColsByField("OrderDate"); // Clear the OrderDate filter state |
[index.js]
actionComplete(e) {
if (e.requestType === "refresh") {
this.grid.query = this.gquery;
document.getElementById(
this.grid.element.id + "_searchbar"
).value = this.val;
}
if (e.requestType === "paging") {
document.getElementById(
this,
grid.element.id + "_searchbar"
).value = this.val; // reset the searchstring
}
}
actionBegin(args) {
//Beverages_Condiments
if (args.requestType === "searching" && args.searchString.length > 0) {
const text = args.searchString.split(" "); //Split your search text based in Space and get the values
var flag = true;
var predicate;
this.val = args.searchString;
// preparing filter query
text.forEach(key => {
this.grid.getColumns().forEach(col => {
if (flag) {
predicate = new Predicate(col.field, "contains", key);
flag = false;
} else {
predicate = predicate.or(col.field, "contains", key);
}
});
});
this.grid.query = new Query().where(predicate);
this.gquery = this.grid.query;
this.grid.searchSettings.key = ""; // resetting the search value
this.grid.refresh();
}
} |