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
>
</
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
>