Custom Command Button

11 posts, 0 answers
  1. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 04 Aug Link to this post

    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. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 08 Aug Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 10 Aug Link to this post

    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"))
        )
    )

     

  5. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 10 Aug in reply to Sam Link to this post

    I would also like the Details link button to look the same as the Edit and Destroy buttons.
  6. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 12 Aug Link to this post

    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
  7. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 12 Aug Link to this post

    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.  

  8. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 12 Aug Link to this post

    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.

  9. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 16 Aug Link to this post

    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
  10. Sam
    Sam avatar
    8 posts
    Member since:
    Mar 2010

    Posted 21 Aug in reply to Eyup Link to this post

    Hi Eyup,

    Your last post solved the problem, thanks.

    Sam

  11. Steve
    Steve avatar
    9 posts
    Member since:
    Oct 2014

    Posted 24 Nov in reply to Viktor Tachev Link to this post

    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

  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Nov Link to this post

    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.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready