Datasource add row on top kendo grid ui năm 2024

The Kendo UI JavaScript Data Grid components are high-performant and ready to roll! Meeting the most popular and stringent requirements, they save you a ton of time and...dare we say - they make grids fun!

Kendo UI includes data grid components built natively for their frameworks.

Looking for a .NET data grid? We’ve got you covered. Learn more

Key Features

• Easy to Customize & Theme
• Full Accessibility
• Multiple Edit Modes
• Paging
• Filtering, Sorting, Grouping
• Virtualization & Lazy Loading
• PDF & Excel Export
• Sticky Rows & Columns

Explore our JavaScript Data Grids

Native Angular Data Grid

Poke around at this demo to see pagers, column interactions, sort, filter, cell templates, export, and more.

We've been providing web developers, educators, students, companies with JSFiddle free for many years.

Your can help us in one of two ways:

• Whitelist JSFiddle in your content blocker
• Go PRO and get access to additional PRO features →

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

Inner Grid Code

@(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()  
)

    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 = $("

    if (grid) {  
        var dataSource = grid.dataSource;  
        var total = dataSource.data().length;  
        dataSource.insert(total, {});  
    }  
}

1 solution

Solution 1

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

function CreateNewGridRow() {

    var selectedValue = $('

    var grid = $("

    if (grid) {  
        var dataSource = grid.dataSource;  
        var total = dataSource.data().length;  
        dataSource.insert(total, {});  
    }  
   $('

}

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

How do I set a selected row in kendo grid?

To select a row when the Grid is in single selection mode, use one of the following actions:.

Click the row..

Select the checkbox of the row..

Press Enter on the row (only when Keyboard Navigation is enabled)..

How to add multiple rows in kendo grid angular?

How to add multiple rows in a gird.

the user should press add button to create new row in the grid..

the user enter the name of the currency and all other attributes..

then the user press add button once again to insert new row , and the repeat step 2 ,and repeat step 1 again..

How do I add a custom class to a row in kendo grid?

To style the rows of the Grid, use the rowClass function. The callback is executed for each row and allows you to insert custom CSS classes. To learn more, check the article on how to apply a background color to column cells by using the rowClass function .

How do you sort data in kendo grid?

To enable the sorting functionality of the Grid, set the sortable option to true . As a result, the default single-column sorting functionality will be applied. To enhance the performance of the Grid, apply the sorting operations on the server by setting the serverSorting option of the data source to true .