How to make only one field on the data model to be visible and editable using Kendo UI listview + ASP.NET MVC?

I have a Kendo UI List View that is bound to a datasource. There is a model class that has fields such as {Id, Name, Description, IsActive and so on). I followed the Kendo UI Listview demo and added the Edit and delete icons and the respective controllers. On the edittemplate, I have specified only the Name field but when I click on Edit, I get the textbox or other controls for all the fields on the Model. Is there a way to specify which field to edit ?

我有一个绑定到数据源的Kendo UI列表视图。有一个模型类，其中包含{Id，Name，Description，IsActive等字段）。我按照Kendo UI Listview演示，添加了编辑和删除图标以及相应的控制器。在edittemplate上，我只指定了Name字段，但是当我单击Edit时，我得到了Model上所有字段的文本框或其他控件。有没有办法指定要编辑的字段？

Thanks much for your help.

非常感谢你的帮助。

2 个解决方案

#1

There are two things that you need to do, one functionally requested and the other requested from UX point of view.

您需要做两件事，一个是功能性请求，另一个是从UX角度请求的。

Make sure that in your model you define the field as non editable
确保在模型中将字段定义为不可编辑
In your template do not show the field as an editable input.
在模板中，不要将该字段显示为可编辑的输入。

If you have modify the example from KendoUI web you have the Model in the Schema of the DataSource defined as:

如果您已从KendoUI web修改示例，则将DataSource的Schema中的Model定义为：

schema   : {
    model: {
        id    : "ProductID",
        fields: {
            ProductID   : { editable: false, nullable: true },
            ProductName : "ProductName",
            UnitPrice   : { type: "number" },
            Discontinued: { type: "boolean" },
            UnitsInStock: { type: "number" }
        }
    }
}

And you want that ProductName becomes not editable. Then you have to change it to:

并且您希望ProductName变得不可编辑。然后你必须改为：

schema   : {
    model: {
        id    : "ProductID",
        fields: {
            ProductID   : { editable: false, nullable: true },
            ProductName : { type: "string", editable: false },
            UnitPrice   : { type: "number" },
            Discontinued: { type: "boolean" },
            UnitsInStock: { type: "number" }
        }
    }
}

With this you can edit the value but it will not be sent to the server when you update it. But since this is not nice you should use change the template to do not allow to change it.

使用此功能，您可以编辑该值，但在更新时不会将其发送到服务器。但由于这不好，您应该使用更改模板，不允许更改它。

Their current template:

他们目前的模板：

<dt>Product Name</dt>
<dd>
    <input type="text" class="k-textbox" 
           data-bind="value:ProductName" name="ProductName"
           required="required" validationMessage="required"/>
    <span data-for="ProductName" class="k-invalid-msg"></span>
</dd>

Should be changed to be readonly and add the class k-state-disabled:

应该更改为只读并添加类k-state-disabled：

<dt>Product Name</dt>
<dd>
    <input type="text" readonly="readonly" class="k-textbox k-state-disabled" 
           data-bind="value:ProductName" name="ProductName"/>
</dd>

or directly change the input for something else (for example, a span):

或直接更改其他内容的输入（例如，跨度）：

<dt>Product Name</dt>
<dd>
    <span data-bind="html:ProductName"></span>
</dd>

Running example here http://jsfiddle.net/OnaBai/qh7SD/

在这里运行示例http://jsfiddle.net/OnaBai/qh7SD/

#2

I don't know much about KendoUI, but I would suspect that it would respect Data Annotations. Add similar code to this to your View Model:

我对KendoUI知之甚少，但我怀疑它会尊重数据注释。将类似的代码添加到您的View Model：

[MetadataType(typeof(YourModelValidation))]
public partial class YourModel
{
}

public class YourModelValidation 
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }
}

This will prevent it from auto-scaffolding to screen, where such events occur. Keen to know if it works with Kendo, so please do reply.

这将阻止它在发生此类事件的情况下自动搭建屏幕。很想知道它是否适用于剑道，所以请回复。

#1