Adding new row inline with tool bar button

[Rahul]

I am trying to achieve inline insertion in a grid with client side code. I am using tag helper and generating toolbar with custom button and binding click event with javaScript function. And through this function I need to achieve functionality of "Create" button under grid's toolbar option. 

To elaborate the things, there are two toolbar one is "kindo-toolbar" and another is "toolbar" under "kendo-grid". Toolbar under kendo-grid is having "Add new record" button and on click on this button generates new blank row in grid to add new record. This same functionality I need to achieve through "Kendo-toolbar" item button, where I can bind a click event with a javascript function. So is there a way to implement inline row adding with toolbar item with javascript or any other approach?

<div class="demo-section k-content wide">
        <kendo-toolbar name="ToolBar">
            <toolbar-items>
                <item type="CommandType.Button" icon="add" text="" click="buttonClick" />
            </toolbar-items>
        </kendo-toolbar>
    </div>

<kendo-grid name="grid" height="550">
    <datasource page-size="20" type="DataSourceTagHelperType.Custom" custom-type="odata" batch="true">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update" />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy" />
            <create url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Create" />
        </transport>
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                    <field name="UnitPrice" type="number"></field>
                    <field name="UnitsInStock" type="number"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <editable mode="incell" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>

    <toolbar>
        <toolbar-button name="create" text="Add new record"></toolbar-button>
        <toolbar-button name="save" text="Save Changes"></toolbar-button>
        <toolbar-button name="cancel" text="Cancel Changes"></toolbar-button>

    </toolbar>

    <columns>
        <column field="ProductName" title="Product Name" width="240" />
        <column field="UnitPrice" title="Unit Price" />
        <column field="UnitsInStock" title="Units In Stock" />
        <column field="Discontinued" title="Discontinued" width="150" />
        <column>
            <commands>
                <column-command text="Delete" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
</kendo-grid>

<script>
    function buttonClick(e) {
        alert("Button Clicked");
    }
</script>

 

[Eyup]

Hi Rahul,

 

You have 2 options to achieve this requirement:

1. Use the built-in methods of the Kendo grid to init a new record insert mode:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/addrow

2. Access the built-in toolbar's Add New Record button using jQuery selectors:
https://api.jquery.com/category/selectors/

And then just call the .click() method.

I hope this will prove helpful. Feel free to let me know if I can assist with anything else.

 

Regards,
Eyup
Progress Telerik

[yash]

On firing of the ADD event, custom command button is not visible. only UPDATE and CANCEL button are visible, any solution for this?

[Eyup]

Hi Yash,

Can you modify this live sample to demonstrate the mentioned issue and send it back to us for better context clarification?
https://dojo.telerik.com/aQawOVuW