Kendo Ajax Grid with Conditional Ajax ComboBox Column

3 posts, 0 answers
  1. Rehan
    Rehan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 10 Oct 2014 Link to this post

    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. Rehan
    Rehan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 10 Oct 2014 in reply to Rehan Link to this post

    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:
  3. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 14 Oct 2014 Link to this post

    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.

     
Back to Top