This is a migrated thread and some comments may be shown as answers.

Telerik Grid Sort hides the partial view

1 Answer 63 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nishana
Top achievements
Rank 1
Nishana asked on 02 Apr 2015, 10:30 AM
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 :)

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 06 Apr 2015, 06:50 AM

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.

 
Tags
Grid
Asked by
Nishana
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or