kendo-grid 相关问题

我有一个包含普通数据表的数据网格组件，我只想在导出的 PDF 的开头添加一个简单的标题，如下所示：学生 DEPA... 我有一个包含普通数据表的数据网格组件，我只想在导出的 PDF 的开头添加一个简单的标题，如下所示： <div> <h1>STUDENTS DEPARTMENT TABLE</h1> <h3>DEPARTMENT OF ENGINEERING, 2023</h3> </div> 我试图将其包装在 GridPDFExport 组件中，如下所示： <div> {grid} <GridPDFExport landscape={true} repeatHeaders={true} paperSize='A4' scale={0.5} ref={pdfExport => gridPDFExport = pdfExport} margin='1cm' > <div> <h1>STUDENTS DEPARTMENT TABLE</h1> <h3>DEPARTMENT OF ENGINEERING, 2023</h3> </div> {grid} </GridPDFExport> </div> 这是我的导出方法： const exportToPDF = () => { setTimeout(() => { if (gridPDFExport) { gridPDFExport.save(gridData) } }, 250) } 但是导出的 PDF 中根本不显示标题，只显示网格。我希望标题显示在 PDF 的顶部，但只显示了网格。我检查了文档，似乎没有任何效果。关于如何实现这个的任何想法？您可以使用页面模板：https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/page-template/ 这里我定义了一个模板，它只会呈现第 1 页： const PageTemplate = props => { if (props.pageNum === 1) { return <div style={{ position: "absolute", top: "10px", left: "10px" }}> STUDENTS DEPARTMENT TABLE, DEPARTMENT OF ENGINEERING, 2023 </div>; } }; 然后将其指定为GridPDFExport定义中的一个选项： <GridPDFExport pageTemplate={PageTemplate} > {grid} </GridPDFExport>

reactjs typescript kendo-ui kendo-grid kendo-react-ui

回答 1 投票 0

How to dymatically generate the first column in a table using Kendo Ui

我有使用 Kendo UI 输出的表格，如下所示：我想要的结果是让表有一个额外的列“#”，它只包含数据 1、2、3、4 等。下面是我试图解决...

javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

回答 1 投票 0

Kendo UI 按钮和弹出窗口

我需要在弹出窗口中添加按钮“NEXT”，当我点击按钮“NEXT”时如何触发它会产生弹出窗口 2？有人知道吗？请参考下面我的DEMO。谢谢。在这里演示

javascript kendo-ui kendo-grid popupwindow

回答 1 投票 0

如何在 MVC 的 Kendo 网格弹出模板中获取图像？

