Button in grid header

[Gin]

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?

[Rajapandi Ravi]

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

[Gin]

Hi Rajapandi R,

Thanks for your help!

I using toolbar instead and that working fine :D

[Rajapandi Ravi]

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

[Peter Groft]

To add these ButtonFields, click on the Edit Columns link from the GridView's smart tag, select the ButtonField field type from the list in the upper left and click the Add button. Move the two ButtonFields so that they appear as the first two GridView fields.

Regards,
Peter

[Rajapandi Ravi]

Peter,

Since your provided information was not enough to identify your exact requirement and problem scenario at our end. Please share the below details that will be helpful for us to provide better solution.

1)           Share your exact requirement with detailed description.

2)           Please share your complete Grid rendering code, we would like to check how you are implementing the buttonfields.

3)           Please share your issue and requirement scenario in video demonstration format, that would be helpful for us to understand your exact scenario.