Dynamic text on custom command button

[Erik]

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

[Neli]

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

[Erik]

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?

[Erik]

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

[Aleksandar]

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