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()
)
Related
I'm trying to add a .Select() event to my Kendo Treeview. But when I run the Program, all my Kendo Controls wont work. But when I place the Event in Comments, then they work again.
My CSHTML Kendo Treeview look like this:
#(Html.Kendo().TreeView()
.Name("treeViewDatabase")
.DataTextField("Name")
.DataSource(dataScource => dataScource
.Model(m => m
.Id("ID")
.HasChildren("HasChildren")
)
.Read(read => read.Action("RetrieveDataTable", "Management", new { id = Model.ID, type = Model.Type }))
)
.Events(events => events
.Select("onSelect"))
.HtmlAttributes(new { style = "color:white;" })
)
and the problem lies with the Event function,
but can someone please tell me what's wrong?
Thanks in Advance,
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
I have an MVC 4 application with a Kendo UI grid that I am using for user management. I display the users information in the grid and have a custom command button that when clicked opens a new page to edit the users information. For various reasons (one being there is too much information to be edited to display in the grid) I need to edit the users on a new page and not with inline or popup or incell editing. My grid looks like this... very simple
#(Html.Kendo().Grid<WebSiteNew.Models.ManageUsersViewModel>()
.Name("grid")
.HtmlAttributes(new { style = "margin-top: 5px" })
.Columns(c =>
{
c.Bound(model => model.UserName);
c.Bound(model => model.FirstName);
c.Bound(model => model.LastName);
c.Bound(model => model.Email);
c.Bound(model => model.Phone);
c.Bound(model => model.Extension);
c.Bound(model => model.JobTitle);
c.Command(com => { com.Custom("Edit").Click("edit"); com.Destroy(); });
})
.Pageable()
.Sortable()
.Selectable()
.DataSource(d => d
.Ajax()
.PageSize(20)
.Model(m => m.Id(i => i.UserName))
.Read(r => r.Action("ManageUsers_Read", "ManageUsers"))
.Destroy(o => o.Action("ManageUsers_Destroy", "ManageUsers"))
))
The issue I have here is that I need to pass the ID of the user that the edit button has been clicked on to the edit screen so that I can bring up the information for the selected user. The only way I know of to get this information is through javascript, something like this in my command button click function...
function edit() {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
var dataItem = grid.dataItem(row);
var id = dataItem.UserId;
location = "#Url.Action("EditUser")";
}
This gives me the id that I need but I have no way (that I know of) to pass this back to my controller. So my question is... how do I get this information back to the server side? Is there another way to get the information I need or is this just something that is not possible in Kendo UI MVC?
To make this a more general question.. when I look at the Kendo UI documentation and it tells me how to get a value in javascript... how, in general, does one go about using this value in an MVC application when it is needed on the server side? I can't seem to find an alternative "MVC" way to do this in their documentation.
You should form additional parameters to url string:
location = "#Url.Action("EditUser")" + "?id="+id;
I am experimenting with using an external data source with a Telerik Grid using their Twitter search sample as my guide
http://demos.telerik.com/aspnet-mvc/razor/grid/externalservicetwitter
I have got their sample running but cannot get paging and sorting to work.
In the sample they set-up the grid server side using the code
#(Html.Telerik().Grid<TwitterItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Template(o => { }).Title("Author").Width(100);
columns.Template(o => { }).Title("Avatar").Width(80);
columns.Bound(o => o.text).Title("Post");
})
.ClientEvents(events => events
.OnDataBinding("onDataBinding")
.OnRowDataBound("onRowDataBound")
)
.Scrollable(scrolling=>scrolling.Height(400)))
So I added .Pageable and .Sortable to the construct like in the other samples but this seems to make no difference
#(Html.Telerik().Grid<TwitterItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Template(o => { }).Title("Author").Width(100);
columns.Template(o => { }).Title("Avatar").Width(80);
columns.Bound(o => o.text).Title("Post");
})
.ClientEvents(events => events
.OnDataBinding("onDataBinding")
.OnRowDataBound("onRowDataBound")
)
.Scrollable(scrolling=>scrolling.Height(400))
.Pageable()
.Sortable()
)
Should this be working? Is there something else I should be doing?
I am having the same problem.
My challenge is that the users want to retreive repeatedly for different criteria and they expect the results to accumulate in the grid until they clear the grid. I am building this capability. I got the accumulation to work, but along the way something is causing the "Displaying items 0 - 0 of 0".
This question has been sitting out here for a long time. It makes me feel discouraged.
My theory is that the custom binding messes up the other settings.
Joe
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.