This is a migrated thread and some comments may be shown as answers.

Grid Filter Firing button click event

2 Answers 609 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Venu
Top achievements
Rank 1
Venu asked on 17 Jan 2017, 08:11 AM

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 Answers, 1 is accepted

Sort by
0
Venu
Top achievements
Rank 1
answered on 17 Jan 2017, 08:54 AM

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.

 

0
Viktor Tachev
Telerik team
answered on 18 Jan 2017, 02:56 PM
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.
Tags
Grid
Asked by
Venu
Top achievements
Rank 1
Answers by
Venu
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or