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

Button in grid header

I have to add some buttons in column header by using header template.

<script id="HeaderTemplate" type="text/x-template">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
</script>

But if I click on other buttons not the first button.

The grid's mouseClickHandler event will fire and like "trigger" click the first button.

At the same time it adds the first button ' e-focus' class.

How do I prevent that from happening?

Screenshot 2022-11-14 143911.jpg


3 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team November 15, 2022 07:25 AM

Hi Gin,


Greetings from Syncfusion support


Based on your shared code, we have prepared a sample and we tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below code example and sample for more information.


 

@Html.EJS().Grid("Grid1").DataSource((IEnumerable<object>)ViewBag.DataSource).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Columns(col =>

{

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add();

    col.Field("CustomerID").HeaderTemplate("#customertemplate").HeaderText("Customer ID").Width("120").Add();

     .  .  .  .  .  .  .  .  .  .  .  .

     .  .  .  .  .  .  .  .  .  .  .  .

}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Render()

 

<script id="customertemplate" type="text/x-template">

    <div class="btn-group">

        <button type="button" class="btn btn-primary">Apple</button>

        <button type="button" class="btn btn-primary">Samsung</button>

        <button type="button" class="btn btn-primary">Sony</button>

    </div>

</script>

 

 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample280525718.zip


Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vdm1322493033.zip


Regards,

Rajapandi R


Marked as answer

GI Gin November 17, 2022 03:39 AM

Hi Rajapandi R,

Thanks for your help!

I using toolbar instead and that working fine :D

Screenshot 2022-11-17 153859.jpg



RR Rajapandi Ravi Syncfusion Team November 18, 2022 12:28 AM

Hi Gin,


We are happy to hear that our provided suggestion was helpful to achieve your requirement.


Kindly get back to us if you have any further queries.


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon