单击编辑后的“编辑下拉列表"字段 [英] Edit Dropdown field on edit click

问题描述

你好
我在应用程序视图中使用Telerik网格为

@Html.Telerik().Grid(Model).Name("Grid").DataKeys(o => o.Add(O => O.EmployeeId)).ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text)).Columns(columns =>
        {
            
            columns.Bound(o => o.Employee_Name).ReadOnly().Column.Title = "Employee Name";
            
            
            columns.Template(o => @Html.DropDownList("Department_Name", new SelectList(ViewBag.Department_Name))).Width(100).Column.Title = "Dept Name";
            
            columns.Command(O =>
            {
                O.Edit();
                O.Delete().HtmlAttributes(new { onclick = "return confirm(''Are you sure you wish to delete this article?'');" });
            }).Width(100);
            
            
        }).DataBinding(B => B.Server()
                                     
                                            .Insert("GridInsert", "Employee")
                                                                  .Update("GridUpdate", "Employee")
                                                                  .Delete("GridDelete", "Employee"));

在这种情况下，我想在网格空闲时禁用它.并在用户单击编辑命令时使其可编辑.

我该如何实现?

请拜托..指导我.
预先感谢

解决方案

您可以为网格使用edit事件，并在该事件中将文本框更改为下拉列表.

所以

 columns.Template(o = >  @ Html.DropDownList(" 部门名称"， 100 ).Column.Title =  部门名称";  

会变成这个.

 columns.Bound(d = >  d.Department_Name).Width( 100 ).Title(" ); 
 

比您将要创建的OnEdit事件将文本框更改为下拉列表并使用其选项填充下拉列表.



< script type = " >
功能 Grid_onEdit(e){
     var  dataItem = e.dataItem;
     var  mode = e.mode;
     var  form = e.form;
    如果(方式== "  ){
         var  parent = 文档 .getElementById(e.currentTarget.id)
         var  deptTextBox = 

(form).find(" #Department_Name")； var deptSelect = 文档 .createElement(' 选择')； deptSelect.Id = " ; deptSelect.Name = " ; // 需要对部门名称的获取进行编码. foreach( var 部门 部门的部门) { deptSelect.add(dept); } parent.replace(deptTextBox.get( 0 )，deptSelect); } } </script>

这段代码只是一个示例，可能无法立即使用，但应该可以帮助您入门.

Hello
I am using Telerik grid in my applications view as

@Html.Telerik().Grid(Model).Name("Grid").DataKeys(o => o.Add(O => O.EmployeeId)).ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text)).Columns(columns =>
        {
            
            columns.Bound(o => o.Employee_Name).ReadOnly().Column.Title = "Employee Name";
            
            
            columns.Template(o => @Html.DropDownList("Department_Name", new SelectList(ViewBag.Department_Name))).Width(100).Column.Title = "Dept Name";
            
            columns.Command(O =>
            {
                O.Edit();
                O.Delete().HtmlAttributes(new { onclick = "return confirm(''Are you sure you wish to delete this article?'');" });
            }).Width(100);
            
            
        }).DataBinding(B => B.Server()
                                     
                                            .Insert("GridInsert", "Employee")
                                                                  .Update("GridUpdate", "Employee")
                                                                  .Delete("GridDelete", "Employee"));

In this i want to disable when grid is idle. and make it editable when user click on edit command.

How can i achieve this ?

Please please please .. guide me.
Thanks in advance

解决方案

You can use the edit event for the grid and change the text box to a dropdown list in that event.

So

columns.Template(o => @Html.DropDownList("Department_Name", new SelectList(ViewBag.Department_Name))).Width(100).Column.Title = "Dept Name";

would change to this.

columns.Bound(d => d.Department_Name).Width(100).Title("Dept Name");

Than you would create your OnEdit event to change the text box to a dropdown and populate the dropdown with its options.

<script type="text/javascript">
function Grid_onEdit(e) {
    var dataItem = e.dataItem;
    var mode = e.mode;
    var form = e.form;
    if (mode == "edit") {
        var parent = document.getElementById(e.currentTarget.id)
        var deptTextBox =

(form).find("#Department_Name"); var deptSelect = document.createElement('select'); deptSelect.Id = "Department_Name"; deptSelect.Name = "Departmant_Name"; // Need to code the getting of the department names. foreach (var dept in departments) { deptSelect.add(dept); } parent.replace(deptTextBox.get(0), deptSelect); } } </script>

This code is just an example and probably won''t work right out of the box but should get you started.

这篇关于单击编辑后的“编辑下拉列表"字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！