Pass ID to custom command

12 posts, 1 answers
  1. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 02 Apr 2013 Link to this post

    I do not find a way to pass Id of a model(the selected record Id in grid) to custom command, how to do that?

    .ToolBar(toolbar =>  {      toolbar.Create();      toolbar.Custom().Text("Clickme").Action("myAction", "myController");  })
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 02 Apr 2013 Link to this post

    Hello Tomas,


    To achieve this, you could bind to the click event of the command and since it is just a link tag under the hood, you could manipulate it's href attribute and attach the parameters.
    E.g.
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Text("Clickme").Name("Clickme").Action("myAction", "myController");
    })

    $(".k-grid-Clickme").on("click", function () {
        var grid = $("#grid").data("kendoGrid");
        var selectedData = grid.dataItem(grid.select());
        if (selectedData) {
            var selectedId = selectedData.ProductID;
            var href = $(this).attr("href");
            href += "?id=" + selectedId;
            $(this).attr("href", href);
        }
    });

    I hope this approach will work in your scenario.


    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 09 Apr 2013 Link to this post

    This seems like a hack, why it is not possible to implement Toolbar Buttons like it is done with column command like Edit or Destroy. These command do not required any JS hacks and post data to controller as expected.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 10 Apr 2013 Link to this post

    Hello Tomas,


    Sorry for the inconvenience, but currently this is the only way to achieve this. Nevertheless if you consider that adding this ability to a custom toolbar button will be useful for other users too, you could post it in our Kendo User Voice portal. If it receives enough votes from the community, we will consider to implement it in future releases of Kendo UI.

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 08 Oct 2014 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter 

    Just wanted to say thank you for the response.

    Regads
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 08 Oct 2014 Link to this post

    Hi Jako,


    Thanks for the feedback. I am glad the information was helpful.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Adam
    Adam avatar
    1 posts
    Member since:
    Feb 2015

    Posted 22 Apr 2015 Link to this post

    Is there any improvement on this kind scenario in recent years?

    If there is a way to pass current datasource object to Action method, it will better fit in MVC. 

     

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 23 Apr 2015 Link to this post

    Hello Adam,

    If the current approach is not suitable, you could directly use a template with an action link and add the k-button CSS class to the link so that it looks like the Grid commands.

    Regards,
    Dimiter Madjarov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 24 Aug 2015 Link to this post

    Hi Dimiter,

    I have a dynamic grid, for n number of providers, I am creating service table for each provider. I am adding the provider id to the each service grid name, so that i can refer that service is from which provider. But I am not sure how to get the name of the grid on click of the custom command button.

        //for each model.id, it create the below code     
         <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-18 col-md-12">
                                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
                    .Name("grid" + Model.Id)
            .Columns(columns =>
            {
                columns.Bound(o => o.ServiceId).Hidden(true);           
                columns.Bound(p => p.ServiceName);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.Qualifier);
                columns.Bound(o => o.ServiceModifier);
                columns.Bound(o => o.WomenSetAside).Title("Women Set Aside");
                columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
    //custom command
                columns.Command(command => command.Custom("Budget").SendDataKeys(true).Click("budgetClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" }));
            })
                                        //.Events(e => e.DataBound("onDataBound"))
            .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .Resizable(resize => resize.Columns(true))
            .HtmlAttributes(new { style = "height:350px;" })
                .DataSource(dataSource => dataSource.Ajax().PageSize(10).Read(read => read.Action("Services_Read", "Contract", new { contractorId = @Html.Raw(Json.Encode(Model.Id)), contractId = @Html.Raw(Json.Encode(Model.contractId)) }))))
                            </div>
                        </div>
                    </div>
     
    custom command button click event
     
           function budgetClick(e) {
                    e.preventDefault();
                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    var modelObj = @Html.Raw(Json.Encode(Model));
    //trying to get table name for that service table
                    alert(e.sender.options.table.parent('div')[0].id);              
                    Id = dataItem.Id;
                    var element = $(document.body);
                    kendo.ui.progress(element, true);
                    $.ajax({
                        url: '@Url.Action("ContractBudgetService", "ContractBudget")',
                        type: 'GET',
                        data: {
                            'contractId':modelObj.Id,
                            'contractorId':$(this).parents('.panel-wrap').attr('id'),
                            'serviceId': Id
                        },
                        success: function (data) {
                            kendo.ui.progress(element, false);
                            $('#ContractBudgetIndexDiv').html(data);
                        },
                        error: function () {
                            kendo.ui.progress(element, false);
                            console.log("error in saving the record");
                        }
                    });
                    //window.location.href = '@Url.Action("Edit","Contractor")/' + Id;
                }

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 26 Aug 2015 Link to this post

    Hello,

    You could access the current Grid via it's data-role attribute and then get it's id attribute, which is the same as the name.
    E.g.

    $(e.currentTarget).closest("[data-role='grid']").attr("id");

    Regards,
    Dimiter Madjarov
    Telerik
    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
  12. Richard
    Richard avatar
    1 posts
    Member since:
    Aug 2012

    Posted 23 Mar in reply to Dimiter Madjarov Link to this post

    I know this post is about 3yr old; but I'm having the same issue.  The code you provided does work normally; but when I insert the toolbar  on a child grid (I have a hierarchy) it doesn't work.  Suggestions?  
  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 24 Mar Link to this post

    Hello Richard,

    Are you retrieving the correct Grid instance, using the code from the last post? If that is the case and the issue is still reproducing, you could send us a sample project here or in a support ticket, so we could take a look and provide further help.

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