JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › columns with button
- This topic has 7 replies, 2 voices, and was last updated 3 years, 10 months ago by yavordashew.
-
AuthorPosts
-
January 26, 2021 at 6:31 am #101374dusrkdldlrMember
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?January 26, 2021 at 11:14 am #101378yavordashewMemberHi 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/January 27, 2021 at 6:33 am #101387dusrkdldlrMembertemplate: ‘<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)January 27, 2021 at 6:57 am #101388dusrkdldlrMemberconst 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 eitherJanuary 27, 2021 at 8:49 am #101390dusrkdldlrMemberActually I’m not using the composition API. I’m using window.Smart on mounted. Could it be related?
January 27, 2021 at 9:18 am #101391yavordashewMemberHi 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/January 28, 2021 at 7:35 am #101395dusrkdldlrMemberthank 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)January 28, 2021 at 1:51 pm #101396yavordashewMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.