Details button

[TheDarkBoz]

Hello

I am sorry but I dont find how work the detail button with Essential JS2

Could you please give me an example?

Thank you

Best Regards

[Pavithra Subramaniyam]

Hi TheDarkBoz, 

Thanks for contacting Syncfusion Support. 

In Essential JavaScript 2 Grid component, You can add the detail button using detail template feature. Clicking the expand button in each Grid row will show the detailed information about that row. Please refer to the below code example, Documentation link and sample link. 

[index.chtml] 

<div> 

    <ejs-grid id="Grid" detailTemplate="#detailtemplate"> 

        <e-grid-columns> 

            .  .  . 

        </e-grid-columns> 

    </ejs-grid> 

     

</div> 

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

    <table class="detailtable" width="100%"> 

     .   .  . 

    </table> 

</script> 

Documentation : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/row.html?syntax=razor#detail-template  

Demo                  : https://aspdotnetcore.syncfusion.com/Grid/DetailTemplate#/material  

Sample                : https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core890645399  

Regards, 

Pavithra S. 

[TheDarkBoz]

Hello

Thank you for your answer that is usefull but i want to button like 

https://mvc.syncfusion.com/demos/web/grid/customcommand

It is possible in MVC core EJ 2?

Regards

[Pavithra Subramaniyam]

Hi TheDarkBoz, 

We have checked your query and you can achieve your requirement by using Command Columns feature of Essential JavaScript 2 Grid component. You can assign the command buttons in the ‘column.commands’ property. By default, Essential JavaScript 2 Grid command column has 4 built-in command buttons which are used for CRUD operations. You can also define the custom buttons in command columns. Please refer to the below code example, documentation link and sample link. 

[index.chtml] 

<div> 

    @{ 

 

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

        commands.Add(new { buttonOption = new { content = "Details", cssClass = "e-flat e-details" } }); 

    } 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

        { 

            .  .  . 

            col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

            col.HeaderText("Manage Records").Width("160").Commands(commands).Add(); 

 

        }).AllowPaging().DataBound("bound").AllowSorting().PageSettings(page => page.PageSize(10)).Render() 

 

</div> 

 

<script> 

    function bound(e) { 

        var ele = document.getElementsByClassName("e-grid")[0] 

        ele.addEventListener('click', function (e) {       //click event for command button 

            if (e.target.classList.contains('e-details')) {   

                var grid = document.getElementById('Grid').ej2_instances[0]; 

                var rowObj = grid.getRowObjectFromUID(ej.base.closest(e.target, '.e-row').getAttribute('data-uid')); 

                var data = rowObj.data; 

                alert(JSON.stringify(data)); 

            } 

 

        }); 

    } 

 

    </script> 

Documentation: https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/edit.html?syntax=razor#command-column  

Sample               : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Command_column-463115237  

Regards, 

Pavithra S.