Make add row permanently visible

2 posts, 0 answers
  1. Logan
    Logan avatar
    61 posts
    Member since:
    Apr 2013

    Posted 04 Apr 2017 Link to this post

    I would like to remove the "Add" button on my kendo grid and instead have a permanently available add row at the bottom of the grid.  When the user clicks the update button in that grid it would fire the create command and add the row.


    It looks like i can set the insert row to the bottom by using: 

    .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))

    I then tried to make the add row visible by using the following code

    .Events(e => e.DataBound("Adjustment_Bound"))

    <script type="text/javascript">
        function Adjustment_Bound() {
            var grid = $("#Adjustment-grid").data("kendoGrid");


    This however locked up the browser,  I am guessing because the addRow() causes the databound to get refired.




  2. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Apr 2017 Link to this post

    Hello Logan,

    The addRow method will fire the dataBound event, which is causing an endless recursion. In order to avoid this you could try to use a global variable for determining when to call the addRow method. I have tested the following simple condition and it seems to prevent the recursion:
    shouldPreventAdd = false;
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        edit: function(e){
          shouldPreventAdd = false;
        dataBound: function(e){   
            shouldPreventAdd = true;

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top