Export a Jquery bootgrid to Excel

Asked

Viewed 144 times

1

I searched here on Stak and online, and I have seen some articles and tips on how to export an HTML table to excel. But in my case, I think it’s a little different because I’m using Jquery Bootgrid and all the materials I read end up not working.

As I have a filter in the bootgrid and already have the data filtered on the screen, I need to export this data to Excel. As I have seen, some programmers recommend transforming the HTML table to excel.

I’ve used Jquery.table2excel, also tried tableexport, but none worked. My bootgrid is simple, and still can’t export excel from it. The closest I got was with tableexport, but the file is generated empty.

Follow my code, I’m using ASP.NET MVC with bootgrid. 

@{
    ViewBag.Title = "Lista - Certificados Digitais";

}

<body>

    <p>
        <a href="#" class="btn btn-success" data-action="Create">
            <span class="glyphicon glyphicon-plus"></span>
            Cadastrar
        </a>

    </p>


    <table id="gridCertificados">
        <thead>
            <tr>
                <th data-column-id="CertificadoChave">Chave</th>
                <th data-column-id="CertificadoDescricao">Descrição</th>
                <th data-column-id="TipoCertificadoNome">Tipo</th>
                <th data-column-id="ModeloCertificadoNome">Modelo</th>
                <th data-column-id="FornecedorNome">Fornecedor</th>
                <th data-column-id="CertificadoPreco">Preço</th>
                <th data-column-id="CertificadoDtVencimento" data-order="asc">Vencto.</th>
                <th data-formatter="acoes" data-sortable="false">Ações</th>
            </tr>
        </thead>
    </table>

    <button id="btn" class="btn btn-success">Exportar Excel</button>

    <div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg role=" document"">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="conteudoModal"></div>
                </div>
            </div>
        </div>
    </div>


</body>

@section scripts
    {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.table2excel.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.bootgrid.js"></script>
    <script src="~/Scripts/Projeto/ControlarGrid.js"></script>

    <script type="text/javascript">


            var controller = "Certificados";

        var urlListar = "@Url.Action("Listar")"

        $(document).ready(configurarControles);

        $("#btn").click(function () {
            $("#gridCertificados").table2excel({
                name: "Certificados",
                filename: "certif"
            });
        });

    </script>
}
jquery asp.net-mvc mvc bootgrid

  • I believe that bootgrid does not have this transformation to excel natively. At least as far as I’ve seen in his documentation I haven’t seen anything about it, one that I know has this natively is the datagrid

  • you could provide the way you implemented the filter?

1 answer

1

It is not included in the documentation of jquery-bootgrid the possibility to export, however you can use the Tableexport.js. You said in the question that you could not use it. Here is a note from documentation.

To use this plug-in, include the library jQuery, the script Filesaver.js and the plug-in Tableexport.js before the tag <body> closure of the HTML document.

$("#gridCertificados").bootgrid();
$("#gridCertificados").tableExport();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/css/tableexport.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/css/tableexport.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/js/tableexport.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>






<table id="gridCertificados" class="table table-condensed table-hover table-striped">
  <thead>
    <tr>
      <th data-column-id="id" data-type="numeric">Codigo</th>
      <th data-column-id="sender">Email</th>
      <th data-column-id="received" data-order="desc">Data cadastro</th>
      <th data-column-id="link" data-formatter="link">Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10238</td>
      <td>[email protected]</td>
      <td>14.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10243</td>
      <td>[email protected]</td>
      <td>19.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10248</td>
      <td>[email protected]</td>
      <td>24.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10253</td>
      <td>[email protected]</td>
      <td>29.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10234</td>
      <td>[email protected]</td>
      <td>10.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10239</td>
      <td>[email protected]</td>
      <td>15.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10244</td>
      <td>[email protected]</td>
      <td>20.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10249</td>
      <td>[email protected]</td>
      <td>25.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10237</td>
      <td>[email protected]</td>
      <td>13.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10242</td>
      <td>[email protected]</td>
      <td>18.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10247</td>
      <td>[email protected]</td>
      <td>23.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10252</td>
      <td>[email protected]</td>
      <td>28.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10236</td>
      <td>[email protected]</td>
      <td>12.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10241</td>
      <td>[email protected]</td>
      <td>17.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10246</td>
      <td>[email protected]</td>
      <td>22.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10251</td>
      <td>[email protected]</td>
      <td>27.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10235</td>
      <td>[email protected]</td>
      <td>11.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10240</td>
      <td>[email protected]</td>
      <td>16.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10245</td>
      <td>[email protected]</td>
      <td>21.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10250</td>
      <td>[email protected]</td>
      <td>26.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
  </tbody>
</table>

How are you using ASP . NET MVC, a second alternative to generate Excel is to use the Epplus. Just install it via Nuget. https://www.nuget.org/packages/EPPlus/

public ActionResult Exportar()
{

    var excel = new ExcelPackage();
    var data = _repository.ObterDados().ToList();

    var workSheetDetalhes = excel.Workbook.Worksheets.Add("Detalhes");

    workSheetDetalhes.Cells[1, 1].LoadFromCollection(data, true);

    workSheetDetalhes.Cells["A1:L1"].Style.Font.Bold = true;

    workSheetDetalhes.Cells.AutoFitColumns();


    using (var memoryStream = new MemoryStream())
    {
        Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        Response.AddHeader("content-disposition", $"attachment;  filename=Relatorio_{DateTime.Now.Year}_{DateTime.Now.Month}_{DateTime.Now.Day}_Detalhe.xlsx");
        excel.SaveAs(memoryStream);
        memoryStream.WriteTo(Response.OutputStream);
        Response.Flush();
        Response.End();
    }
    return RedirectToAction("Index");
}

  • My table, as I understand it is mounted dynamically by bootgrid, I think that might be the problem. I tried again to use Tableexport, and still the files are being generated blank.I can’t use $("#gridCertificados"). bootgrid(); I paginate on bootgrid and when declaring this chunk in my view bootgrdid is empty. I’m gonna go through the Epplus here and see if I can export..

Browser other questions tagged jquery asp.net-mvc mvc bootgrid

You are not signed in. Login or sign up in order to post.