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 :)
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
0
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.