clicking first time (placing cursor ) on Search Panel input text causes postback

[KR]

Hi,

I have added a Search Panel for the grid. But when I click on the input text, it causes the postback. I haven't entered anything yet and merely placing cursor causes the postback. Here is the snippet.

Appreciated your help!

@(Html.Kendo().Grid<AAMVA.Website.OnlineMemberDirectory.Models.MemberViewModel>()
     .Name("grid")
     .Columns(columns =>
     {
         columns.Bound(p => p.Name).Width("12%").ClientTemplate("<span class='content'>#=Name#</span>").Filterable(false);
         columns.Bound(p => p.Organization).ClientTemplate("<span class='content'>#=Organization#</span>").Filterable(false);
         columns.Bound(p => p.EmailAddress).Width("19%").ClientTemplate("<span class='content'>#=EmailAddress#</span>").Filterable(false);
     })
         .Filterable()
         .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
         .Sortable()
         .Scrollable()
         .ToolBar(t => t.Search())
         .HtmlAttributes(new { style = "height:700px;" })
         .NoRecords("No Members to display")
         .DataSource(dataSource => dataSource
             .Ajax()
             //.ServerOperation(false) // Paging, sorting, filtering, and grouping will be done client-side.
             .PageSize(10)
             .Read(read => read.Action("People", "Search"))
             )
         .Events(e => e
             .DataBound("onDataBound")
         )
 )

function onDataBound() {

    var filter = this.dataSource.filter();

    var highlightedItems = $('.highlighted');
    highlightedItems.each(function () {
        var span = this;
        var text = span.textContent;
        span.parentNode.replaceChild(document.createTextNode(text), span);
    });


    if (filter && filter.filters.length) {
        var values = [];
        iterateFilters(filter, values);
        highlight(values)
    }
}

   function iterateFilters(expression, collection) {
        if (expression.filters) {
            $.each(expression.filters, function (_, filter) {

                iterateFilters(filter, collection);
                if (filter.value) {

                    collection.push(filter.value)
                }
            });
        }
    }

function highlight(values) {

    $('#grid td .content').each(function () {


        var originalValue = $(this).text();
        var lowerValue = originalValue.toLocaleLowerCase();

       // values = values.map(x => x.toLocaleLowerCase());
        values = values.map(function (x) { return x.toLocaleLowerCase(); });


        var flag = false;
        var newValues = [];


        values.forEach(function (x) {
            //if (lowerValue.includes(x)) {
            if(lowerValue.indexOf(x) > -1) {
                flag = true;
                newValues.push(x)
            }
        })

        newValues;

        if (flag) {
            //var indexes = newValues.map(x => lowerValue.indexOf(x));
            var indexes = newValues.map(function (x) { return lowerValue.indexOf(x); });

            //var lengths = newValues.map(x => x.length);
            var lengths = newValues.map(function (x) { return  x.length; });


            var substring = "(";

            indexes.forEach(function (x, i) {
                substring += originalValue.substring(x, x + lengths[i]);

                if (i != lengths.length - 1) {
                    substring += "|";
                }
            });

            substring += ")"

            var re = new RegExp(substring, 'g');
            var newValue = $(this).text().replace(re, function (x) {
                return "<span class='highlighted'>" + x + "</span>"

            });

            $(this).html(newValue)
        }
    })
}

[Viktor Tachev]

Hi,

 

I examined the provided code and did not notice something obvious that can cause the behavior.

That said, I tried to replicate the behavior with our online example, however, I was not able to. Would you send us a sample project where the issue is replicated? This will enable us to examine it locally and look for its cause.

 

Regards,
Viktor Tachev
Progress Telerik