This is a migrated thread and some comments may be shown as answers.
Dynamic text on custom command button
2 Answers 13 Views
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 20 Apr 2021, 04:53 AM

Hi there,

I have a custom command column in my grid, as follows...

.Columns(columns =>
{
    columns.Bound(b => b.Created_DisplayString);
    columns.Bound(b => b.Closed_DisplayString);
    columns.Command(command => command.Custom("Close or ReOpen").Click("onCloseReOpen"));
})

 

My viewmodel has a (readonly) property that returns either "Close" or "ReOpen" (as appropriate)

public string CloseOrReOpen
{
    get
    {
        return (Closed_DateTime.HasValue ? "ReOpen" : "Close");
    }
}

 

How can I bind the text of the Command button to this property pls. (instead of the current "Close or ReOpen")?

Thx,

Erik

2 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 22 Apr 2021, 01:22 PM

Hello Erik,

To achieve the desired result I would suggest you use a column template and create a button as in the example below:

 columns.Template("<button class='k-primary k-button' onclick='arrived()'>#=Arrived#</button>");

Let me know in case you have an additional question on the matter. 

Regards,
Neli
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

I have added the 2 columns side-by-side:
columns.Command(command => command.Custom("Close or ReOpen").Click("onCloseReOpen"));
columns.Template("<button class='k-primary k-button' onclick='onCloseReOpen()'>#=CloseOrReOpen#</button>");
... and the javascript onCloseReOpen() is called differently.

The button in the first column calls upon onCloseReOpen(e), where I use ...
var grid = $(e.currentTarget).closest('[data-role="grid"]');
var rowid = this.dataItem($(e.currentTarget).closest("tr")).Id;
to get to the relevant grid & row data to make an ajax call, reload the grid, etc.

The second button does show the dynamic caption as requested ("Close" or "ReOpen").
But the second button calls upon onCloseReOpen() without any arguments.
event.currentTarget seems to work ok, but 'this' refers to a different object (Window instead of init) so that this.dataItem() is undefined.
How do I get to the grid and row data in this case?
- by
Erik
Top achievements
Rank 1
on 29 Apr 2021, 02:04 AM
FYI: I have used this page as my source for writing the custom command:
https://demos.telerik.com/kendo-ui/grid/custom-command

If you could explain - in this example - what the showDetails() function would look like if it was called from a template column instead of a command column, I would be able to take it from there...

Thx, Erik
- by
Erik
Top achievements
Rank 1
on 30 Apr 2021, 05:21 AM
0
Aleksandar
Telerik team
answered on 03 May 2021, 02:05 PM

Hi Erik,

With the two different approaches you can get reference to the Grid the following way:

columns.Command(command => command.Custom("Close or ReOpen").Click("onCloseReOpen"));
columns.Template("<button class='k-primary k-button' onclick='onCloseReOpenTemplate(this)'>#=CloseOrReOpen#</button>");

I changed the name of the function used in the Template to highlight the differences:

<script>
    function onCloseReOpen(e) {
        var grid = $(e.currentTarget).closest('[data-role="grid"]');
        var rowid = this.dataItem($(e.currentTarget).closest("tr")).OrderID;
        console.log(rowid);
    }

    function onCloseReOpenTemplate(element) {
        var clickedButton = element;
        var rowElement = $(clickedButton).closest('tr');
        var gridElement = $(clickedButton).closest('[data-role="grid"]');
        var grid = $(gridElement).getKendoGrid();
        var dataItem = grid.dataItem(rowElement);
        console.log(dataItem);
    }
</script>

I hope this helps.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Neli
Telerik team
Aleksandar
Telerik team
Share this question
or