Add a row to kendo grid programmatically without grid refresh

Question

4.75/5 (3 votes)

See more:

StackOverflow Link

One of my project page contains Kendo hierarchy grid. The inner grid contain 3 combo boxes

When I select an item form 3rd combo box. A new grid row will insert below the existing row.

The problem is after adding the new row the selected values of the first 3 combo boxes are resetting..

Inner Grid Code

JavaScript

 @(Html.Kendo().Grid<Clysar.Models.HierarchyData>()
            .Name("SubGridSecuritySection")
            .Columns(columns =>
            {
                columns.Bound(o => o.Area).ClientTemplate("<input id='areaCombo_#= UserId #' >").Width("25%");
                columns.Bound(o => o.Application).ClientTemplate("<input id='applicationCombo_#= UserId #'>").Width("25%");
                columns.Bound(o => o.UserLevel).ClientTemplate("<input id='userLevelCombo_#= UserId #'>").Width("25%");
            })
            .Events(events => events.DataBound("dataBound"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                        .Read(read => read.Action("BindHierarchy", "Security"))
            )
            .Sortable()
            .ToClientTemplate()
            
    )

function dataBound() {

        this.expandRow(this.tbody.find("tr.k-master-row").first());

        var dataSourceArea = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "GetAreaListForComboBox"
                }
            }
        });



        $.each($("[id^=userLevelCombo_]"), function () {
            element = this;
            $(this).kendoComboBox({
                dataSource: dataSourceUserLevel,
                dataTextField: "Value",
                dataValueField: "Key",
                filter: "contains",
                placeholder: "---Select---",
                change: function (e) {
                    debugger;
                    CreateNewGridRow();
                   
                }
               
            });
        });

    }

    function CreateNewGridRow() {
        var grid = $("#SubGridSecuritySection").data("kendoGrid");
        if (grid) {
            var dataSource = grid.dataSource;
            var total = dataSource.data().length;
            dataSource.insert(total, {});
        }
    }

How to fix this issue..?

Posted 8-Oct-14 2:40am

Shemeemsha (ഷെമീംഷ)

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Satya Ranjan Sahoo · Accepted Answer · 2014-10-12T02:37:00

Get the value of combo box and set the value after inserting the new row explicitly.
i.e.

C#

function CreateNewGridRow() {
        var selectedValue = $('#comboBoxId').data('kendoComboBox').value();
        var grid = $("#SubGridSecuritySection").data("kendoGrid");
        if (grid) {
            var dataSource = grid.dataSource;
            var total = dataSource.data().length;
            dataSource.insert(total, {});
        }
       $('#comboBoxId').data('kendoComboBox').value(selectedValue );
    }

Add a row to kendo grid programmatically without grid refresh

1 solution

Solution 1

Add your solution here

Preview 0

Add a row to kendo grid programmatically without grid refresh

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us