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. Image for the cookie policy date
close icon

Column Search functions are not working properly

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>








3 Replies 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team November 10, 2022 05:21 AM UTC

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.


  • Share a simple sample to reproduce the issue.
  • Try to reproduce the issue in the sample shared.
  • Share a video demo of the issue you are experiencing.
  • Share the Syncfusion package version you are using.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc-url-search-on-key-press817683365


Regards,

Joseph I.


Marked as answer

TH Thanuja replied to Joseph Christ Nithin Issack November 10, 2022 05:50 AM UTC

Thank you  Joseph Christ Nithin Issack. It has solved my issue.



SG Suganya Gopinath Syncfusion Team November 11, 2022 07:20 AM UTC

We are glad that the provided sample solved your issue. We are marking this as solved. Please get back to us for further assistance.


Loader.
Live Chat Icon For mobile
Up arrow icon