Kendo Ui MVC 取消将选定的行导出为 pdf，并为非选择留空占位符

Question

我有一个启用了 PDF 导出工具的 Kendo ui 网格。我只想将 selected 行导出到 PDF，同时为 un-selected 行保留空行。

例如，如果我有以下 table 和 select 第 1 行和第 3 行：

Header 1Header 2Header 3
单元格 1 单元格 2 单元格 3
单元格 3 单元格 4 单元格 5
单元格 6 单元格 7 单元格 8

导出结果应该是这样的：

Header 1Header 2Header 3
单元格 1 单元格 2 单元格 3

单元格 6 单元格 7 单元格 8

到目前为止，这是我的网格代码：

  <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>

谢谢！

Answer 1

我明白了，只需要设置值 onChange 并刷新：

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();

}

Kendo Ui MVC 取消将选定的行导出为 pdf，并为非选择留空占位符

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

c#

jquery

export-to-pdf

kendo-ui-mvc