Telerik Grid Sort hides the partial view

2 posts, 0 answers
  1. Nishana
    Nishana avatar
    1 posts
    Member since:
    Mar 2015

    Posted 02 Apr 2015 Link to this post

    Hi All,

    I am new to MVC ,so if i am wrong sorry in advance.
    My application have one telerik grid. it contains several columns,
     one column is ajax action link (productid),it displays a partial view within the same page. upto this it works fine.
    Now when i sort the telerik grid colum, it hides this partial view.
    Below is my view:


    @model IEnumerable<MvcApplication2.Models.Product>@{
    ViewBag.Title = "WebgridSample";
    }<h2>WebgridSample</h2>
    @using Kendo.Mvc.UI; 



    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>



    @{
    MvcApplication2.Models.Product product = new MvcApplication2.Models.Product();
    }
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    @Scripts.Render("~/bundles/jquery")



    @Html.DisplayNameFor(model => model.Quantity)
    </th>
    <th></th>
    </tr>@(Html.Kendo().Grid(Model).Name("ProductGrid")
    .Columns(columns =>
    {columns.Template(@<text>
    @Ajax.ActionLink(@item.Id.ToString(), "Edit",
    new { id = @item.Id,name=@item.Name,desc=@item.Description,quantity=@item.Quantity }, new AjaxOptions { HttpMethod = "GET", 
    InsertionMode = InsertionMode.Replace ,
    UpdateTargetId = "view-details"

    }) 
    </text>)
    .Title("Id");
    columns.Bound(o => o.Name);
    columns.Bound(o => o.Description);
    columns.Bound(o => o.Quantity);
    })
    .Pageable()
    .Sortable()
    )
    <div id="view-details" >


    </div>


    and my controller action is given below:

    public PartialViewResult Edit(string id)
    {Product product = inventoryList.Single(t => t.Id == id);
    return PartialView("_Product", product);
    }

    and my partial view is:

    @model MvcApplication2.Models.Product
    @{
    Layout =null;
    }<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />

    </head>
    <h2>Product Details</h2> 
    <body>
    <table ><tr><td><label>Id:</label></td><td>@Html.TextBox("Id", Model.Id)</td></tr>
    <tr><td><label>Name:</label></td><td> @Html.TextBox("Name", Model.Name)</td></tr>
    <tr><td> <label>Description:</label></td><td> @Html.TextBox("Description", Model.Description)</td></tr>
    <tr><td><label>Quantity:</label></td><td> @Html.TextBox("Quantity", Model.Quantity)</td></tr>
    </table>








    </body>
    </html>Thanks in advance :)
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 06 Apr 2015 Link to this post

    Hello Nishana,

    The current is using server binding, which means that a GET request will be initiated for every operation (e.g. sorting) and the page will be reloaded. This is why the partial view is hidden. As a solutions you could implement the Grid with ajax binding or configure it to use local data as in the following demo.

    Regards,
    Dimiter Madjarov
    Telerik
     

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

     
Back to Top