how to display custom button for grid commands?

[Sergi]

I have a column like this:

 

<kendo-grid-column :command="[{name: 'open', click: open}]"></kendo-grid-column>

 

It works fine, but I want it to show a bootstrap glyphicon and no text instead of the text "open" that is showing now.

Is there any way to template the column so that I can get the click event and also use any content I want inside the column?

Thanks in advance.

 

[Plamen]

Hi,

In such case you could use template and add a custom HTML as for example this one - 

[{name: 'open', click: open, template: "<a role='button' class='k-button k-button-icontext k-grid-edit' href='##'><span class='k-icon k-i-edit'></span>open</a>"}]

Here is a test plunker with this functonality - https://plnkr.co/edit/IrWg7gSUVn1iqgVr8BBg?p=preview

Regards,
Plamen
Progress Telerik

[K]

As soon a a template is introduced, it stops working

 

I am using this grid:

<div class="grid">
    <kendo-datasource ref="datasourceNorthWind"
                      :type="'odata'"
                      :pageSize="20"
                      :transportRead="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"></kendo-datasource>
    <kendo-grid :height="550"
                :dataSourceRef="'datasourceNorthWind'"
                :groupable='true'
                :sortable='true'
                :pageable-refresh='true'
                :pageable-page-sizes='true'
                :pageable-button-count="5">
      <kendo-grid-column field="ContactName"
                         title="Contact Name"
                         :width="250">
      </kendo-grid-column>
      <kendo-grid-column field="ContactTitle"
                         title="Contact Title">
      </kendo-grid-column>
      <kendo-grid-column field="CompanyName"
                         title="Company Name">
      </kendo-grid-column>
      <kendo-grid-column field="Country"
                         title="Country"
                         :width="150">
      </kendo-grid-column>
      <kendo-grid-column :command="customGridCommand"></kendo-grid-column>

    </kendo-grid>
  </div>

The data function is like this:

