This is a migrated thread and some comments may be shown as answers.

Kendo Ajax Grid with Conditional Ajax ComboBox Column

2 Answers 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rehan
Top achievements
Rank 1
Rehan asked on 10 Oct 2014, 10:44 AM
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?

2 Answers, 1 is accepted

Sort by
0
Rehan
Top achievements
Rank 1
answered on 10 Oct 2014, 10:46 AM
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:
0
Daniel
Telerik team
answered on 14 Oct 2014, 08:29 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Rehan
Top achievements
Rank 1
Answers by
Rehan
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or