Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101374
    dusrkdldlr
    Member

    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?

    #101378
    yavordashew
    Member

    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/

    #101387
    dusrkdldlr
    Member

    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)

    #101388
    dusrkdldlr
    Member

    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

    #101390
    dusrkdldlr
    Member

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

    #101391
    yavordashew
    Member

    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/

    #101395
    dusrkdldlr
    Member

    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)

    #101396
    yavordashew
    Member

    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/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.