Grid Filter Firing button click event

3 posts, 0 answers
  1. Venu
    Venu avatar
    11 posts
    Member since:
    Aug 2013

    Posted 17 Jan 2017 Link to this post

    The Grid has column filter implemented referring to this link > grid-filter-row

    When cursor is placed in filter text box and press Enter, the last button click event is firing.

    <div id="divGrid">
        @(Html.Kendo().Grid<DocumentModel>()
            .Name("Grid")
        .Columns(columns =>
        {
              
            columns.Bound(e => e.Name)
                .Title("Document Name")
                .Width(220)
                .HtmlAttributes(new { title = "#= Documentpath #" })
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(e => e.Format)
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
                .Width(140);
            columns.Bound(e => e.Type)
                .Title("Type")
                .ClientTemplate("<div align=center>#=Type#</div>")
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));       
            columns.Bound(e => e.LastModifiedDate)
                .Title("Modified Date")
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is after")))
                .ClientTemplate("#= kendo.toString(LastModifiedDate, \"dd MMM yyyy HH:mm \") #");
        })
        .NoRecords("No documents to display")
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Pageable(pager => pager.Refresh(true).PageSizes(new int[] { 10, 50, 100 }))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
                             .Events(events => events.Error("Error"))
                    .Read(read => read.Action("DocReadData", "Doc",
                        new
                        {   objectID = ViewBag.ObjectID,
                            jurisdiction = @ViewBag.Jurisdiction
     
                        }))
          )
         .Events(events => events
             .DataBound("dataBound"))
        )
    </div>
    <div class="main-wrap" style="padding-top:1em">
        <div class="floatLeft">
            @(Html.Kendo().Button()
                            .Name("btnBack")
                            .Content("Back")
                            .HtmlAttributes(new { type = "button" })
                            .Events(ev => ev.Click("onbtnBackClick")) ///ajax call
            )
        </div>
        <div class="floatRight">
            @(Html.Kendo().Button()
                                .Name("btnDownload")
                                .Content("Download Doc")
                                .HtmlAttributes(new { type = "button" })
                                        .Events(ev => ev.Click("onbtnDownloadClick")) ///ajax call
            )
            @(Html.Kendo().Button()
                                .Name("btnTest")
                                .Content("TestButton")
                                .HtmlAttributes(new { type = "button" })
                                                .Events(ev => ev.Click("onbtnTestClick"))
                                                        .HtmlAttributes(new { title = @ViewBag.ErrorMessage })///ajax call
            )
        </div>
    </div>
    <script type="text/javascript">
     
    function onbtnTestClick(e) {               
            alert("onbtnTestClick");
        }
    </script>  

     

    On pressing Enter key in Filter textbox shows the alert message "onbtnTestClick".  

    Is there any default form submit event exists in kendo? What is causing this and how to prevent. Please suggest

     

     

  2. Venu
    Venu avatar
    11 posts
    Member since:
    Aug 2013

    Posted 17 Jan 2017 in reply to Venu Link to this post

    After little debug I found the issue is occurring when .HtmlAttributes(new {title....})  is added to the button.

    .HtmlAttributes(new { title = @ViewBag.ErrorMessage })

    If this is added to two buttons, the first button's click event is firing, when Enter key pressed in Filter textbox.

    How to stop this without removing this property.

     

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 18 Jan 2017 Link to this post

    Hi Venu,

    I tried to replicate the behavior you describe, however, I was not able to. I also made a short video of the behavior that I am observing. Please check it out and let me know if I am missing something.


    It would be great if you can send us a small runnable sample where the issue is replicated. This will enable us to examine the behavior locally and look for its cause.


    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top