pass Grid view model data to Editor template

10 posts, 1 answers
  1. Answer
    Yuhua
    Yuhua avatar
    4 posts
    Member since:
    May 2013

    Posted 05 Jun 2013 Link to this post

    I am trying to implement a Grid with a Dropdownlist as custom Editor Template. The list items in Dropdownlist should be based on value from Grid row.

    My Grid is like this.

    @(Html.Kendo().Grid<GridViewModel>()
                        .Name("grid-results")
                        .Sortable()
                        .Groupable()
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Hidden().Groupable(false);
                            columns.Bound(p => p.Total)
                                .ClientFooterTemplate("Grand Total: #=kendo.toString(sum, 'C4')#")
                                .FooterHtmlAttributes(new { style = "font-weight:bold; text-align:right;" })
                                .HtmlAttributes(new { style = "text-align:right" });
                            columns.Bound(p => p.StatusId ).Title("Resolution Status")
                                .ClientTemplate("#=StatusName#")
    ============> .EditorViewData(new { statusId = "#=StatusId #" })
                                .EditorTemplateName("StatusList"); // file name
                            columns.Bound(p => p.User);
                        })
                        .Pageable(paging => paging
                          .Info(false)
                          .Input(true)
                          .Numeric(false)
                          .PageSizes(new Int32[] { 5, 10, 20 })
                          )
                        .Editable(editable =>
                        {
                            editable.Mode(GridEditMode.InCell);
                        })
                        .Resizable(configurator => configurator.Columns(true))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(true)
                            .Read(read =>
                            {
                                read.Action("GetResults", "Home").Data("onFilterSelection");
                            })
                            .PageSize(10)
                            .Model(model =>
                            {
                                model.Id(p => p.PoId);
                                model.Field(p => p.Total).Editable(false);
                                model.Field(p => p.StatusId ).Editable(true);
                                model.Field(p => p.User).Editable(false);
                            })
                            .Aggregates(aggregates =>
                            {
                                aggregates.Add(p => p.Total).Sum();
                            })
                        )
                    )

    editor template is like
    @(Html.Kendo().DropDownList()
            .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
            .DataValueField("ListStatusId")
            .DataTextField("ListStatusName")
            .DataSource(dataSource =>
                {
                    dataSource.Read(read =>
                        {
                            read.Action("GetStatusList", "Home", new { statusId = ViewData["statusId"] });
                        });
                })
    )
    Controller Action:
    public JsonResult GetCustomizeResolutionStatusList(string statusId)
            {
                List<StatusModel> status = new List<StatusModel>();

               // code to get list of StatusModel based on statusId

                return status ;
            }
    GridViewModel
    public class GridViewModel
        {
            public int Id { get; set; }
            public decimal Total { get; set; }
            public short StatusId { get; set; }
            public string StatusName { get; set; }
            public string User{ get; set; }
    }

    StatusModel
    public class StatusModel
        {
            public int ListStatusId { get; set; }
            public String ListStatusName { get; set; }
        }

    I tried to use .EditorViewData(new { statusId = "#=StatusId #" }) to pass GridViewModel.StatusId to dropdownlist editor template. But it doesn't work.
    I can't use Model.StatusId since the page level view model is different from Grid view model.
    Can someone please help me with this?

    Thanks.

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 07 Jun 2013 Link to this post

    Hi Yuhua,

     
    Please note note that the editor templates are get from the server on Grid initialization (only once) - that why when the EditorTemplate is generated the passed "StatusID" is null. Possible solution to pass the current record ID to the editor is to use external JavaScript function: 

    EditorTemplate: 

    @model object
     
    @(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("ListStatusId")
        .DataTextField("ListStatusName")
        .DataSource(d =>
            //get the additional data using function in the main view
            d.Read(r => r.Action("GetStatusList", "Home").Data("getParentID()"))
         
        )
    )

    getParentID function: 
    function getParentID() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        //where the OrderID is the model ID
        return { statusId: dataItem.StatusId }
    }
    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Bryan
    Bryan avatar
    24 posts
    Member since:
    Nov 2013

    Posted 13 Jul 2014 in reply to Vladimir Iliev Link to this post

    I have tried this exactly as you have described and it doesn't work. The value of "grid" is null. I have a dropdownlist in a grid column and I'm trying to find a way to past the grid item's model Id to the method that populates the drop down list. I'm having a hard time believing there is no support for doing this fairly basic functionality.
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 14 Jul 2014 Link to this post

    Hi Bryan,

    As from the provided information is not clear for us what is the exact scenario that you have - could you please open new support thread / forum post and provide the following additional information:

    • Grid code
    • Grid Model definition
    • Custom EditorTemplate that is used

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Dima
    Dima avatar
    30 posts
    Member since:
    Feb 2012

    Posted 31 Mar in reply to Vladimir Iliev Link to this post

    where you declare getParentID ?

    In some of grid events?

    try to declare in in EditorTemplate, in View with grid - all wrong

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    211 posts

    Posted 04 Apr Link to this post

    Hi Dima,

    My colleague has suggested declaring getParentID() as an external JavaScript function.

    Could you try placing the function in a <script> tag above or below the Kendo UI Grid initialization in the Razor view?

    <script>
    function getParentID() {
      var row = $(event.srcElement).closest("tr");
      var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
      var dataItem = grid.dataItem(row);
      //where the OrderID is the model ID
      return { statusId: dataItem.StatusId }
    }
    </script>
     
    @(Html.Kendo().Grid<GridViewModel>()
     <!––  grid declaration here ––>
    )

    Let me know how you get on.

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Waz
    Waz avatar
    12 posts
    Member since:
    Aug 2007

    Posted 17 Apr in reply to Alex Hajigeorgieva Link to this post

    event.srcElement I believe is non-standard and will not work in FireFox.
  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    211 posts

    Posted 19 Apr Link to this post

    Hello Waz,

    Thank you for noting that the event srcElement is non-standard.

    Event.target should be the preferred option indeed:
    https://developer.mozilla.org/en-US/docs/Web/API/Event/target

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Dima
    Dima avatar
    30 posts
    Member since:
    Feb 2012

    Posted 2 days ago in reply to Alex Hajigeorgieva Link to this post

    For some reason grid.dataItem(row) in undefined in make case

    <script>
        function getMeterId() {
            var row = $(event.target).closest("tr");
            var grid = $(event.target).closest("[data-role=grid]").data("kendoGrid");
            var dataItem = grid.dataItem(row);

            return { meterId: dataItem.MeterId }
        }
    </script>

  10. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    211 posts

    Posted 13 hours ago Link to this post

    Hi Dima,

    Could you console.log(row) and console.log(grid)?

    To be able to help you with this, could you please provide more information - sample code for the templates, grid and data source configurations and possibly a dummy dataItem so I can review the project setup locally and make concrete suggestions?

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top