Editor in grid receiving value from row

4 posts, 1 answers
  1. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 22 Jun 2015 Link to this post

    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.

  2. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2015 Link to this post

    No answers for this one?
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 24 Jun 2015 Link to this post

    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!
  5. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2015 Link to this post

    Excellent

    Your answer put me on the right track.

    Thanks!

Back to Top
Kendo UI is VS 2017 Ready