Custom Command in Grid with Ajax Binding in Command Column - How to Do?

4 posts, 0 answers
  1. Malcolm
    Malcolm avatar
    29 posts
    Member since:
    Oct 2011

    Posted 08 May 2013 Link to this post

    Dear KendoUI Team!
    Is it possible to realize s.th. like this with KendoUI when using AJAX Binding?

                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.Image);
                    commands.Delete().ButtonType(GridButtonType.Image);
                    commands.Custom("CopyItem")
                        .Action("CopyItem", "Le")
                        .Ajax(true)
                        .HtmlAttributes(new { id = "CopyItemDetails" })
                        .DataRouteValues(route => route.Add(i => i.Rid).RouteKey("ItemID"))
                        .ButtonType(GridButtonType.Image)
                        ;

                }).Title(Strings.Commands).Visible((bool)ViewData["Writable"]);
    What I found is that the custom command should be replaced by a column template. But I want the copy command in the command column, not in a separate column. And I need the ItemID of the row, of course.
    How can I realize this with KendoUI?

    brgds
    Malcolm Howlett
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 10 May 2013 Link to this post

    Hello Malcolm Howlett,

    You could make the Ajax request in the click handler. The data for the row can be found as demonstrated in the custom commands demo e.g.

    columns.Command(command => command.Custom("CopyItem").Click("copyItem").HtmlAttributes(new { id = "CopyItemDetails" }));
    function copyItem(e) {
        e.preventDefault();
                 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        $.ajax({
            url: "myUrl",
            type: "POST",
            data: {
                ItemID: dataItem.Rid
            },
            success: function (response) {
     
            }
        });
    }
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. wortho
    wortho avatar
    5 posts
    Member since:
    Nov 2013

    Posted 23 Oct 2014 in reply to Daniel Link to this post

    Hi Daniel,
    I am migrating from Telerik Grid to Kendo Grid and I have a custom command like so;

    c2.Command(cmd => cmd.Custom("cmdCopy")
        .Text("Copy")
        .Ajax(true)
    .DataRouteValues(r =>r.Add(w => w.ServiceOccurrenceId).RouteKey("id")).Action("ServiceOccurrenceCopy", "ServiceAdmin")).Width(120);

    Am I to understand that in Kendo Grid there is no longer this feature (.Ajax()) and I should code my own JS to call and replace or am I missing something simple?
    I have had a search around and all the examples seem to point to simply calling a javascript method from the custom command. Which I can no issue, and I kind of like having more control over the ajax but when I have many of these grids to migrate I need to consider ROI time.
    Thanks in advance,
    Steve
  4. wortho
    wortho avatar
    5 posts
    Member since:
    Nov 2013

    Posted 23 Oct 2014 in reply to wortho Link to this post

    Sorry cancel that - I have answered my own question in the FAQ and see that it is achievable by a custom template column if I want server side binding or else write my own wee js if I want the ajax.

    http://www.telerik.com/forums/custom-command-and-ajax-binding#GXb5x9XYRkyKdPKDcUDCHw

    Thanks,
    Steve
Back to Top