How to get selected data in grid and send parameter to controller action

5 posts, 0 answers
  1. Robert
    Robert avatar
    2 posts
    Member since:
    Nov 2014

    Posted 13 Nov 2014 Link to this post

    Hi all

    i want to get selected row and pass the ProductID to controller action, these is my code

    @model TelerikMvcApp2.Models.Products@{
        ViewBag.Title = "1";
        var ProductID = 0;
        int x = 0;
    }
    <h2>Index</h2><div>
        @ProductID
    </div><div>
        <h4>Basic Button</h4>
        <p>
        @(Html.Kendo().Button()
            .Name("primaryTextButton")
            .HtmlAttributes( new {type = "button", @class = "k-primary" } )
            .Content("Clear"))
           
        </p>
    </div>
        <div id="clientsDb">
            @(Html.Kendo().Grid<TelerikMvcApp2.Models.Products>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.ProductID).Width(140);
                    columns.Bound(c => c.ProductName).Width(190);
                    columns.Bound(c => c.UnitPrice);
                    columns.Bound(c => c.UnitsInStock).Width(110);
                })
                .HtmlAttributes(new { style = "height: 380px;" })
                .Scrollable()
                .Groupable()
                .Sortable()
                .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
                    .Sortable()
                .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Single)
                    .Type(GridSelectionType.Row))
                .Events(events => events.Change("onChange"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Customers_Read", "Home"))
                )
            )
          </div>    <div>        
            <img name="Pic1" alt="test" src='@Url.Action("Events", "Home", new { id = @ProductID })'/>
        </div>
           <script type="text/javascript">        function onChange()
            {
                var selectedrow = $("#grid").find("tbody tr.k-state-selected");
                var goods = $('#grid').data("kendoGrid").dataItem(selectedrow);
                var goodsjson = goods.toJSON();
                var goodsID = goodsjson.ProductID;
                document.Pic1.src = '@(Url.Action("Events", "Home", new { id= goodsID}))';
                        }</script>   

    it can build successfully but when run it, it will show The name 'goodsID' does not exist in the current context 
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 17 Nov 2014 Link to this post

    Hello,

    You should append the parameter to the URL:
    '@(Url.Action("Events", "Home"))?id=' + goodsID;
    The error will be thrown because Url.Action is a server-side method and goodsID is a JavaScript variable.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Robert
    Robert avatar
    2 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2014 in reply to Daniel Link to this post

    Thanks~

    it works~
  4. valdemar
    valdemar avatar
    1 posts
    Member since:
    Jul 2017

    Posted 11 Aug 2017 in reply to Daniel Link to this post

    Si quiero hacer esta reucperación pero en jquery o javascript me encantaría.
  5. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 15 Aug 2017 Link to this post

    Hello Valdemar,

    Please have in mind that the Kendo UI official support services are only in English.

    Please provide a short description of the issue in English and if possible a small runnable example and we will gladly assist.

    Also, I can suggest submitting a new support ticket in our system.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top