data: function () {
      return {
        customGridCommand: [{ name: 'Clear Filters', click: this.clearFilter, template: "<a role='button' class='k-button k-button-icontext filter-clear' href='\\#'><span class='k-icon k-i-filter-clear'></span>open</a>" }]}

 

ClearFunction is like this:

 clearFilter: function (e) {
        alert('clear filter clicked')}

[Veselin Tsvetanov]

Hi,

In order to properly assign the click button handler you will need to define an external Vue template to be used in this column of the Grid. Here is a small sample following the discussed scenario. A ​template ​instead of ​command ​is defined for the column:

<kendo-grid-column :template="itemTemplate"></kendo-grid-column>

The template is referenced from other Vue file:

import Template from "./Template.vue";
var itemTemplate = Vue.component(Template.name, Template);

and:

export default {
  ...
  methods: {
    itemTemplate: function(e) {
      return {
        template: itemTemplate,
        templateArgs: e
      };
    }
  },

While the Template implementation is the following:

<template>
    <span>
        <a role='button' class='k-button k-button-icontext filter-clear' href='\\#' @click="buttonClick">
          <span class='k-icon k-i-filter-clear'></span>
          open
        </a>
    </span>
</template>

<script>
export default {
  name: "template1",
  methods: {
    buttonClick: function(e) {
      alert("Button click");
    }
  },
  data() {
    return {
      templateArgs: {}
    };
  }
};
</script>

Regards,
Veselin Tsvetanov
Progress Telerik

[Michael]

You have to admit that it's a lot of code to just be able to get a simple button in a grid column that has a click event wired up.  I realize this is the "Vue way", but is there anything you guys have planned that will make it easier/quicker to do Vue templates inside all of your components?

[Veselin Tsvetanov]

Hi Michael,

You are right that using the Vue templates in relatively simple scenarios as the discussed would involve a bit too complicated implementation. Nevertheless, this is the recommended Vue approach that would allow the Kendo template and its parent component to load properly in the Vue context. That is why, currently we do not have plans to provide an alternative approach to Kendo UI for Vue template scenarios.

Regards,
Veselin Tsvetanov
Progress Telerik

[Michael]

Hi Veselin,

We are rewriting a very large web application (about 1200 pages) using Vue/Kendo, and while it's going ok so far, this is one area in particular that is definitely more cumbersome than what we had to do with your WebForms and MVC/jQuery grids.  I guess I don't mind so much having to create the template markup in my view, but having to create a separate component, along with a backing method that can return an instance of that component, is a bit of a pain when all you want to do is make a hyperlink in a column (and we will have SO many grids in the whole application).  If all I had to do was create a template with an id, then on the column definition, provide the id to my template, and you guys handle the rest behind the scenes, it would be dramatically easier, and save us time.  I should be able to still bind to things on the dataitem from the row, within that template markup, and I can see also wanting to bind to methods on the Vue component that contains the grid.  Also, maybe have a way to just provide the template as a string, directly on the kendo-grid-column, and it behave the same way (bind to dataitem/component).  Is this type of scenario something that is even a possibility?

[Veselin Tsvetanov]

Hi Michael,

I agree that the Vue way of splitting the mark-up and code parts in templates would cause considerable refactoring effort while migrating a jQuery application. This, however, is the way to properly compile the needed components and pass them to the Vue app.

We have not discussed / considered the possibility of creating the required template files automatically, based on an ID for example. Therefore, I would suggest you to log your idea in our Feedback portal. Based on the support it receives from the community we will decide on whether to proceed with its implementation or not.

As per the simplest scenarios, which would not require a template, you could use the command column syntax:

<kendo-grid-column :command="commandColumn" ></kendo-grid-column>

and:

export default {
  name: "HelloWorld",
  methods: {},
  data() {
    return {
      commandColumn: [
        {
          name: "Test",
          click: function(e) {
            console.log(e);
          }
        }
      ]
    };
  }
};

Here you could find a sample CodeSandbox implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik

[Michael]

Thanks for the reply.  As a customer getting experience rebuilding a very large application, I can tell you there has to be a better way to deal with templates...you guys are smart, and can solve it. :)  Maybe this is some kind of feature that should be in Vue itself...not sure though.

[Veselin Tsvetanov]

Hello Michael,

We will consider the possible options for providing simpler use of the templates. Meanwhile, in case you have in mind some specific approach, that would be appropriate for the case, please let us know.

Regards,
Veselin Tsvetanov
Progress Telerik

[Bernhard]

How can I throw the button event back to the main component? https://codesandbox.io/s/x71r353n9q

[Veselin Tsvetanov]

Hello Bernhard,

You could directly pass the method from the Vue app, that should handle the click event:

commandColumn: [{
  name: "Test",
  click: this.test
}]

Here is a modified version of the sample sent.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nelson]

I follow this examples and I got somethings to work, but I'm still struggling with passing the event to the component when using a template, not a command.

[Veselin Tsvetanov]

Hi Nelson,

May I ask you to modify the above sample, so that it reproduces the issue observed at your end and send it back to us? This way we will be able to review the case locally and to provide you with the most appropriate assistance on the exact scenario.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nelson]

Actually I was able to figure it out, how to achieve it, passing the onClick function to the vue template

public itemTemplate(e) {
  return {
    template: detailsTemplate,
    templateArgs: Object.assign({}, e, { onClick: this.detailsClicked }),
  };
}

and using it in the template

@click="templateArgs.onClick"

 

My problem was that I was passing the method as new parameter outside not in templateArgs

[Norman]

Personally I would find it more convenient if templateArgs could be forwarded to the props of the template, and not to it's data.

I find it counter-intuitive and of questionable design. Especially when it comes to re-using components.

[Plamen]

Hi,

Thank you for sharing your thoughts - we will consider them for the future versions of the component.

Regards,
Plamen
Progress Telerik