CODEWITHSUNDEEP
drop-down-menukendo-gridkendo-asp.net-mvc
Evan Barke
Evan Barke

Reputation: 99

Can't get dynamic drop down list to work in Kendo grid row

I'm trying to limit the dropdowns in my kendo grid to only contain Products that have been previously mapped to the company chosen in another cell in the row.

I've used a dynamic drop down editor template approach.

However, the ID passed to getCompanyId() is always null and therefore my dropdowns are always null.

View:

@(Html.Kendo().Grid<XXXAppXXX.Models.WeeklyRailPlan>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.WeekNumber);
          columns.Bound(c => c.Company).ClientTemplate("#=(data.Company) ? Company.Name : 'Select Company...'#");
          columns.Bound(c => c.ServiceCode);
          columns.Bound(o => o.Product)
            .ClientTemplate("#= (data.Product) ? Product.Name : 'Select Product'#")
            .EditorTemplateName("DynamicDropDownList");
   //etc
      })
      .ToolBar(toolbar => {
          toolbar.Create();
          toolbar.Save();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .Filterable()
      .Events(ev => ev
             .Remove(@"function(e){setTimeout(function(){$('#grid').data('kendoGrid').dataSource.sync()})}")
                            )
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })

      .Filterable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .Events(events => events.Error("error_handler"))
          .Sort(p => { p.Add("WeekNumber").Descending(); })
          .Model(model => model.Id(p => p.ID))
          .Read(read => read.Action("WeeklyRailPlans_Read", "WeeklyRailPlanGrid"))
          .Create(create => create.Action("WeeklyRailPlans_Create", "WeeklyRailPlanGrid"))
          .Update(update => update.Action("WeeklyRailPlans_Update", "WeeklyRailPlanGrid"))
          .Destroy(destroy => destroy.Action("WeeklyRailPlans_Destroy", "WeeklyRailPlanGrid"))
      )
)

EditorTemplate called DynamicDropDownList.cshtml

<script type="text/javascript">
    function getCompanyId() {
        return { CompanyID: '#=ID#' };
    }
</script>


@(Html.Kendo().DropDownList()
                .Name("Product")
                .DataValueField("ID")
                .DataTextField("Name")
                .DataSource(ds => ds
                    .Read(read => read.Action("GetProductsForCompany", "Products").Data("getCompanyId")))
)

Controller method GetProductsForCompany (this is always receiving null)

        public ActionResult GetProductsForCompany(int CompanyID)
        {
            return Json(db.Products.Where(e => e.Companies.Any(t =>t.ID == CompanyID)), JsonRequestBehavior.AllowGet);
        }

Upvotes: 1

Views: 697

Answers (2)

Evan Barke
Evan Barke

Reputation: 99

This solution required was:

function getCompanyId() {
    var grid = $('#grid').data('kendoGrid');
    var dataItem = grid.dataItem(grid.table.find('.k-edit-cell').parents('tr'))
    return { CompanyID: dataItem.Company.ID };
}

Upvotes: 0

Steve Greene
Steve Greene

Reputation: 12314

I use code like this:

<script type="text/javascript">
    function getCompanyId() {
        var gview = $('#grid').data("kendoGrid");
        var selectedItem = gview.dataItem(gview.select());
        return { CompanyID: selectedItem.ID };
    }
</script>

Upvotes: 1

Related Questions