外键列在编辑模式下禁用,但在添加模式下可编辑

时间:2013-06-07 07:47:54

标签: kendo-ui kendo-grid

我有一个Kendo网格,看起来像:

 @(Html.Kendo().Grid<UserHolidayRightDto>()
.Name("gridHoliday")
.ToolBar(tool=>tool.Create())
.Columns(columns =>
{
columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Title("Date added");
columns.Bound(p => p.ValidForYear).Title("For year");
columns.ForeignKey(p => p.RightTypeId,  
System.Collections.IEnumerable)     
 @Model.HolidayRightsView, "Id", "Name").Title("Right type").HtmlAttributes(new   
{@Id="HolidayRightsDropDown"});
columns.Bound(p => p.Days).Title("Days");
columns.Bound(p => p.Comment).Title("Comment");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
}) 
.Scrollable(s=>s.Height(200)) 
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(e=>e.Edit("edit"))
.Events(e=>e.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax() 
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ValidForYear).Editable(false).DefaultValue(@DateTime.Now.Year);
model.Field(p => p.Date).Editable(false); 
}) 
.Events(e=>e.RequestEnd("UpdateWindow")) 
.Read(read=>read.Action("ReadData","HolidayRights",new {id=@Model.Employee.PersonID}))
.Create(update => update.Action("EditingInline_Create", "HolidayRights",new    
{personId=@Model.Employee.PersonID})) 
.Update(update => update.Action("EditingInline_Update", "HolidayRights"))
.Destroy(update => update.Action("EditingInline_Destroy", "HolidayRights"))
 ))

我想让我的外键列在创建模式下可编辑,在编辑模式下禁用。我尝试过如下解决方案:      $(“#HolidayRightsDropDown”)。attr(“readonly”,true);

或     var d = document.getElementById(“HolidayRightsDropDown”);       d.disabled = true;

或      closecell() - 但此功能仅适用于cellediting 但没有成功。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

Id属性仅应用于列元素(td),而不是下拉列表的实际输入。请尝试使用以下代码进行网格编辑功能

function gridEdit(e) {
    if (!e.model.isNew()) {
        var input = $("input[name='RightTypeId_input']");
        input.prop('disabled', true);
        input.addClass("readonly"); // add custom css class to make it looks 'disabled' 
        // avoid clicking on Kendo spans
        input.next('span.k-select').unbind("click");
    }
}

<强> CSS

input.readonly
{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
background-color:#E6E6E6 !important;
}