kendo ui mvc 4 grid edit selected row

时间:2014-09-12 12:54:41

标签: kendo-asp.net-mvc

我是ASP.NET MVC的Kendo UI新手。 我想创建网格,并且能够通过单击放置在工具栏中而不是命令列中的按钮(创建,编辑,更新,保存,移动)来编辑所选行。怎么实现这个?这是我的代码

@(Html.Kendo().Grid<TelerikMVC4.Models.TeacherViewModel>()
  .Name("grid")
  .HtmlAttributes(new{style = "font-size: 12px"})
  .Columns(columns =>
      {
          columns.Bound(teacher => teacher.Name);
          columns.Bound(teacher => teacher.Date).Format("{0:d}");
          columns.Command(commands =>
              {
                  commands.Edit().UpdateText("Save").Text("Edit");
                  commands.Destroy().Text("Delete"); 
              }).Title("").Width(200);
      })
  .ToolBar(toolbar =>
      {
          toolbar.Create().Text("New");
      }) // The "create" command adds new data items
  .Editable(editable => editable.Mode(GridEditMode.InLine)
                            .Window(window =>
                                {
                                    window.Title("Edit teacher");
                                }
                            )


  )// Use inline editing mode
  .DataSource(dataSource =>
              dataSource.Ajax()
                  .Model(model =>
                      {
                          model.Id(teacher => teacher.TeacherID); 
                          model.Field(teacher => teacher.TeacherID).Editable(false); 
                      })
                  .Create(create => create.Action("Teachers_Create", "Teacher")) 
                  .Read(read => read.Action("Teachers_Read", "Teacher"))  
                  .Update(update => update.Action("Teachers_Update", "Teacher"))  
                  .Destroy(destroy => destroy.Action("Teachers_Destroy", "Teacher")) 
  )
  .Pageable(pageable => pageable
                            .Refresh(true)
                            .PageSizes(false)               
                            .ButtonCount(5))
  .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)))

1 个答案:

答案 0 :(得分:0)

我不知道我是否理解了这个问题..你想用列外的编辑按钮编辑一行吗?如果是这样,它确实有意义,编辑按钮必须附加到行..

关于代码,我认为你正在搞乱这部分代码:

                 .Editable(editable => editable.Mode(GridEditMode.InLine)
                        .Window(window =>
                            {
                                window.Title("Edit teacher");
                            }
                        )

你正在编辑内联,为什么窗口标题?

      @(Html.Kendo().Grid<TelerikMVC4.Models.TeacherViewModel>()
.Name("grid")
 .HtmlAttributes(new{style = "font-size: 12px"})
 .Columns(columns =>
  {
      columns.Bound(teacher => teacher.Name);
      columns.Bound(teacher => teacher.Date).Format("{0:d}");
      columns.Command(commands =>
          {
              commands.Edit().UpdateText("Save").Text("Edit");
              commands.Destroy().Text("Delete"); 
          }).Title("").Width(200);
  })
.ToolBar(toolbar =>
  {
      toolbar.Create().Text("New");
  }) // The "create" command adds new data items
         .Editable(editable => editable.Mode(GridEditMode.InLine)
.DataSource(dataSource =>
          dataSource.Ajax()
              .Model(model =>
                  {
                      model.Id(teacher => teacher.TeacherID); 
                      model.Field(teacher => teacher.TeacherID).Editable(false); 
                  })
              .Create(create => create.Action("Teachers_Create", "Teacher")) 
              .Read(read => read.Action("Teachers_Read", "Teacher"))  
              .Update(update => update.Action("Teachers_Update", "Teacher"))  
              .Destroy(destroy => destroy.Action("Teachers_Destroy", "Teacher")) 
  )
   .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(false)               
                        .ButtonCount(5))
  .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)))