Grid Column with Drop Down

[Hatton Point]

Not exactly sure the best way to code the following scenario...I have Upload, ComboBox and Grid controls. The Grid has a column with a Dropdown/Select column. The data for this columns needs to be populated based upon the selected value of the ComboBox. The Grid itself is not populated until after the Upload control has performed its actions. The data (re)bound to the Grid also has the same value from the ComboBox.

I've tried two types of columns for the Grid. A Foreign Key column and a Bound column with an EditorTemplate. Both will retrieve an initial dataset of all records, but neither can I figure out how to filter or rebind based upon the new data (available after the Upload control is complete).

I'm working in MVC. I've looked at this doc http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBoundColumnBuilder#editorviewdatasystemobject but it does not allow me to pass data from the Model to the EditorTemplate as documented. I also was unable to find the documentation on how to use the EditorView object in the EditorTemplate.

ComboBox:

@(Html.Kendo().ComboBox()

    .Name("engineGroupList")

    .Placeholder("Select Engine Group...")

    .DataTextField("EngineGroupName")

    .DataValueField("EngineGroupId")

    .DataSource(source =>

    {

        source.Read(read =>

        {

            read.Action("GetEngineGroups", "Equipment")

                .Data("engineGroupFilter");

        });

    })

    .CascadeFrom("customerList")

    .Events(events => events.Change("engineGroupChange"))

)

Upload:

@(Html.Kendo().Upload()

    .Name("dasFiles")

    .Async(a => a

        .Save("UploadDas", "Data")

        .AutoUpload(true)

        .Batch(true)

    ).Events(events => events.Success("dasFilesSuccess")

)

Upload (Event Script):

function dasFilesSuccess(e) {

    var grid = $("#dasFilesGrid").data("kendoGrid");

    grid.dataSource.data(e.response.Data);

}

Grid - 2nd column needs to be a dropdown bound based on one of two possible parameter: FileUploadGroupId (in Grid data model) or EngineGroupId (value of ComboBox):

@(Html.Kendo().Grid(Model)

    .Name("dasFilesGrid")

    .Columns(columns =>

    {

        columns.Bound(m => m.FileUploadRawFileName);

        columns.Bound(m => m.FileUploadGroupId).EditorTemplateName("Engine");

    })

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model =>

        {

            model.Id(e => e.FileUploadRawId);

        })

    )

)

EditorTemplate - Currently Binding to All EngineModels, but need to call either by EngineModel.GetByEngineGroupId(...) or GetByUploadGroupId(...):

@model List<EngineModel>

 

@(Html.Kendo().DropDownListFor(m => m)

        .Name("Engine")

        .DataValueField("EngineID")

        .DataTextField("Model")

        .BindTo((System.Collections.IEnumerable)EngineModel.All())

)

Ideas?

[Daniel]

Hello,

There is not a way to set different data to the dropdownlist for each row on the server when using Ajax binding because the data is loaded on the client. You should use remote binding for the dropdownlist and send the needed value so the data can be filtered through the request Data function.

Kind regards,
Daniel
the Telerik team

[Hatton Point]

Every ForeignKey dropdown in the Grid is the same. Your response says I am trying to load different data per row, but that is not actually the case. The Column with a Foreign Key dropdown is actually the same for all rows in the Grid.

How would I use Remote Binding if the value I need to bind with is not available on the first load of the ViewModel?

Let me explain again and maybe someone can help me with a real solution. I have a Grid. The Grid data is populated during an event from another Kendo control on the same page via javascript:

Function to Populate Grid Data:

function uploadSuccess(e) {

    $('#filesGrid').data().kendoGrid.dataSource.read({ fileUploadGroupId: parseInt(e.response[0]) });

    $("#filesGrid").show();

}

This is the success function after files are uploaded and processed. The Grid below is "read" passing a parameter value from the response.

Grid:

@(Html.Kendo().Grid<FileUploadModel>()

    .Name("filesGrid")

    .HtmlAttributes( new { @class = "edit-inline" })

    .Columns(columns =>

    {

        columns.Bound(m => m.FileUploadRawFileName);

        columns.ForeignKey(m => m.EngineId, (System.Collections.IEnumerable)ViewData["engineData"], "EngineId", "Model")

            .Title("Engine");

    })

    .AutoBind(false)

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model =>

        {

            model.Id(e => e.FileUploadRawId);

        })

        .Read(read => read.Action("Upload_Read", "Data"))

    )

)

The ForeignKey Column in the Grid above is being bound to ViewData["engineData"] currently. I attempted to modify this ViewData during the same function above (both via the controller and via an Ajax call), but the Grid uses only the first bound ViewData.

How can I set the data source for the ForeignKey Column during the same success function above? There is a parameter in the response that needs to be used in the initial data request.

Currently all "Engines" are in the ForeignKey ViewData. An alternative would be to filter this dataset using a value from the upload response.

Ideas? Thanks.

[Daniel]

Hello again,

The editor template is created once while the Grid initialization and the ViewData cannot be used to populate the new data from the read action method. For this scenario, I can suggest one of the following approaches:

1. Again use a custom editor template for the foreignkey column with remote binding and pass the saved fileUploadGroupId through the request Data.
   

   var additionalData;
   
   function uploadSuccess(e) {
       additionalData = {
           fileUploadGroupId: parseInt(e.response[0])
       };
       $('#filesGrid').data().kendoGrid.dataSource.read(additionalData);
       $("#filesGrid").show();
   }
   
   function dropdownAdditionalData(){
       return additionalData;
   }

2. Use the Grid edit event to filter the dropdown through its dataSource filter method.
3. Reload the Grid in a partial view loaded via Ajax so that the editor template will be reinitialized.

Another option would be to return the dropdown data with the Grid request and specify a custom editor function for the column which uses the returned data in the DataSource requestEnd event:

var data = gridData.ToDataSourceResult(request);

return Json(new { Data = data.Data, Total = data.Total, dropdownData = myData});

function requestEnd(e){
    var dropdownData = e.response.dropdownData;
    var grid = $('#filesGrid').data("kendoGrid");
    grid.columns[1].editor = function (container, options) {
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: dropdownData
            });
    };
}

Regards,
Daniel
the Telerik team

[Jeff]

I might have come up with a pure ASP.NET MVC Solution. You can try this:

 

columns.Bound(model => model.Id).Template(m => Html.Kendo().DropDownList().DataSource(
                          dataSource => dataSource.Read(read => read.Action(nameof(ProductsController.AjaxReadProductVersions), ProductsController.Name, new {productId = m.Id}))));

 

 

Cheers,

Jeff

[Jeff]

Forgot to format code block.....this should look better :)

 

columns.Bound(model => model.Id).Template(m => Html.Kendo().DropDownList().DataSource(
                          dataSource => dataSource.Read(read => read.Action(nameof(ProductsController.AjaxReadProductVersions), ProductsController.Name, new {productId = m.Id}))));

[Viktor Tachev]

Hi,

 

It is possible to show a DropDownList in a column template. However, in order to use the dropdown for editing it needs to be bound to the underlying value.

The suggested approach for using a dropdown for editing is to specify a custom editor for the Grid. Check out the example below that illustrates the approach:

 

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

 

Regards,
Viktor Tachev
Progress Telerik