Custom CommandButtonOptions

[Mini Dev]

Hi,

How can I pass a custom html attribute to custom CommandButtonOptions?

This is my custom command:

List<object> commands = new List<object>();

commands.Add(new { buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

I need to pass a different html attribute to that, for example title attribute but also others like "data dash" (used by jquery)

Thanks

[Logesh Rajappa]

Hi Mini, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we can achieve your requirement by using the databound event. Initially we have set a custom class to the button, in the databound event, we suggest you to get the buttons that have a class attribute as “e-customClass” and add a data-bash attribute to the buttons. Please refer to the below sample for your reference. 

[index.cshtml] 

@{ 

 

        List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat e-customClass" } }); 

        commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon ", cssClass = "e-flat" } }); 

 

    } 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" dataBound ="setAttr"> 

... 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

... 

       </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    function setAttr() {  

 

        for (var i = 0; i < this.element.querySelectorAll('.e-unboundcelldiv').length; i++) { 

 

            var btnElement = this.element.querySelectorAll('.e-unboundcelldiv')[i].querySelector('button'); 

 

            if (btnElement.classList.contains('e-customClass')) { 

 

                btnElement.setAttribute('data-bash', 'value'); 

 

            } 

        } 

    } 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core1105879671 

Please get back to us for further assistance. 

Regards, 

Logesh R