标签: kendo-grid

我正在尝试向KendoUI网格添加一个复选框列.这是小提琴.

我已经从剑道论坛上关注了这篇文章.
有人可以指出我在这里做错了什么.

这是相关代码:

data-columns = '[
    {"field":"Name", "filterable":true},
    {"field":"Price", "filterable":false},
    "UnitsInStock",
    {"field":"Recon"},
    "template": "<input type='checkbox' #= (Recon == true) ? checked ='checked' : '' # disabled />"
]'

我试图将以前仅限日期的字段转换为日期时间字段,但它不起作用.

我有:

schema: {
    model: {
    id: 'id',
    fields: {
        dateCreated: {
        type: "date", format: "{0:yyyy/MM/dd HH:mm}", editable: "false"
        },
        ...
    }
}

但这不起作用,日期格式正确,但时间最终为00:00.

如果我将字段类型更改为"字符串",则数据显示正确,但格式化为SQL方式,即:

2012-05-11 12:56:29

没有"datetime"这样的字段类型,只有"date".如何让它输出我想要的？即:

11/05/2012 12:56

有人有主意吗？

我在这里放了一个小提琴来证明这个问题.

http://jsfiddle.net/codeowl/fmzay/1/

只需删除一条记录,它应该回滚删除,因为我从destroy函数内部调用options.error.

为什么网格不会回滚？

问候,

斯科特

标记:

<div id="KendoGrid"></div>

JS:

var _data = [
        { Users_ID: 1, Users_FullName: 'Bob Smith', Users_Role: 'Administrator'  },
        { Users_ID: 2, Users_FullName: 'Barry Baker', Users_Role: 'Viewer'  },
        { Users_ID: 3, Users_FullName: 'Bill Cow', Users_Role: 'Editor'  },
        { Users_ID: 4, Users_FullName: 'Boris Brick', Users_Role: 'Administrator'  }
    ],
    _dataSource = new kendo.data.DataSource({ 
        data: _data,
        destroy: function (options) {
            options.error(new Error('Error Deleting User'));
        }
    });

$('#KendoGrid').kendoGrid({
    dataSource: _dataSource,
    columns: [
        { field: "Users_FullName", title: "Full Name" },
        { …

我正在使用ajax dataSource生成一个KendoUI Grid.该表已生成,默认情况下没有类.为了让它与网站的其他部分保持一致,我想为它添加一个"交互式"类.

$("#pending_documents").kendoGrid({
    dataSource: {
        transport: {
            read: "/get-data?type=1"
        },
        schema: {
            data: "data",
            total: "total"
        },
        pageSize: 2,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        reorderable: true
    },
    height: 500,
    filterable: {
        extra: false
/*
, ui: "datetimepicker" // use Kendo UI DateTimePicker
*/
    },
    sortable: true,
    pageable: {
        pageSize: 2        },
    columns: [...]
});
    });

我知道我可以使用JQuery.addClass()方法执行此操作,在生成网格后运行,但是如果有一种方法在网格设置/配置中设置它？

提前致谢.

我有一个kendo网格,编辑模式设置为incell.

以编程方式聚焦特定单元格以使其进入编辑模式的最优雅方式是什么？

假设我有一个网格,其中第1列和第6列是可编辑的.一旦用户完成在第1列中输入内容,我就希望第6列文本框能够自动聚焦并启用进行编辑,这样用户就不必手动点击同一行的下一个可编辑网格单元.

这就是我现在正在做的事情:

//Focuses the editable cell at given row/column index.
//Closes the previously editing cell
//EX: setGridFocus(SALE_01_DIV_GRID,0,0) --> Focuses SALE_01_DIV_GRID (0,0)
function setGridFocus(gridID, rowIndex, colIndex)
{
    var grid = $('#' + gridID).data('kendoGrid');
    grid.closeCell();

    setTimeout(function(){
        var cell = $('#' + gridID).find('tbody tr:eq('+rowIndex+') td:eq('+colIndex+')');
        grid.editCell(cell);
        var editTextCell = cell.find("input.k-formatted-value");

        editTextCell.focus(function() {
            $(this).select().mouseup(function (e) {
                e.preventDefault();
                $(this).unbind("mouseup");
                e.select();
            });
        });
        cell.find("input[type=text]").select();
        editTextCell.selectall();
    },50); 
}

首先,我正在使用setTimeout来实现看似简单的函数,所以这似乎不是理想的方法.

其次,上面的功能只有在感觉就好的时候才有效(只有一半的时间来自测试.可能是从setTimeout函数中预期的).我觉得这与Kendo Grid内部调用的事件顺序有关.

第三,我想阻止选择正在聚焦的单元格内的文本.editTextCell.selectall(); 不适用于此目的.

我很感激任何指导.

我已经创建了asp.net MVC 4应用程序,其中我使用的是实体框架,类"Data"就是模型.

AdventureWorksTrainingEntities _dbContext = new AdventureWorksTrainingEntities();
Data _data = new Data();  //Model

现在我想将表的数据显示到kendo网格.在控制器中,我使用以下代码:

 public ActionResult Index()
        {
           List<Movie> dataForGrid= _dbContext.Movies.ToList();
           return View(dataForGrid);
        }

现在我不知道在Kendo Grid中显示数据(我是kendo和MVC的新手).我也试过以下但没有工作:

@model   IEnumerable<MvcApp.Models.Data>
@using Kendo.Mvc.UI 
@{
    ViewBag.Title = "Index";
}

<h2>Grid For Data</h2>
Html.Kendo().Grid<Order>()
    .Name("Grid")
    .DataSource(dataSource => dataSource // Not implemented
)

我正在尝试上传文件,文件上传成功上传.当我发送额外的值以及文件上传保存网址时,我遇到了问题.

我创造了一个jsfiddle

Jsfiddle示例链接 我能够上传文件,但我想发送drowpdown值和文本框值以及文件上传.

    <span>Document Type
<select id="dropdownlist">
    <option>Id Proof</option>
    <option>Driving Liscence</option>
    <option>Other</option>
</select>
    <br/>
    Doc Number<input type="text" class="k-text" />
    <br/>
<div style="padding: 4px; margin-bottom: 10px;">
        Acceptable file types: .xml<br/>File size limit: 5MB
 </div>
    <input type="file" name="batchFile" id="batchFile" title="Select file" />
    <div id="upload-error" class="k-state-selected" style="padding: 4px; margin-top: 10px; display: none"></div>

<script>
$("#dropdownlist").kendoDropDownList();


$("#batchFile").kendoUpload({
    async: {
        saveUrl: '/Upload',
        autoUpload: false
    },
    multiple: false,
    localization: {
        select: "Select a file",
        uploadSelectedFiles: "Send"
    }
});
</script>

我发现kendoui图表有两种方法:refresh方法和redraw方法,有什么区别？我认为它们都是再次绘制图表.但是,如果图表根据ajax从远程数据绑定,则请求将不会再次触发.

$("#Chart").data("kendoChart").redraw();
$("#Chart").data("kendoChart").refresh();

在我的kendogrid中,我需要显示一个下拉菜单(单击按钮)并允许列调整大小,如果我的数据对于网格来说太大,则显示滚动条.我遇到溢出设置问题.

现场样本 http://jsbin.com/gayibo/4/edit?css,output

如果我overflow-y: scroll在网格上设置,则下拉菜单并不总是可见.

另一方面,如果我设置overflow-y: visible,我会在右侧看到溢出的行.

我已经尝试了一切,每个可能的溢出组合,更改z索引,在我多余的行数据上显示黄色div.没有任何效果.

我也试过更改下拉菜单,position: fixed但是当你因任何原因滚动窗口时会出现问题(因为菜单没有显示在按钮下面)

例如:固定菜单的定位

浏览器:Chrome/Firefox(ff需要更多调整大小才能获得相同的效果)

Twitter-Bootstrap:2.3.2

我有一个带有多列标题的网格,并且有一个组列A被锁定.这是代码:

$scope.gridOptions.columns = [
            {
                title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A",
                columns: [{ field: "ROW_HEADER", filterable: false, width: "20px", title: "   .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha  rowHeaderCell" } },
                          { field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
                          { field: "COLUMN2", …