Tag Helper - Kendo Grid (click events)

[Asmir]

I'm trying to use Kendo grid with tag helpers, documentation you have right now is pretty much useless for my problems. I have a really simple Kendo grid, and I'm trying to create functions for create, edit, and delete buttons. 

1. openCreateWindow, openEditWindow and openDeleteWindow - How to pass an Id (in my example LanguageId)?

2. openCreateWindow - Click event doesn't work at all inside toolbar (toolbar-button), what to do?

With these functions I will call server side actions to create separate popup editors with different fields and terms using Kendo Window and Ajax forms, and I have pretty much strong reasons why I need something like this.

 

...
              <columns>
                    <column field="LanguageId" width="240" hidden="true"/>
                    <column field="Name"/>
                    <column field="Culture"/>
                    <column width="100">
                        <commands>
                            <column-command name="edit" text="Edit" click="openEditWindow(LanguageId?)"></column-command>
                        </commands>
                    </column>
                    <column width="100">
                        <commands>
                            <column-command name="delete" text="Delete" click="openDeleteWindow(LanguageId?)"></column-command>
                        </commands>
                    </column>
                </columns>
                <toolbar>
                    <toolbar-button name="custom" text="Add new record" click="openCreateWindow(LanguageId?)"></toolbar-button>
                </toolbar>

...

I'm looking forward to hearing from you.

Kind regards,
Asmir M.

[Viktor Tachev]

Hello Asmir,

Thank you for the feedback regarding the documentation. We are striving on improving it and the goal is to make the Core documentation as helpful as possible. 

Regarding your query. In the click handler for a command you can get reference of the table row where the button is located. When this is available you can use the dataItem() method to access the relevant item in the Model. This way you can access app fields of the Model and use the value from them as required. The code snippets below outline the approach:

<column width="100">
    <commands>
        <column-command name="custom" text="Edit" click="openEditWindow" >
        </column-command>
    </commands>
</column>

<script>
    function openEditWindow(e) {
        var grid = this;
        var button = e.target;
        var row = $(button).closest("tr");
        var dataItem = grid.dataItem(row);

        console.log(dataItem.LanguageId);
    }
</script>

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Asmir]

Hi Viktor, thanks for the feedback and quick response. This works, I agree, problem is a toolbar button. Please take a look the example below. 

<toolbar>
        <toolbar-button name="create" text="Add new record" click="openCreateWindow"></toolbar-button>
</toolbar>

<script>
    function openCreateWindow(e) {
        var grid = this;
        var button = e.target;
        var row = $(button).closest("tr");
        var dataItem = grid.dataItem(row);

        console.log(dataItem.LanguageId);
    }
</script>

Basically, the same thing, but it's not working with toolbar create button.

Thanks,
Asmir M.

[Asmir]

I made a mistake with the code. This is what I want: 

<toolbar>
        <toolbar-button name="create" text="Add new record" click="openCreateWindow"></toolbar-button>
</toolbar>
<script>
    function openCreateWindow(e) {
        var grid = this;
        var button = e.target;
        
        console.log("OK");
    }
</script>

I think there is a problem with click event inside toolbar.

Thanks,

Asmir M.

[Viktor Tachev]

Hello Asmir,

The toolbar-button tag does not provide a click handler out of the box. This is why the openCreateWindow function is not executed. 

If you would like to attach a custom handler for the click event of the Button you can specify a custom template that shows the button and attach the click handler using jQuery:

<toolbar>
    <toolbar-button name="custom"  template="customTemplate"></toolbar-button>
</toolbar>

<script>
    function customTemplate(e) {
        var template = '<a role="button" class="k-button k-button-icontext k-grid-custom customButtonClass" href="#">custom button</a>';

        return template;
    }

    $(function () {
        $(".customButtonClass").on("click", function (e) {
            alert("custom button clicked");
        });
    })
</script>

Give the approach a try and let me know how it works for you.

Regards,
Viktor Tachev
Progress Telerik