Select field through the custom button in the toolbar

[Daniel]

Hi team,

I am trying to select a field value when I do click with a custom button in the toolbar grid nothing happened, I am doing this way:

 @Html.EJS().Grid("gvProceduresToInvoice").DataSource((IEnumerable<object>)ViewBag.ProceduresToInvoice).ToolbarClick("toolbarClick").Height("500px").AllowFiltering().AllowSorting().Columns(col =>

function toolbarClick(args) {

            var gridobj = document.getElementById("gvProceduresToInvoice").ej2_instances[0];

            if (args.item.id === 'btnInvoice') {

                 alert(args.rowData.CODE)

            }

Thanks,

[Balaji Sekar]

Hi Daniel, 

Greetings from the Syncfusion support. 

We checked your query with provided the information and you tried to access the Grid’s row data in the toolbarClick event’s argument but we do not access in this event. Please share the purpose accessing the row data when toolbar button click action that will help to validate further. 

Regards, 

Balaji Sekar. 

[Daniel]

Hi team,

Thanks for your support, I am trying to select the field of the row selected for two propose:

1. Asking the user if want invoice the row selected
2. If the user says yes, pass the code to the controller and process the current row.

This is the code that I am trying to implement:

  @{

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

            toolbarItems.Add("Search");

            toolbarItems.Add(new { text = "Facturar", id = "btnFacturar" });

        }

        @Html.EJS().Grid("gvProceduresToInvoice").DataSource((IEnumerable<object>)ViewBag.ProceduresToInvoice).ToolbarClick("toolbarClick").Height("500px").AllowFiltering().AllowSorting().Columns(col =>

   {

       col.Field("ID_QUOTE_EMBARQUES").IsPrimaryKey(true).AllowEditing(false).Visible(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("50").Add();

       col.Field("EXPEDIENTCODE").HeaderText("No. Expediente").AllowEditing(false).ValidationRules(new { maxLength = 12 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).HeaderTextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("250").Template("#ExpedientCode").Add();

       col.Field("CODE").HeaderText("Conocimiento Embarque").ValidationRules(new { maxLength = 250 }).ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).HeaderTextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("250").Add();

   }).Locale("es-HN").AllowPaging().PageSettings(page => page.PageCount(5)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Toolbar(toolbarItems).Render()

    </div>

    <script type="text/x-jsrender" id="ExpedientCode">

        <a rel='nofollow' rel='nofollow' rel='nofollow' href='../Embarques/FileManager/?fileManager=${EXPEDIENTCODE}'>${EXPEDIENTCODE}</a>

    </script>

    <script>

        function toolbarClick(args) {

            var gridobj = document.getElementById("gvProceduresToInvoice").ej2_instances[0];

            if (args.item.id === 'btnFacturar') {

                alert(args.item.rowData.CODE);

                var selectedRow = gridobj.getSelectedRecords();

                var data = JSON.stringify(selectedRow);

                console.log(JSON.parse(data).result);

            }

        }

 </script>

Thanks,

[Rajapandi Ravi]

Hi Daniel, 

Thanks for the update 

We understand that you are selecting a row in the Grid and by clicking custom button in your toolbar, you like to display the alert popup with your Grid “Code” column value. You can achieve your requirement by getting selected records and display the selected column field in the popup. Please refer the below code example and video demo for more information. 

 

 

toolbarClick(args)  { //toolbar click event 

        if(args.item.id === 'custombutton') { 

            var getselectedrecords = grid.getSelectedRecords()[0]; //get the selected records 

            var getfield = (getselectedrecords as any).FirstName //get the field value from the selected records 

            alert(getfield); 

        } 

    }; 

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

If the above scenario does not meet your requirement, please share your exact requirement scenario with detailed description and explain your requirement scenario with pictorial representation. 

Regards, 

Rajapandi R