我正在使用 Kendo 网格弹出模板，我试图在模板中获取图像名称和路径，但没有成功。这是我的索引视图： @(Html.Kendo().Grid 我正在使用 Kendo 网格弹出模板，我试图在模板中获取图像名称和路径，但没有成功。这是我的索引视图： @(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>() .Name("grdImageModel") .DataSource(datasource => datasource .Ajax() .Model(model => model.Id(p => p.IMAGESIZE_ID)) .Create(create => create.Action("Create", "Imagetest")) .Update(update => update.Action("Editing_Update", "Imagetest")) .Destroy(delete => delete.Action("Delete", "Imagetest")) .Read(read => read.Action("GetData", "Imagetest")) .Model(model => { model.Field(p => p.IMAGESIZE_ID).Editable(true); model.Id(p => p.IMAGESIZE_ID); model.Field(p => p.IMAGESIZE_ID).Editable(false); // model.Field(p => p.isenabled).DefaultValue(true); }) ) .Columns(columns => { //columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Width(50); columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Title("Image No"); columns.Bound(c => c.IMAGESIZE_NAME).Width(140).Title("Image Name"); columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>").Title("Image"); columns.Bound(c => c.created_by).Title("Created By"); columns.Bound(c => c.created_date).Title("Created Date"); columns.Bound(c => c.modified_by).Title("Modified By"); columns.Bound(c => c.modified_date).Title("Modified Date"); columns.Command(command => { command.Edit(); command.Destroy(); }); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ImageModel")) .HtmlAttributes(new { style = "height: 580px;" }) .Scrollable() .Sortable() .Pageable(pageable => pageable .Refresh(true) .PageSizes(true) .ButtonCount(5) ) ) 这是我的编辑器模板： <div> @(Html.Kendo().Upload() .Name("files") .Multiple(false) .Messages(msg => msg.Select("Browser")) .Events(e => e .Select("onSelect").Remove("onRemove")) ) <div style="height:150px;width:150px;" id="divimage"></div> </div> 这是我的控制器： [AcceptVerbs(HttpVerbs.Post)] public ActionResult Create([DataSourceRequest] DataSourceRequest request, IEnumerable<HttpPostedFileBase> files) { return View(""); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, string imagename, string imagepath) { return RedirectToAction("index"); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Delete([DataSourceRequest] DataSourceRequest request, ImageModel imagemodel) { return View(); } public JsonResult GetData([DataSourceRequest] DataSourceRequest request) { var list = db.imageModels.ToList(); return Json(list.ToDataSourceResult(request)); } 如果我把kendo上传控件作为一个单独的控件使用，那么我很容易得到图片路径和名称。但是如果我在网格弹出窗口中使用剑道上传，那么我就看不到图像了。我假设您的上传控件是更大表单的一部分。尝试在 .ToClientTemplate() 上添加 Html.Kendo().Upload() 希望我能正确理解你的问题。

asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid kendo-asp.net-mvc

回答 1 投票 0

如何使用 kendo-grid-column 中的自定义组件为 Angular 复制 kendo 网格中的行

我在剑道网格中处理行时遇到问题。它的工作绝对不可预测。有时正常复制行中的所有值，但是当我调用删除行，删除最后一行时，我不知道为什么。这是...

angular typescript kendo-ui kendo-grid crud

回答 0 投票 0

基于 rowcell 值的 Kendo-Grid UI 启用/禁用按钮 - Angular

我正在使用其中一列中带有下载按钮的 Kendo-Grid。我想根据行的单元格值启用或禁用按钮。这是我在 html 中的剑道网格我正在使用其中一列中带有下载按钮的 Kendo-Grid。我想根据行的单元格值启用或禁用按钮。这是我在 html 中的剑道网格 <kendo-grid [kendoGridBinding]="engagementData" [resizable]="true" [sortable]="true" [pageable]="true" [pageSize]="10"> <kendo-grid-column field="Engagement" title="Engagement" [width]="150" value="value" [filterable]="true"> <ng-template kendoGridFilterCellTemplate let-filter let-column="column"> <kendo-grid-string-filter-cell [column]="column" [filter]="filter"> </kendo-grid-string-filter-cell> </ng-template> </kendo-grid-column> <kendo-grid-column field="ExtractionStatus" title="Overall Extraction Status" [width]="120"> <ng-template kendoGridFilterCellTemplate let-filter let-column="column"> <kendo-grid-string-filter-cell [column]="column" [filter]="filter"> </kendo-grid-string-filter-cell> </ng-template> </kendo-grid-column> <kendo-grid-column field="ExtractionStatus" title="Action" [width]="120" value="value" [filterable]="false"> <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex"> <strong><button (click) = "parentDownloadClick()" style="color: #007bff;cursor: pointer;" [disabled] = "engagementData.ExtractionStatus == 'In Progress'">Download</button></strong> </ng-template> </kendo-grid-column> 我正在使用下面的代码来禁用按钮 [disabled] = "engagementData.ExtractionStatus == 'In Progress'" 但是我得到一个编译错误'Property 'ExtractionStatus' does not exist on type 'ItransactionDetails[]'' 这是我的 ITransactionDetails 的样子，它是 engagementData 的数据类型。 export interface ItransactionDetails { TransactionID: string; Engagement: string; ExtractionStatus: string; } 如何读取单元格值以禁用/启用按钮？或者有更好的方法吗？有人可以帮我解决我可能遗漏的问题吗？

angular kendo-ui kendo-grid kendo-ui-angular2 kendo-ui-grid

回答 0 投票 0

将自定义 css 类添加到 kendo:grid-column

我注意到为了添加自定义的 css 类我可以使用 columns.attribute。但是，我想添加一个内联代码来添加该属性。这是我的代码：我注意到为了添加自定义 css 类我可以使用 columns.attribute。但是，我想添加一个内联代码来添加该属性。这是我的代码： <kendo:grid-column title="Quantity" field="qty" template="#=qty# <input type='hidden' name='qty' value='#=qty#'/>"> [class]="'className'" </kendo:grid-column> 我遇到了一种添加自定义类的方法（来自此链接），但是在实现此方法时，我收到了警告：“未定义的属性名称'class'”。请忽略代码中的空格。任何其他解决方案将不胜感激:) 您收到“未定义的属性名称‘class’”警告的原因是您试图在 kendo:grid-column 元素的开始标记之外添加“class”属性。要使用内联代码向 kendo:grid-column 元素添加自定义类，您可以执行以下操作： cpp Copy code <kendo:grid-column title="Quantity" field="qty" template="#=qty# <input type='hidden' name='qty' value='#=qty#'/>" #columns.attribute("class", "className")# ></kendo:grid-column> 在此代码中，您可以看到使用#columns.attribute()# 语法将值为“className”的“class”属性添加到 kendo:grid-column 元素。此语法应放在元素的开始标记内。检查这个page

kendo-grid

回答 1 投票 0

我怎样才能修复这个 React Hook 示例，使其具有与用类编写的这个示例相同的功能？

我正在尝试在窗口调整大小时动态设置我的列的最小宽度！ Kendo 网站上使用类的示例工作正常。但是使用 Hooks 的不是。有人可以帮我弄清楚...

reactjs kendo-ui kendo-grid hook

回答 0 投票 0

选择剑道网格中的所有行甚至其他页面

我可以使用 kendogrid 表，我想用其他页面选择所有记录。但是数据太大了。所以当我选中全选复选框时，页面卡住了。我找到了一个在线解决方案...

kendo-grid

回答 0 投票 0

Angular KendoGrid excelExport 事件。添加自定义列

我正在使用 KendoGrid 的 excelExport 事件在导出之前操作一些列数据。是否可以在两个现有列之间添加一个新列？这是我的代码...