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.
Hi Ajith,
thank you for support.
Perfect! It works.
But now I have two related question:
1. How should I go about having the same style as the built-in search?
built-in:
custom:
2. If I want add built-in print functionality in toolbar, how should I do?
|
Index.cshtml
<style>
.c-input-div{
width:auto; // changed the width to auto to resize the width.
}
</style> |
|
Index.cshtml
<div class="control-section">
@{
List<object> template = new List<object>();
template.Add(new { template = "#toolbarSearch" });
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Toolbar(template).ToolbarClick("toolbarClick").Load("onLoad").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Type("date").EditType("datepickeredit").Format("dd/MM/yyyy").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add();
}).Height("400").AllowPaging().AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render()
</div>
<div id="toolbarSearch">
<div class="e-toolbar-item e-toolbar-print" title="Print"><button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="-1" aria-label="Print" style="width: auto;"><span class="e-btn-icon e-print e-icons e-icon-left"></span><span class="e-tbar-btn-text">Print</span></button></div>
<div class="e-input-group c-input-div" >
<input class="e-input" name='input' id="toolSearch" type="text" placeholder="Search" />
<span class="e-input-group-icon e-search-icon e-icons"></span>
</div>
</div>
<script>
function onLoad(){
var grid = document.getElementById("Grid").ej2_instances[0];
// Keyup event bound to the input element
grid.element.addEventListener('keyup', (args) => {
customSearch(args, false);
});
grid.element.addEventListener("click", (args) => {
if (args.target.classList.contains("e-search-icon")) {
customSearch(args,true);
}
});
}
function customSearch(args, isSearchIconClicked) {
var grid = document.getElementById("Grid").ej2_instances[0];
var gridInitialData = grid.dataSource.slice(0);
if ((args.target).getAttribute('id') === 'toolSearch' && args.key === "Enter" || isSearchIconClicked ) {
let gridObj = grid;
// Regex for checking date of format – “dd/MM/yyyy”
var regex = /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/;
// Test regex with the entered value
var searchElement = document.getElementById("toolSearch");
let input = isSearchIconClicked ? searchElement : (args.target);
if (regex.test(input.value)) {
var count = 0;
var predicates;
// Value is split to form JavaScript’s Date object
var dateSplit = input.value.split("/");
var dateVal = new Date(parseInt(dateSplit[2]), (parseInt(dateSplit[1]) - 1), parseInt(dateSplit[0]));
while (count < gridObj.columns.length) {
// Predicate is generated for all columns with type as ‘date’
let col = gridObj.columns[count];
if (col.type === "date") {
// Predicates are generated with the column field name and date object value
predicates = (predicates === undefined) ? new ej.data.Predicate(col.field, "contains", dateVal) : predicates.or(col.field, "contains", dateVal);
}
count++;
}
// Data manager is executed with grid’s datasource and query generated based on the predicates
new ej.data.DataManager({ json: (gridObj.dataSource) }).executeQuery(new ej.data.Query().where(predicates)).then((e) => {
// The returned result is assigned to the grid datasource
gridObj.dataSource = e.result;
});
} else if (input.value === "") {
if (gridObj.searchSettings.key === "") {
var data = gridInitialData;
// If the input value and search key is empty the entire data source is assigned to the grid
gridObj.dataSource = ej.data.DataUtil.parse.parseJson(data);
} else {
// If the input value is empty but the grid contains a search key, then another search is performed with empty value to remove the search
gridObj.search("");
}
} else {
// Grid search method is called with the input value
gridObj.search(input.value);
}
}
}
function toolbarClick(args) {
var element = ej.grids.parentsUntil(args.originalEvent.target, "e-toolbar-print", false);
if (element) {
var grid = document.getElementById("Grid").ej2_instances[0];
grid.print();
}
}
</script>
<style>
.c-input-div{
width:auto; // changed the search bar width here.
}
</style> |
