Custom Command Button

2 Answers 3594 Views
Grid
Sam
Top achievements
Rank 1
Sam asked on 04 Aug 2016, 08:37 AM
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.

2 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 08 Aug 2016, 07:00 AM
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.


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:



Regards,
Viktor Tachev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Sam
Top achievements
Rank 1
commented on 11 Aug 2016, 02:34 AM

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
Top achievements
Rank 1
commented on 11 Aug 2016, 03:09 AM

I would also like the Details link button to look the same as the Edit and Destroy buttons.
Eyup
Telerik team
commented on 12 Aug 2016, 03:17 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Sam
Top achievements
Rank 1
commented on 12 Aug 2016, 10:17 PM

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
Top achievements
Rank 1
commented on 12 Aug 2016, 11:19 PM

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.

0
Eyup
Telerik team
answered on 16 Aug 2016, 06:55 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Sam
Top achievements
Rank 1
commented on 22 Aug 2016, 02:22 AM

Hi Eyup,

Your last post solved the problem, thanks.

Sam

Steve
Top achievements
Rank 1
commented on 25 Nov 2016, 03:12 AM

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
Telerik team
commented on 28 Nov 2016, 12:20 PM

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Roby
Top achievements
Rank 1
commented on 26 Jul 2019, 08:15 PM

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
Telerik team
commented on 29 Jul 2019, 08:45 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Eyup
Telerik team
Share this question
or