Kendo Ui MVC rid export selected lines to pdf with empty placeholder for non selections

Question

I have a Kendo ui grid with a PDF export tool enabled. I want to be export only the selected lines to PDF while leaving the empty lines for the un-selected ones.

For example if I have the following table and select rows 1 and 3:

Header 1Header 2Header 3
Cell 1      Cell 2      Cell 3      
Cell 3      Cell 4      Cell 5      
Cell 6      Cell 7      Cell 8      

The export result should be this:

Header 1Header 2Header 3
Cell 1      Cell 2      Cell 3      
                                            
Cell 6      Cell 7      Cell 8      

And this is the code for my grid so far:

  <script type="x/kendo-template" id="page-template">
    <div class="page-template">
      <div class="header">
        <div style="float: right">Ficha #: pageNum # de #: totalPages #</div>
        @Html.LabelFor(model => model.FirstOrDefault().Clientes.Nombre)
        @Html.DisplayFor(model => model.FirstOrDefault().Clientes.Nombre)
        @Html.LabelFor(model => model.FirstOrDefault().Clientes.Telefono)
         @Html.DisplayFor(model => model.FirstOrDefault().Clientes.Telefono)
      </div>

      <div class="footer">
        Ficha #: pageNum # de #: totalPages #
      </div>
    </div>
  </script>


  @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .ToolBar(toolbar => toolbar.Create().Text("Nuevo").HtmlAttributes(new { @class = "" }))
            .ToolBar(tools => tools.Pdf().Text("Imprimir"))
            .Pdf(pdf => pdf
            .AllPages()
            .AvoidLinks()
            .PaperSize("A4")
            .Scale(0.8)
            .Margin("2cm", "1cm", "1cm", "1cm")
            .RepeatHeaders()
            .TemplateId("page-template")
            .FileName("Ficha.pdf")
            .ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
            .Pageable(pager => pager
   .Refresh(true)
)
            .Columns(columns =>
            {
                columns.Bound(p => p.IdFicha).Title("Numero");
                columns.Bound(p => p.Fecha).Format("{0:dd/MM/yyyy}");
                columns.Bound(p => p.Descripcion).Title("Descripción");
                columns.Bound(p => p.Comentarios);
                columns.ForeignKey(x => x.IdCliente, (System.Collections.IEnumerable)ViewData["clientes"], "IdCliente", "Nombre").Hidden();
          
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn btn-primary" })
                 .Text("Editar")
                 .UpdateText("Guardar")
                 .CancelText("Cancelar");
                    command.Destroy().Text("Eliminar");

                });

            })
             .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Fichas")))
    .Pageable(p => p
                .Messages(m => m
                    .Display("Mostrando {0}-{1} de {2} registros")
                    .Empty("No se encontraron registros")
                    .First("Ir a la primera página")
                    .Last("Ir a la última página")
                    .Next("Ir a la página siguiente")
                    .Previous("Ir a la página anterior")
                )
)
.DataSource(dataSource => dataSource
        .Ajax()
    .Read(read => read.Action("Ficha_Read", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
    )
    .Sortable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Pageable(x => { x.Enabled(false); })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model => model.Id(p => p.IdFicha))
        .Destroy(update => update.Action("Ficha_Destroy", "Home"))
        .Update(update => update.Action("Ficha_Update", "Home"))
        .Create(update => update.Action("Ficha_Create", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
     )
    .Events(e => e.PdfExport("PdfExport"))
)


  @(Html.Kendo().Window()
    .Name("alertWindow")
    .Title("Error")
    .Draggable()
    .Resizable()
    .Width(400)
    .Height(100)
    .Modal(true)
    .Visible(false)
  )

<script type="text/javascript">
function additionalData(e) {

      
    var value = $("#filter").data("kendoDropDownList").value();
    return { idcliente: value }; // send the filter value as part of the Read request
  }

  function onChange() {
    var grid = $("#Grid").data("kendoGrid");
    grid.dataSource.read(); // rebind the Grid's DataSource
  }

  var exportFlag = false;


  function PdfExport(e) {


    //Hide edit columns for export
    if (!exportFlag) {
        e.sender.showColumn(3);

      e.preventDefault();
      exportFlag = true;

    

      setTimeout(function () {
        e.sender.saveAsPDF();
      });
    } else {
        e.sender.hideColumn(3);

      exportFlag = false;
    }

  

  }



</script>

Thanks!

Answer 1

I figured it out, just needed to set the value onChange and refresh:

function onChange(arg) {
    var selected = this.select();

    $('#Grid').data('kendoGrid').dataSource.at(selected[0].rowIndex -1).Descripcion = '';
    $('#Grid').data('kendoGrid').dataSource.at(selected[0].rowIndex - 1).Comentarios = '';
    $('#Grid').data('kendoGrid').dataSource.at(selected[0].rowIndex - 1).Fecha = '';

    $('#Grid').data('kendoGrid').refresh();

}