This is a migrated thread and some comments may be shown as answers.

Editor in grid receiving value from row

3 Answers 63 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 22 Jun 2015, 11:54 PM

Hello

I have the following kendo grid in MVC. This grid is inside a partial view that receives an integer as its model and may be displayed several times on the same page but bound for different models. 

@(Html.Kendo().Grid<MyGridModel>()
          .Name("MyGridModelGrid_" + Model)
          .Columns(cols =>
          {
              cols.Bound(a => a.Name);
              cols.Bound(a => a.SomeNumericValue);
              cols.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              });
          })
          .ToolBar(toolbar => toolbar.Create())
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .DataSource(dataSource => dataSource
              .Ajax()
              .Model(m =>
              {
                  m.Id(a => a.Id);
                  m.Field(a=> a.Name);
                  m.Field(a => a.SomeNumericValue);
              })
              .Create(update => update.Action("CreateAction", "MyController", new {area = "MyArea", viewModelId= Model}))
              .Read(read => read.Action("ReadAction", "MyController", new {area = "MyArea",viewModelId = Model}))
              .Update(update => update.Action("UpdateAction", "MyController", new {area = "MyArea", viewModelId= Model}))
              .Destroy(update => update.Action("DestroyAction", "MyController", new {area = "MyArea", viewModelId= Model}))
          )
    )

 

As you can see the grid details can be edited, deleted or added. However, I want the "Name" column to be a kendo dropdown list. For that purposes I decorated the MyGridModel class as follows:

public class MyGridModel
    {
        public int Id { get; set; }
        [DisplayName("Name")]
        [UIHint("ModelNameEditor")]
        [Required]
        public string ModelName{ get; set; }

 

        [DisplayName("Some Numeric Value")]
        [Required]
        [Range(0, 10000)]
        public short SomeNumericValue { get; set; }
    }

 

And created the following view for the editor template:

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
        .Name("ModelName")
        .OptionLabel("Name")
        .HtmlAttributes(new { style = "width: 100%" })
        .DataValueField("Text")
        .DataTextField("Text")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetAllNames", "MyController", new { area = "MyArea"});
            });
        })
) 

The editor is correctly rendered and the options are correctly retrieved via ajax. However, Some of the "Names" may already taken and invalid when editing or adding a new value. Because of this I want to replace the "GetAllNames" function for a "GetAvailableNamesFor" function, in which only the possible names are retrieved from the Ajax call. For this, I need to somehow pass to the the "Id" model property of the row in the grid in which this editor was rendered. Is this possible?

So, the code would be something like: 

 @using Kendo.Mvc.UI

@model int
@(Html.Kendo().DropDownList()
        .Name("ModelName")
        .OptionLabel("Name")
        .HtmlAttributes(new { style = "width: 100%" })
        .DataValueField("Text")
        .DataTextField("Text")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetAvailableNamesFor", "MyController", new { area = "MyArea", currentRowId = Model});
            });
        })

Thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Luis
Top achievements
Rank 1
answered on 24 Jun 2015, 02:31 PM
No answers for this one?
0
Accepted
Dimo
Telerik team
answered on 24 Jun 2015, 03:34 PM
Hello Luis,

Configure the DropDownList dataSource to execute an auxiliary function, which will pass the row ID to the server action method:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/dropdownlist/overview#sending-parameters-to-the-server

The row ID itself can be retrieved if you obtain the DropDownList element via

$("#ModelName")

and then traverse the DOM to the parent table row, and then get the dataItem.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

Once you have the data item (Kendo UI Model), use its API to get the ID or any other value:

http://docs.telerik.com/kendo-ui/api/javascript/data/model

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luis
Top achievements
Rank 1
answered on 24 Jun 2015, 04:19 PM

Excellent

Your answer put me on the right track.

Thanks!

Tags
Editor
Asked by
Luis
Top achievements
Rank 1
Answers by
Luis
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or