I have a view with telerik grid.
Ihave a controler code which I am passing the data to the view
public ActionResult GridList(int id)
{
_genrepo.GetCategoriesForControlPlanTemplateByControlPlanID(CurrentHealthPlanId,id);
return PartialView(_viewModel);
}
Hunter: here is my grid
<%= Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.ContactName).Width(200);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
})
.DataBinding(dataBinding =>
{
dataBinding.Server().Select("FirstLook", "Grid", new { ajax =
ViewData["ajax"] });
dataBinding.Ajax().Select("_FirstLook",
"Grid").Enabled((bool)ViewData["ajax"]);
})
.Scrollable(scrolling => scrolling.Enabled((bool)ViewData["scrolling"]))
.Sortable(sorting => sorting.Enabled((bool)ViewData["sorting"]))
.Pageable(paging => paging.Enabled((bool)ViewData["paging"]))
.Filterable(filtering => filtering.Enabled((bool)ViewData["filtering"]))
.Groupable(grouping => grouping.Enabled((bool)ViewData["grouping"]))
.Footer((bool)ViewData["showFooter"])
%>
I am able to display the data perfectly in to the grdi with pagging..
but problem is when I hit the second page.. the whole grid showing me in a static page. I am not able to see the grid.. I hope its a partial view problem.. I am not able to implement pagging sorting and filtering on partial view page?
can any body help me out how to avoid this situation to work on partial views?
thanks in advance
There's an example illustrating how to implement paging with the Telerik Grid component for ASP.NET MVC.
Related
I have a Kendo Grid with a Kendo ListView for its client detail template.
Here is the grid :
#(Html.Kendo().Grid<ITS.BusinessModel.TaskManager.TaskItem>()
.Name("grdPackage" + Model + "sTasks")
.Columns(columns =>
{
columns.Bound(taskModel => taskModel.WorkflowInstanceId);
columns.Bound(taskModel => taskModel.WorkflowInstanceName);
columns.Bound(taskModel => taskModel.Name).ClientTemplate("<a onclick='openTasksForm(#= ID#)' > #= Name # </a>");
}
.ClientDetailTemplateId("TaskSumeriesListViewTemplate")
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Model(model => model.Id(Task => Task.ID))
.Read(read => read.Action("TaskItemsList_Read", "Task", new { packageGroupID = Model, packageType = (Model == -2) ? 0 : (Model == -1) ? 1 : 2 }))
)
)
Here is the client template:
<script type="text/x-kendo-tmpl" id="TaskSumeriesListViewTemplate">
#(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
.Name("listViewPackage")
.TagName("div")
.ClientTemplateId("SummeriesTemplate")
.ToClientTemplate()
)
</script>
And here is the template for ListView :
<script type="text/x-kendo-tmpl" id="SummeriesTemplate">
<div>
#=ColumnName# : #=ColumnValue#
</div>
</script>
Each TaskItem that Grid reads has a TaskSumariesList which is a List.
I want to use this list in Grid Client Detail for ListView.
How can I do this?
In your Events call for your grid, use something like this:
.Events(e => e.DetailInit("detailInit")
Then, you can do something like this:
function detailInit(e) {
var list= $("#listViewPackage").data("kendoGrid");
list.dataSource.data(e.data.TaskSumariesList)
}
What will happen is that the list will get populated with the appropriate data when it expands.
You may need to do something like this for your List name:
.Name("listViewPackage#=WorkflowInstanceId#")
This way, you can make sure you have the right data for the right list:
function detailInit(e) {
var list= $("#listViewPackage" + e.data.WorkflowInstanceId).data("kendoGrid");
list.dataSource.data(e.data.TaskSumariesList)
}
Actually Sean is right. For more information please refer:
Kendo UI Grid: Detail Template Binding
You can also add DataSource(ds => ds.Ajax()) to your seccond grid.
#(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
.Name("listViewPackage")
.TagName("div")
.ClientTemplateId("SummeriesTemplate")
.DataSource(ds => ds.Ajax())
.ToClientTemplate()
)
It seems like Client template is not available for local bound grids.
I am using kendoUI Detail view template, as shown in the image
When i click on on each row it opens a tabstrip and displays all the data stored in the ViewData for e.g
The main grid Code is shown Below,
#(Html.Kendo().Grid<EnvironmentPOCO>()
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(d => d.EnvironmentID).Visible(false);
columns.Bound(d => d.EnvironmentName).Width(200).Title("Environment Name");
columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("Environment Code").EditorTemplateName("_EnvironmentCodeDropDown");
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["MyServers"], "ServerID", "ServerDetailsProperty").Width(300).Title("Server Details").EditorTemplateName("_ServerDropDown");
columns.ForeignKey(d => d.ProjectID, (List<SynergyProjectPOCO>)ViewData["MySynergyProjects"], "ProjectID", "ProjectDetailsProperty").Width(400).Title("Project Details").EditorTemplateName("_ProjectNameDropDown");
columns.Command(d =>
{
d.Edit();
d.Destroy();
}).Width(200).Title("Action");
}
)
.ToolBar(tools => tools.Create())
.Sortable()
.Pageable()
.Filterable()
.Navigatable()
.Sortable(sortable => sortable.AllowUnsort(false))
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Events(events => events.DataBound("dataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
})
.Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
.Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
.Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
)
)
I have a viewdata which have all the details i want to show in the tabstrip, but what i want is it should only display the data only related to the rows selected ServerID....there should be a if check in for loop for e.g if(//above grid ServerID==viewdata ServerID display that row of view data).But i dont know how to access the above grid value in the tabstrip and how to use if in cshtml razor engine. See the if check which is not working in Tabstrip code is shown below
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("Logins")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Contact Information").Content(#<div>
<ul>
#for (var i = 0; i < viewDataServer.Count; i++)
{ //How to get the Top Grid ServerID value here in **if**
#if("#=ServerID"==viewDataServer[i].ServerID.ToString())//#=ServerID should be the selected main grid serveridvalue
{
<li><label>LoginID:</label>#viewDataServer[i].LoginID.ToString()</li>
<li><label>ServerID:</label>#viewDataServer[i].ServerID.ToString()</li>
<li><label>UserID:</label>#viewDataServer[i].UserID.ToString()</li>
<li><label>Password:</label>#viewDataServer[i].passwd.ToString()</li>
}
}
</ul>
</div>);
})
.ToClientTemplate())
</script>
In case any one else have this issue, here is the solution.
The detail template of the Grid is a client template, which means that all content customizations depending on the master row must be managed from the client. Currently the TabStrip uses server-side logic that relies on a parameter (ServerID), which is available only on the client, that's why the server logic does not work as expected.
You need to populate the TabStrip via an Ajax request, which will pass the ServerID
items.Add().Text("Contact Information")
.LoadContentFrom(Url.Content("~/controller/action/?ServerID=#=ServerID#"));
http://demos.telerik.com/aspnet-mvc/tabstrip/ajax
For more advanced customization that require manual coding, you can use the Grid's detailInit event, as shown here:
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Strange thing.
My Grid seems and work correct, only untypical thing is that input during editing has:
class="text-box single-line"
instead of
class="k-textbox k-input"
Also in case when grid is completly same like in demo.
I dont know how it can happens. Copy of whole view - without some js :
#model IEnumerable<TranslationModel>
#{
ViewBag.Title = "Translations";
Layout = "~/Views/Shared/_PrivateLayout.cshtml";
Html.EnableClientValidation();
}
<h2>Translations</h2>
#(Html.Kendo().Grid<TranslationModel>(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.Shortcut).Width(150);
columns.Bound(e => e.LanguageName).Width(100);
columns.Bound(e => e.Content);
columns.Command(command => { command.Custom("ExtraPopUpEdit").Click("ExtraPopUpEdit").Text("..."); }).Width(100);
})
.ToolBar(toolbar => {
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable((p => p.PageSizes(new[] { 5 , 10, 20, 50, 100 })))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(true)
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Aggregates(a =>
{
a.Add(e => e.Content.Equals(string.Empty)).Count();
}
)
.Model(model =>
{
model.Id(e => e.Id);
model.Field(e => e.Shortcut).Editable(false);
model.Field(e => e.LanguageName).Editable(false);
})
.Group(g => g.Add(e => e.Shortcut))
.Read(read => read.Action("Translations_Read", "Admin"))
.Update(update => update.Action("Translations_Update", "Admin"))
)
)
Those classes are rendered by ASP.NET MVC when Html.EditorFor is used. If you want to remove them you have to use editor templates.
I assume you have already figured this out on your own, but for future reference for anyone else, like me, who has this problem. The solution I found is - along the lines of what Atanas said - to just copy the EditorTemplates folder from Kendo's distribution into your project. They have templates for 12 different types (in both ascx and cshtml).
The directory I copied is within the Kendo download, in \wrappers\aspnetmvc\Examples\VS2013\Kendo.Mvc.Examples\Views\Shared\EditorTemplates. Copy that into your ~/Views/Shared, delete either the *.ascx or *.cshtml files depending on your needs, and you're good to go!
I'm really new to asp.net and Telerik...
I have a RadGrid with filtering. I set AutoPostBackOnFilter="true" and CurrentFilterFunction="Contains" on my columns. Ok it works fine, user don't have to open drop-down list to select type of filter. But now, I want to hide filter buttons.
Possible ?
Thank you !
You can use this :
<script type="text/javascript">
function showFilterItem(){
$find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
}
function hideFilterItem(){
$find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
}
</script>
If you want to know more about Telerik Grids in ASP.Net, looak at the demos, there you can see samples of code : http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx
You can call .Filterable(false) on the column definition.
#{ Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(m => m.ID))
.Columns(columns =>
{
columns.Bound(m => m.Name).Filterable(false);
columns.Bound(m => m.Category).Filterable(false);
}
}
I'm trying to dynamically make certain columns readonly at runtime using the following code in my Page_Load handler:
GridNumericColumn gncp = grid.MasterTableView.GetColumn("ActualProduction") as GridNumericColumn;
if (gncp != null)
{
gncp.ReadOnly = true;
}
However, the above code only works if the column is the last column in the grid. If I try with the second to last, or columns further left, the Edit command on the row no longer works. No exception is thrown, and the EditCommand fires, but that's where the party stops.
I suspect I may be modifying the grid in the wrong place in the page life cycle, but I really don't want to start looking for the right place by trial and error. I bind my grid using grid_NeedDataSource, not in page load. Any ideas?
Try setting the readonly status inside the PreRender handler of the grid. I think this is more appropriate place to do that. More about columns customization here.
Dick
this is what I'm using for ASP.NET MVC 3 Telerik Grid. I haven't had problems changing the order of the columns. Obviously I'm using the Razor view engine. I hope this helps.
#(Html.Telerik().Grid(Model)
.Name("catGrid")
.DataKeys(k => k.Add(o => o.cat_id))
.Columns(columns =>
{
columns.Bound(m => m.cat_id).ReadOnly(true).Visible(false);
columns.Bound(m => m.tenant_id).ReadOnly(true).Visible(false);
columns.Bound(m => m.date_added).ReadOnly(true).Visible(false);
columns.Bound(m => m.category_name).Title("Category Name").Width(350);
columns.Bound(m => m.status_cd).Title("Status").Width(150);
columns.Command(c =>
{
c.Edit();
c.Delete();
}).Width(250);
})
.DataBinding(b => b.Ajax()
.Select("AjaxGridSelect", "Category")
.Insert("GridInsert", "Category")
.Update("GridUpdate", "Category")
.Delete("GridDelete", "Category")
)
.ToolBar(t =>
{
t.Insert();
})
.Pageable(paging => paging.PageSize(20)
.Style(GridPagerStyles.NextPreviousAndDropDown)
.Position(GridPagerPosition.Both)
)
.Sortable()
.Filterable()
)