BoldDeskPremium customer service software with affordable pricing: $10 for 3 agents. Try it for free.
Dear Team.
Grid and column search functions are not working on my page. I tried to fix this, but still unable find the solution.
<html>
<head>
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js"></script>
<!-- Syncfusion ASP.NET MVC controls styles -->
<link id="cssfile" rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/20.3.47/bootstrap5.css" />
@*<link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/20.3.47/bootstrap.css" rel="stylesheet" />*@
<style>
.fabric .empimg {
background-color: #0078d6;
}
.material .empimg {
background-color: #e3165b;
}
.highcontrast .empimg {
background-color: #ffd939;
}
_:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-Male::before,
_:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-FeMale::before {
color: black;
}
.highcontrast .e-userimg.sf-icon-Male::before,
.highcontrast .e-userimg.sf-icon-FeMale::before {
color: black;
}
.bootstrap .empimg {
background-color: #0078d6;
}
.bootstrap4 .empimg,
.bootstrap5 .empimg {
background-color: #0078d6;
}
.tailwind .empimg {
background-color: #4f46e5;
}
.fluent .empimg {
background-color: #106EBE;
}
#Emptext {
top: -12px;
left: 41px;
position: relative;
}
.e-grid.e-rtl #Emptext {
top: -12px;
left: -41px;
position: relative;
}
.empimg {
height: 27px;
width: 29px;
border-radius: 14px;
}
.e-userimg.sf-icon-Male::before,
.e-userimg.sf-icon-FeMale::before {
font-size: 13px;
}
.e-userimg.sf-icon-Male, .e-userimg.sf-icon-FeMale {
margin: 0px 8px;
line-height: 26px;
color: white;
font-size: 13px;
}
.e-userimg.sf-icon-Male::before {
content: '\e700';
}
.e-userimg.sf-icon-FeMale::before {
content: '\e701';
}
td.e-rowcell.e-selectionbackground.e-active {
background-color: transparent;
}
.e-hightheme td.e-rowcell.e-selectionbackground.e-active {
background-color: transparent;
color: white;
}
.e-bigger .e-grid .statustxt {
position: relative;
top: -2px;
}
.rating .star {
font-size: 132%;
color: lightgrey;
}
.rating .star.checked {
color: #ffa600;
}
td.e-rowcell .statustxt.e-activecolor {
color: #0e0e0e;
position: relative;
top: 9px;
}
td.e-rowcell .statustxt.e-inactivecolor {
color: #e60000;
position: relative;
top: 9px;
}
.bootstrap5 td.e-rowcell .statustxt.e-inactivecolor,
.bootstrap5 td.e-rowcell .statustxt.e-activecolor {
top: 8px;
}
.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,
.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {
position: relative;
top: 1.5px;
}
.e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,
.e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {
top: -0.5px;
}
.bootstrap5 .e-checkboxfiltertext #Trusttext {
margin-left: -4px;
}
.statustemp.e-inactivecolor {
background-color: #ffd7cc;
}
.statustemp.e-activecolor {
background-color: #ccffcc;
}
.statustxt.e-activecolor {
color: #00cc00;
}
.statustxt.e-inactivecolor {
color: #e60000;
}
#Trusttext {
position: relative;
top: 1px;
}
.e-image {
height: 13px;
width: 14px;
}
.statustemp.e-inactivecolor {
width: 64px;
}
.statustemp.e-activecolor {
width: 57px;
}
.statustemp {
position: relative;
height: 19px;
border-radius: 5px;
text-align: center
}
.highcontrast #msg {
color: #FFFFFF
}
#msg {
font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
font-size: 14px;
font-weight: 400;
opacity: 0.95;
color: #333;
float: right;
margin-top: 3px;
}
@@media only screen and (max-width: 370px) {
#msg {
float: left;
margin-top: 3px;
}
#GridOverview {
margin-top: 36px;
}
}
#samplecontainer {
padding-top: 5px;
}
#myProgress {
position: relative;
height: 18px;
width: 10em;
text-align: left;
background-color: white;
}
.highcontrast .e-grid #myProgress {
background-color: black;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #00b300;
}
#myBar.progressdisable {
background-color: #df2222;
}
#pbarlabel {
position: relative;
left: 10px;
line-height: 18px;
font-size: 10px;
color: white;
}
.below-10 {
background-color: rgb(242 0 0 / 0.43);
}
</style>
<script>
function actionBegin(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
args.dialog.width = "700px";
args.dialog.height = "325px";
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "ReceivingNumber") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "ReceivingNumber") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceDate") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "InvoiceDate") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceAmount") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "InvoiceAmount") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "POStatus") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "POStatus") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "VendorCode") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "VendorCode") {
this.columns[i].visible = true;
}
if (this.columns[i].field == "IsDeleted") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "IsDeleted") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceNumber") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "InvoiceNumber") {
this.columns[i].visible = true;
}
}
}
}
function actionComplete(args) {
if (args.requestType === "beginEdit") {
//args.dialog.width = "700px";
//args.dialog.height = "325px";
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "ReceivingNumber") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "ReceivingNumber") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceDate") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "InvoiceDate") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceAmount") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "InvoiceAmount") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "POStatus") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "POStatus") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "VendorCode") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "VendorCode") {
this.columns[i].visible = true;
}
if (this.columns[i].field == "IsDeleted") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "IsDeleted") {
this.columns[i].visible = false;
}
if (this.columns[i].field == "InvoiceNumber") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "InvoiceNumber") {
this.columns[i].visible = true;
}
}
}
}
</script>
<script>
function created() {
var grid = document.getElementById("Grid").ej2_instances[0];
document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () => {
grid.search(event.target.value)
});
}
</script>
<script>
function rowBound(args)
{
if (args.data['IsDeleted'] == 'True') {
args.row.classList.add('below-10');
}
}
</script>
<script>
function created()
{
var grid = document.getElementById("Grid").ej2_instances[0];
document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () =>
{
grid.search(event.target.value)
});
}
</script>
</head>
<body>
@using (Html.BeginForm("Index", "UpdateInvoice", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<!-- Content Wrapper. Contains page content -->
<div class="wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1> Update invoice informations</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"> <a rel='nofollow' href="@Url.Action("Index", "Home")"> Home</a> </li>
<li class="breadcrumb-item"> <a rel='nofollow' href="#"> Update Invoice</a> </li>
<li class="breadcrumb-item active">Update Invoice Information</li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Update Invoice Information</h3>
</div>
<!-- /.card-header -->
<div>
@Html.EJS().Grid("Grid").ActionBegin("actionBegin").ActionBegin("actionComplete").DataSource(dataManager => { dataManager.Url("/UpdateInvoice/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/UpdateInvoice/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor"); }).AllowFiltering(true).Columns(col =>
{
col.Field("ID").HeaderText("ID").IsPrimaryKey(true).Width("8").Add();
col.Field("ReceivingNumber").HeaderText("Receiving Number").Width("20").Add();
col.Field("InvoiceNumber").HeaderText("Invoice Number").Width("20").ValidationRules(new { required = true, minLength = 3 }).Add();
col.Field("InvoiceDate").HeaderText("Invoice Date").Width("20").Add();
col.Field("InvoiceAmount").HeaderText("Invoice Amount").Width("20").Add();
col.Field("POStatus").HeaderText("PO Status").Width("20").Add();
col.Field("VendorCode").HeaderText("Vendor Code").Width("20").Add();
col.Field("IsDeleted").HeaderText("IsDeleted").Type("boolean").Width("20").Add();
}).RowDataBound("rowBound").Created("created").AllowPaging(true).RowHeight(42).AllowFiltering(true).AllowGrouping(true).PageSettings(page => page.PageSize(5)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "ExcelExport", "Edit", "Update", "Cancel", "Search" }).LoadingIndicator(l => { l.IndicatorType(Syncfusion.EJ2.Grids.IndicatorType.Spinner); }).Render()
</div>
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
}
</body>
</html>
Hi Thanuja,
Greetings from Syncfusion support.
Based on your query, you are trying to search the grid when you enter each letter to the search bar, but you are not able to search. We have prepared a sample to meet your requirement, but unfortunately, the issue is not reproduced. Refer the sample below and share the following details if your still face the issue.
Regards,
Joseph I.
Thank you Joseph Christ Nithin Issack. It has solved my issue.
We are glad that the provided sample solved your issue. We are marking this as solved. Please get back to us for further assistance.