Editor in grid receiving value from row

[Luis]

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.

[Luis]

No answers for this one?

[Dimo]

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

[Luis]

Excellent

Your answer put me on the right track.

Thanks!