columns with button

[dusrkdldlr]

hello! I use vue
I want to create columns of button properties.
masktextbox editor example(https://www.htmlelements.com/demos/grid/editing-cell-mask/) is similar but I want to click on a row.
Are there any properties involved?

[yavordashew]

Hi dusrkdldlr,
If you want to add a button to a column you can do so by using the ‘template’ property of the columns array.
For example in your Vue file:

setup() {
    onMounted(() => {
      window.Smart(
        "#grid",
        class {
          get properties() {
            return {
              dataSource: new window.Smart.DataAdapter({
                dataSource: [YOUR DATA SOURCE] ,
              sorting: {
                enabled: true
              },
              behavior: {
                columnResizeMode: "split"
              },
              layout: {
                rowHeight: 50
              },
              selection: {
                enabled: true,
                mode: "extended",
                allowCellSelection: true
              },
              editing: {
                enabled: true,
                mode: 'row',
              },
             columns: [
                {
                  label: "Name",
                  dataField: "name",
                  freeze: true,
                  allowResize: true
                },
                 {
                  label: "Due date",
                  editor: "dateInput",
                  width: 200,
                  dataField: "dueDate",
                  cellsFormat: "d",
                  allowResize: true,
                  template: '<button onclick="Your Function()"> Click me</button>'/**The template of the column*////
                }],
//Rest of your code 

Or check the demos regarding templates:
https://www.htmlelements.com/vue/demos/grid/column-template/
https://www.htmlelements.com/vue/demos/grid/column-dynamic-template/
https://www.htmlelements.com/vue/demos/grid/column-dynamic-template-with-components/
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[dusrkdldlr]

template: ‘<button onclick=”YourFunction()”> Click me</button>
it work. and I added on YourFunction() in method. but it was returned this error
Uncaught ReferenceError: YourFunction is not defined
at HTMLButtonElement.onclick (cswitch_port_list.do:1)

[dusrkdldlr]

const notesTemplate = document.createElement(“template”);
notesTemplate.id = “notesTemplate”;
notesTemplate.innerHTML = `<button
data-id=”{{id}}”
onclick=”alert(‘{{value}}’);”
class=”template-button”
style=”width: 100%; height: 100%; overflow:hidden; text-overflow: ellipsis;”
>Details</button>`;
document.body.appendChild(notesTemplate);
and I can’t run this example either

[dusrkdldlr]

Actually I’m not using the composition API. I’m using window.Smart on mounted. Could it be related?

[yavordashew]

Hi dusrkdldlr,
I have prepared another code snippet for you.
Just change the code in the ‘template’ of the column property you want to change:

                {
                  label: "Due date",
                  editor: "dateInput",
                  width: 200,
                  dataField: "dueDate",
                  cellsFormat: "d",
                  allowResize: true,
                  template: function(formatObject) {
                    if (!formatObject.template) {
                      const button = document.createElement("smart-button");
                      button.innerHTML = 'Click Me';
                      button.row = formatObject.row;
                      button.addEventListener("click", () => {
                        console.log('Button inside the column was clicked')
                      });
                      const template = document.createElement("div");
                      template.appendChild(button);
                      formatObject.template = template;
                    }
                  }
                }

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[dusrkdldlr]

thank you!!!!! it work!!
but..  followed “Uncaught TypeError: Cannot read property ‘disabled’ of undefined” error.
 
 
Button inside the column was clicked
smart.grid.js:8 Uncaught TypeError: Cannot read property ‘disabled’ of undefined
at HTMLElement.get [as disabled] (smart.grid.js:8)
at HTMLDocument.handlers (jquery-1.11.3.min.js?1205103440:4)
at HTMLDocument.dispatch (jquery-1.11.3.min.js?1205103440:4)
at HTMLDocument.r.handle (jquery-1.11.3.min.js?1205103440:4)
get @ smart.grid.js:8
handlers @ jquery-1.11.3.min.js?1205103440:4
dispatch @ jquery-1.11.3.min.js?1205103440:4
r.handle @ jquery-1.11.3.min.js?1205103440:4
Button inside the column was clicked
smart.grid.js:8 Uncaught TypeError: Cannot read property ‘disabled’ of undefined
at HTMLElement.get [as disabled] (smart.grid.js:8)
at HTMLDocument.handlers (jquery-1.11.3.min.js?1205103440:4)
at HTMLDocument.dispatch (jquery-1.11.3.min.js?1205103440:4)
at HTMLDocument.r.handle (jquery-1.11.3.min.js?1205103440:4)

[yavordashew]

Hi dusrkdldlr,
I don’t encounter the error you do, I would advice you to share code example of your situation in order to be able to find a solution for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts