标签: kendo-grid

我想做的是将两列连接或合并到剑道网格中的单列中。

我尝试这样做，但到目前为止没有成功，也搜索了它，但仍然不知道如何做？

我想将两列或三列连接成一个，例如

First Name

Middle Name

Last Name

全部应以单一形式显示

Full Name

这是我的一些 kendogrid 代码。

$("#EmployeeGrid").kendoGrid({
        dataSource:{
            transport: {
                read: "<?php echo base_url() ?>index.php/hr_management/manage_hr/list_view"
            },
            schema:{
                data: "data"
            }
        },

        columns: [
            {
                field: "EmployeeID",
                hidden:true
            },
            {
                field:"LastName"
            },
            { field: "LastName"+"FirstName",
                title:"Full Name"
            },
            {
                field:"City",
                title:"City"
            },
            {
                field:"AddressLine1",
                title:"Address 1"
            },

            {
                field:"WorkPhone",
                title:"WorkPhone"
            },
            {
                field:"MobileNo",
                title:"Mobile No"
            },
            {command: { text: "View", click: showDetails }, title: " ", width: "140px"},
            {command: { text: "Edit", …

我有下面的网格和按钮。我想要实现的是在单击 btnAdd 时触发 Kendoui 弹出窗口。我知道如果您将按钮放在 kendo ui 网格工具栏中，就可以实现这一点。

请指教，谢谢

    <script>      
        $('#btnAdd').click(function () {               

        });
     </script>        

     <input type="button" id="btnAdd"/>

    @(Html.Kendo().Grid<PWeb_App.ViewModels.ResultModel>()        
            .Name("Result")
            .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:985px" })               
            .Columns(columns =>
            {
                columns.Bound(p => p.GivenName).Width(90);
                columns.Bound(p => p.FamilyName).Width(90);       
            })
            .ToolBar(toolbar => toolbar.Save())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Sortable()        
            .Pageable(paging => paging
                .Input(false)
                .Numeric(true)        
                .PreviousNext(true)
                .PageSizes(new int[] { 5, 10, 25, 50 })
                .Refresh(false)        
            )        
            .Selectable()
            .Scrollable()
            .ColumnMenu(c => c.Columns(false))
            .DataSource(dataSource => dataSource        
                .Ajax()//bind with Ajax instead server bind
                .PageSize(10)
                .ServerOperation(true)
                .Model(model =>
                    { …

如何在 JavaScript 警报中显示所有 Kendo 网格列宽度？

我正在尝试这个，

alert(JSON.stringify(grid.column));

但我需要的只是列宽。

使用行数据模板或使用 HTML 作为字段值的列标题模板，我可以向 Kendo UI 网格添加一个复选框。例如：

  <div id="grid"></div>
  <script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
        columns: [{
            field:'<input id="masterCheck" type="checkbox" /><label for="masterCheck"></label>', 
          width: 33,  
          height: 550,
            }] 
        });
      });
    </script>

但是，该复选框的样式并不符合 Kendo UI 主题。将 class="k-checkbox" 添加到输入复选框元素应根据主题设置其样式。但是，当我将该类应用于复选框时，该复选框不再可见。如何让 k 复选框在网格中可见？

该问题的示例位于http://dojo.telerik.com/AjuFo

我需要打开一个窗格，在其中可以显示所选列的全文。我指的 是如何在 kendo ui 网格上添加多个工具提示。

但不知道如何获取所选每列的工具提示。

提前致谢。

也许有人可以帮助我解决我遇到的这个问题......

我的剑道 UI 网格

$("#grid").kendoGrid({            
        dataSource: {
            data: self.positions(),
            pageSize: 50
        },
        filterable: true
    });  

其中 self.positions() 是一个通过 ajax Get 填充的剔除可观察数组。

我现在的问题是，当我刷新位置可观察数组并将新数据重新绑定到网格时，列过滤器无法正确刷新数据。我的过滤器仍然显示旧的持仓数据。

有什么帮助吗？？？

Kendo UI DOJO 示例： http://dojo.telerik.com/oVOsi/31

我正在为我的 ASP.NET Core 应用程序使用 Kendo 工具。我有一个网格，我想将自定义按钮添加到网格工具栏。我可以轻松添加“导出到 Excel”按钮，但添加自定义按钮非常困难。

目前我只在网格上方显示按钮，以下是这些按钮：

<a href='#' class='k-button' id='saveState'>Save Grid Settings</a>
<a href='#' class='k-button' id='clearState'>Clear Grid Settings</a>

这是我的网格：

@(Html.Kendo().Grid<SylectusTL.ViewModels.Account.UserList>()
.Name("UserList")
.Columns(columns =>
{
    columns.Bound(c => c.user_name).ClientTemplate(@"<a href=" + @Url.Content("/Account/UserProfile?caller='UserList'&user_id=#:data.user_id#") + ">#: user_name #</a>").Title("User Name");
    columns.Bound(c => c.full_name).Title("Name");
    columns.Bound(c => c.main_phone).Title("Phone").Width(150);
    columns.Bound(c => c.main_phone_ext).Title("Ext").Width(100);
    columns.Bound(c => c.email).Title("E-Mail");
    columns.Bound(c => c.admin).ClientTemplate("#= admin ? 'Y' : 'N' #").Title("Admin").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
    columns.Bound(c => c.active).ClientTemplate("#= active ? 'Y' : 'N' #").Title("Active").Width(100).HeaderHtmlAttributes(new { …

我有类似的问题，为什么我的excel导出按钮不起作用？它有什么问题。感谢帮助。

$("#grid").kendoGrid({
  toolbar: ["create", "excel", "pdf"],
  excel: {
    		fileName: "Test.xlsx",
        allPages: true
    },
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33},
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});

.k-grid-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.k-grid-toolbar .k-grid-excel {
    margin-left: auto;
}

<!DOCTYPE html>
<html> …

我这里有这个剑道确认功能。当我点击OK它时我想要什么运行这个grid.dataSource.remove(data) grid.dataSource.sync()。谁能帮助我如何实现这一目标？提前致谢。

function(e) { 
  return $("<div></div>").kendoConfirm({
    title: "My Title",
    content: "Are you sure to delete this record?",
    messages:{
      okText: "OK",
      cancel: "Cancel"
    }
  }).data("kendoConfirm").open().result;
  
  // if click OK run this
  // grid.dataSource.remove(data) 
  // grid.dataSource.sync() 	
}

我想隐藏 kendo-ui 网格的标题行。通过Telerik 论坛上的这个答案， 我应用了这种风格。

.k-grid-header{
  display: none;
}

但标题仍然显示。这意味着该样式未应用。

请参阅StackBlitz 演示