Custom Command Button

[Sam]

I have a custom command in my grid:

columns.Command(command => { command.Edit(); command.Custom("InvoiceDetails"); command.Destroy(); }).Width(200);

When the user clicks this button I would simply like to navigate to the page Details on the controller InvoiceController with the correct InvoiceID from the appropriate row the user clicked.
It seems this used to be done like so

commands.Custom("InvoiceDetails").Action("Details", "Invoice").DataRouteValues

However I have no action method on the custom command only a click method?
Where has this action method gone, and how do I now use the click method?
I'm using ASP.net Core 1.

[Viktor Tachev]

Hi Sam,

Currently the Action method is not available for the MVC Core wrappers. There is a GitHub issue logged for this and you can see it in the link below.

• https://github.com/telerik/kendo-ui-core/issues/2008

In order to implement the behavior you can use a template and call the Action there. Check out the following thread that illustrates the approach:

• http://www.telerik.com/forums/can-t-get-custom-command-button-to-invoke-an-action-in-my-controller#LrTNY81_WUmMgzOGNvmpVg

Regards,
Viktor Tachev
Telerik by Progress

[Sam]

Hi Viktor,

Thanks for your help.

I get this error message:

An error occurred during the compilation of a resource required to process this request. Please review the following specific error details and modify your source code appropriately.

Here is my code:

@(Html.Kendo().Grid<GearBox.Models.Invoice>()

        .Name("grid")

        .Columns(columns =>

        {

        columns.Bound(p => p.InvoiceID);

        columns.Bound(p => p.Description);

 

        columns.ForeignKey(p => p.CompanyID, (System.Collections.IEnumerable)ViewData["companies"], "CompanyID", "Name")

        .Title("Company");

        columns.Template(@<text></text>).ClientTemplate("<a href='"+Url.Action("Index","InvoiceItem")+"/#=InvoiceID#'>Edit</a>");

        columns.Bound(p => p.InvoiceDate).Width(130).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date");

        columns.Bound(p => p.DueDate).Width(130).Format("{0:dd/MM/yyyy}");

        columns.Bound(p => p.Paid).Width(80).ClientTemplate("<input type='checkbox' disabled='disabled' #= Paid ? checked='checked' :'' # />");

        columns.Command(command => { command.Edit(); command.Destroy(); });

        })

        .ToolBar(toolbar => toolbar.Create())

        .Editable(editable => editable.Mode(GridEditMode.PopUp))

        .Pageable(pageable => pageable

           .Input(true)

           .Numeric(false)

         )

        .Sortable()

        .Scrollable()

        .HtmlAttributes(new { style = "height:430px;" })

        .DataSource(dataSource => dataSource

            .Ajax()

            .PageSize(20)

            .Model(model =>

            {

                model.Id(a => a.InvoiceID);

                model.Field(a => a.Company.Name).Editable(false);

 

            })

        .Events(e => e.Error("error_handler"))

        .Create(update => update.Action("Invoices_Create", "Invoice"))

        .Read(read => read.Action("Invoices_Read", "Invoice"))

        .Update(update => update.Action("Invoices_Update", "Invoice"))

        .Destroy(update => update.Action("Invoices_Destroy", "Invoice"))

    )

)

 

[Sam]

I would also like the Details link button to look the same as the Edit and Destroy buttons.

[Eyup]

Hello Sam,

Please include this requirement in the details you send along with the modified application in your thread with ID: 1054377 and we will tweak it to provide a working version.

Regards,
Eyup
Telerik by Progress

[Sam]

When I added the below code line to your sample project it worked.

columns.Template(@<text></text>).ClientTemplate("ahref='"+Url.Action("
Index","InvoiceItem")+"/#=InvoiceID#'>Edit</a>");

However it does not work in my project.  I get the same error:  

Cannot convert lambda expression to type 'string' because it is not a delegate type

Which is the same error the other person got in the link Viktor posted.  

[Sam]

Ok - so I created a brand new telerik asp.net core mvc application added a grid and then added the one line of code and it through the error as mentioned above.  It seems to be related to asp.net core.

I cant upload the project because it is to big for the forum.  However it should be easy for you to replicate.  It took me about 1min to create the project and add the grid and one line of code.

Thanks for your help.

[Eyup]

Hello Sam,

I'll try to provide more accurate solutions:

1. You can try using the ClientTemplate of a bound column:

        c.Bound(d => d.Message).ClientTemplate("<a href='" +
    Url.Action("ProductDetails", "Product") +
    "/#= Message #'" +
">Show Product Details</a>");

2. You've mentioned that you prefer the same look with the built-in buttons. Therefore, you can use:

c.Command(command => command.Custom("Action Name").Click("customAction"));

JavaScript:

function customAction(e) {
    // initiate call to a controller action
}

As for initiating a call to the controller action, you can check various sources over the net:
http://stackoverflow.com/questions/6119098/how-to-call-controller-actions-using-jquery-in-asp-net-mvc
http://stackoverflow.com/questions/4120212/mvc-ajax-json-post-to-controller-action-method​

Thank you for bringing this issue to our attention. The missing method is logged in our tracking system and our developers may consider exposing them for the future releases of the Kendo UI for .NET Core. I've upgraded your Telerik Points as a token of gratitude.

Regards,
Eyup
Telerik by Progress

[Sam]

Hi Eyup,

Your last post solved the problem, thanks.

Sam

[Steve]

Viktor,

I hate to say this but this isn't helpful in all situations.    I need a custom command off a TOOLBAR button, not a column-based button.

Suggestions?

Steve

[Viktor Tachev]

Hi Steve,

If you would like to call an action from the Grid toolbar you can use a ClientTemplate. The code snippets below outline the approach:

.ToolBar(t=>t.ClientTemplateId("customClientTemplate"))

<script type="text/x-kendo-template" id="customClientTemplate">
    <a id="CustomButton" href="@Url.Action("SomeActionName", "Controller")">Click here</a>
</script>

Regards,
Viktor Tachev
Telerik by Progress

[Roby]

I have found some oddity here with version 2019.1.115.  

c.Command(x =>
              {
                  x.Custom("goToMedia").Text(" ")
                      .IconClass("go-to-media")
                      .Click("MediaFeeds.onGoToMediaClick")
                      .HtmlAttributes(new{title="Go to associated media collection."});
                  x.Custom("showBatchConfiguration")
                      .Text(" ")
                      .IconClass("fas fa-cog")
                      .Click("MediaFeeds.onShowConfigurationSettings")
                      .HtmlAttributes(new {title = "Display settings used to process media collected by this feed."});
              });

The first button has an href that points to the correct nav location the function listed will redirect to but the second just makes and ajax call and opens a window as in the demo does not do anything. It does not call the function. I may need to update again.

[Viktor Tachev]

Hi Roby,

The behavior you describe seems rather strange. By default the custom commands will render an anchor element with href attribute set to "#". Additional JavaScript can be used to specify what action will be performed when clicking the button. Would you send us a runnable project where the behavior is replicated so we can examine it?

With that said, please submit new questions in a separate ticket/forum thread. This will enable us to keep better track of the support activity and provide better answers faster. 


Regards,
Viktor Tachev
Progress Telerik