In Grid Export to Excel not working

[Fred Morin]

In following code, Export to Excel is not working.  Am I doing something wrong ?

@using Syncfusion.EJ2.Navigations

@using TestWithFilterableComboBox.ViewModels

@model TestWithFilterableComboBox.ViewModels.ReportViewModel

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

@using (Html.BeginForm())

{

    <table style="width: 100%">

        <tr>

            <th>JobName</th>

            <th>Queued</th>

            <th>LineNo</th>

        </tr>

        <tr>

            <td> @Html.DropDownListFor(x => x.JobName, new SelectList(Model.Jobs, "Value", "Text"), "Job", new { style = "width: 450px;" })</td>

            <td> @Html.DropDownListFor(x => x.QueuedBeamStatus, new SelectList(Model.Queues, "Value", "Text"), "Queue", new { style = "width: 450px;" })</td>

            <td> @Html.DropDownListFor(x => x.LineName, new SelectList(Model.Lines, "Value", "Text"), "Line", new { style = "width: 450px;" })</td>

        </tr>

    </table>

    <br />

    <button type="submit">Search</button>

    <br />

    <br />

    @(Html.EJS().Grid("TestGrid").DataSource(Model.Report).Columns(col =>

              {

                  col.Field("Workorderid").HeaderText("Work Order Id").Width(150).Add();

                  col.Field("FullFilename").HeaderText("Full File Name").Add();

              }).AllowPaging(true).PageSettings(o => o.PageSize(10)).AllowSorting().AllowExcelExport().ToolbarClick("toolbarClick").AllowPdfExport().Toolbar(new List<string>() { "Print", "Search", "ExcelExport", "PdfExport" }).Render())

}

<style>

    .orientationcss .e-headercelldiv {

        transform: rotate(90deg);

    }

</style>

 

<script>

    function toolbarClick(args) {

        var gridObj = document.getElementById("TestGrid").ej2_instances[0];

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

            gridObj.excelExport();

        }

    }

</script>

<script type="text/javascript">

    $(function () {

        $("#JobName").change(function () {

            var val = $(this).val();

            var subItems="";

            $.getJSON("@Url.Action("GetQueues","Report")", {id:val} ,function (data) {

                $.each(data,function(index,item){

                    subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>";

                });

                $("#QueuedBeamStatus").html(subItems);

            });

            var subItems2="";

            $.getJSON("@Url.Action("GetLines","Report")", {id:val} ,function (data) {

                $.each(data,function(index,item){

                    subItems2+="<option value='"+item.Value+"'>"+item.Text+"</option>";

                });

                $("#LineName").html(subItems2);

            });

        });

    });

</script>

[Seeni Sakthi Kumar Seeni Raj]

Hi Fred,  

Greetings from Syncfusion.  

We have gone through the provided code example and we could see there is a mismatch between the Grid id and toolbarclick’s item id. Toolbar items and their id will be generated based on the Grid’s id only. It will be as follows,  

Grid ID + _ + item name (small case) 

For an example, Grid ID is TestGrid and we have toolbar item as ‘ExcelExport’. So, to look for a ExcelExport click, check the args.item.id as ‘TestGrid_excelexport’. 

 

@(Html.EJS().Grid("TestGrid")..AllowSorting().AllowExcelExport().ToolbarClick("toolbarClick").AllowPdfExport().Toolbar(new List<string>() { "Print", "Search", "ExcelExport", "PdfExport" }).Render()) 

 

<script> 

    function toolbarClick(args) { 

        var gridObj = document.getElementById("TestGrid").ej2_instances[0]; 

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

            gridObj.excelExport(); 

        } 

    } 

</script> 

Regards,  

Seeni Sakthi Kumar S. 

[Fred Morin]

Simply beautiful.  thanks a lot

[Seeni Sakthi Kumar Seeni Raj]

Hi Fred,  

Thanks for the update. We are happy to hear that your requirement has been achieved and you are good to go.  

Regards,  

Seeni Sakthi Kumar S.