Kendo Ajax Grid with Conditional Ajax ComboBox Column

[Rehan]

I have the following Grid:

@(Html.Kendo()

    .Grid<IncidentBreakdownViewModel>()

    .Name("Grid")

    .DataSource(dataSource => dataSource

        .Ajax()

        .Batch(true)

        .ServerOperation(true)

        .Read(x => x.Route("PostReadJson", new { incidentId = Model.IncidentId }))

        .Create(x => x.Route("PostCreateJson", new { incidentId = Model.IncidentId }))

        .Destroy(x => x.Route("PostDeleteJson", new { incidentId = Model.IncidentId }))

        .Update(x => x.Route("PostUpdateJson", new { incidentId = Model.IncidentId }))

        .Model(model => model.Id(x => x.IncidentBreakdownId)))

    .Columns(columns =>

        {

            columns

                .ForeignKey<int?>(
                         x => x.IncidentBreakdownTypeId,
                         (SelectList)ViewBag.IncidentBreakdownTypes)

                .Width(50);

            columns.Bound(x => x.PortfolioId).Width(150);

            columns.Bound(x => x.Currency).Width(100);

            columns.Bound(x => x.ErrorAmount).Width(50);

            columns

                .Bound(x => x.PaymentRequired)

                .ClientTemplate("#= PaymentRequired ? 'Yes' : 'No' #")

                .Width(50);

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(60);

        })

    .ToolBar(toolbar => toolbar.Create().Text("Add new breakdown"))

    .Editable(x => x.Mode(GridEditMode.InLine))

    .Resizable(resize => resize.Columns(true))

    .Reorderable(reorder => reorder.Columns(true))

    .Sortable(x => x.SortMode(GridSortMode.MultipleColumn))

    .Navigatable())

The first column (IncidentBreakdownTypeId) is a drop down with two columns. I want the second column (PortfolioId) to be a different drop down depending on the selected value of the first column (IncidentBreakdownTypeId) and I want to use an AJAX Kendo ComboBoxFor for the second column like so:

<script>
    function onGetClientData() {
        return {
            text: $("#PortfolioId").data("kendoComboBox").text()
        };
    }
</script>

@(Html.Kendo()
    .ComboBoxFor(x => x)
    .Name("PortfolioId")
    .DataTextField("Text")
    .DataValueField("Value")
    .Filter(FilterType.Contains)
    .DataSource(dataSource => dataSource
        .Read(x => x
            .Route("GetClientsJson")
            .Data("onGetClientData"))
        .ServerFiltering(true)))

How can I achieve this?

[Rehan]

I made a mistake in my post. This is the correct text:

The first column (IncidentBreakdownTypeId) is a drop down with two
values. I want the second column (PortfolioId) to be a different drop
down depending on the selected value of the first column
(IncidentBreakdownTypeId) and I want to use an AJAX Kendo ComboBoxFor
for the second column like so:

[Daniel]

Hello,

Could you clarify what you mean by different drop down? If the combobox data should be loaded based on the first dropdownlist selection then you could use the built-in cascading to reload based on the IncidentBreakdownTypeId value e.g.

<script>
    function onGetClientData() {
        return {
            incidentBreakdownTypeId: $("#IncidentBreakdownTypeId").data("kendoDropDownList").value(),
            text: $("#PortfolioId").data("kendoComboBox").text()
        };
    }
</script>

@(Html.Kendo()
    .ComboBoxFor(x => x)
    .Name("PortfolioId")
    .DataTextField("Text")
    .DataValueField("Value")
    .Filter(FilterType.Contains)
    .DataSource(dataSource => dataSource
        .Read(x => x
            .Route("GetClientsJson")
            .Data("onGetClientData"))
        .ServerFiltering(true)
    )
    .CascadeFrom("IncidentBreakdownTypeId")
)

Regards,
Daniel
Telerik