I'm using Infragistics on an Entity Framework code-first MVC project. I want to display a table with a hidden column (the ID) and it has to be editable. Here is what I've got so far:
<table id="igTests"></table>
#(Html.Infragistics().Grid<BusinessModel.VO.TestVO>().ID("igTests")
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.TestId).DataType("int").HeaderText("id");
column.For(x => x.TestNum).DataType("int").HeaderText("Test num");
column.For(x => x.Type).DataType("string").HeaderText("Type");
column.For(x => x.Nature).DataType("string").HeaderText("Nature");
column.For(x => x.TeamName).DataType("string").HeaderText("Team");
column.For(x => x.CreateDate).DataType("date").HeaderText("Creation date");
})
.Features(feature => {
feature.Sorting().CaseSensitive(true);
feature.Filtering().Mode(FilterMode.Simple);
})
.PrimaryKey("TestId")
.DataSource(Model.TestsVO.AsQueryable())
.DataBind()
.Render())
This is what is displayed:
Now lets add the update feature (i know the readOnly is useless since we are not supposed to see it):
feature.Updating().EnableAddRow(true).EnableDeleteRow(true).EditMode(GridEditMode.Row).ColumnSettings(settings =>
settings.ColumnSetting().ColumnKey("TestId").ReadOnly(true)
);
And hide my ID-column:
column.For(x => x.TestId).DataType("int").HeaderText("id").Hidden(true);
Here is what i get. As you can see the table acts like my ID-column was visible.
This happened when I added the update feature. Do you have any idea on how I could fix the "Add new row" row acting like my column was visible? Thanks in advance.
Probably you should add this
}).Features(features => features.Hiding()
.ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("id").Hidden(true).AllowHiding(false)
http://www.infragistics.com/products/jquery/sample/grid/column-hiding-on-initialization
I got it to work using .Width("0px") and ReadOnly on my ID-column. A bit dirty but had no other choice...
Related
I have a kendo grid on a page. I added the filtering possibility like this for every column
I need to add the row filtering of the kendo grid, and it looks like this.
#(Html.Kendo().Grid<GGISServices.Models.DistrictViewModel>()
.Name("districtGrid")
.HtmlAttributes(new { #class = "newGrid" })
.Columns(columns =>
{
columns.Bound(c => c.NatureOfProduct).Title(LanguageService.Instance.Translate("NatureOfProduct")).Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Contract", new { Area = GGISWeb.AreaModules.District }).Type(HttpVerbs.Post).Data("{ field: 'NatureOfProduct' }"))));
This filter looks like this, and the user can select more than one item to search
But I needed to change to row filtering mode, because the client asked for search box for every column, so I added
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
and now the filer appears like this
which is ok, this is what the client needs, but they want both searching possibilities, and when I have added the
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
the filter where I can select all items does not appear anymore.
Can you please advise how to do, to show both filter: the searchbox for every column and the other where the user can select the items?
Or if I use only the GridFilterMode.Row the user has the posssibility to select more than one item?
The solution was to add the
.ColumnMenu(f => f.Enabled(true))
and for the columns
.Filterable(f => f.Multi(true));
I have a model like so:
Id Type
-------------
1 Vehicle
2 Trailer
3 Vehicle
I am hoping to eventually use a radio button to control how this data is filtered on a Kendo grid, choosing to filter on whether Type equals Vehicle or Trailer. I don't know how to do that, but, for now, I can't even get the initial filter to work. My grid is as follows:
#(Html.Kendo().Grid<PcKendoUi.Models.CompanyDueDatesIndexVM>()
.Name("DueDates")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.Type);
})
.Filterable()
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(x => x.Id))
.Read(s => s.Action("Test", "CompanyDueDates"))
.Filter(filter =>
{
filter.Add(f => f.Type == "Vehicle");
})
)
)
My code is based on the filter example from the documentation.
This still displays all 3 records in the model, rather than just rows 1 and 3. What is also interesting is that after specifying this initial filter, the filter controls also do not allow any filter. That is, they are visible, I can type in data and click Filter, but it will not filter the grid.
Does anyone have an idea what the problem could be?
According the documentation your syntax is not correct, you wrote:
filter.Add(f => f.Type == "Vehicle");
When it should be:
filter.Add(f => f.Type).IsEqualTo("Vehicle");
I have a Telerik MVC grid with a single detail view.
Inside the detail view is a telerik tabstrip. When I select the grid row to display, the detail will open up completely empty.
I have copied the tabstrip code outside the grid, changing the name of the grid to a static name and rendering the grid instead of outputting it as an htmlstring, and it displays perfectly.
I've tried registering all required javascript files, no change.
I'm pretty stumped at this point. I've cleared out the entire tabstrip so it contains nothing but text, but no change.
Here's the code which i have:
<%: Html.Telerik().Grid(Model.AccessRequests)
.Name("gridAccessRequests")
.ColumnContextMenu()
.DataKeys(d => { d.Add(a => a.Access_Request_ID).RouteKey("id");})
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("AjaxBinding", "Home")
.Insert("Insert", "Home")
.Update("Save", "Home")
.Delete("Delete", "Home"))
.ToolBar(commands => commands.Insert())
.Editable(editing => editing
.InsertRowPosition(GridInsertRowPosition.Bottom)
.Mode(GridEditMode.PopUp))
.HtmlAttributes(new { style = "width:100%" })
.Selectable()
.Sortable(sorting => sorting
.OrderBy(sortOrder => sortOrder.Add(o => o.EMPLOYEE_NAME).Ascending()))
.Filterable(filtering => filtering
.Filters(filters => filters
.Add(o => o.RECORD_YEAR).IsEqualTo(Model.CurrentYear)))
.Pageable(paging =>
paging.PageSize(15)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Both))
.ClientEvents(events =>
{
events.OnEdit("onEdit");
events.OnRowDataBound("requests_onRowDataBound");
})
.DetailView(details => details.ClientTemplate(
Html.Telerik()
.TabStrip()
.Name("TabStrip_<#=id#>")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.ToHtmlString()
))
.Columns(col =>
{
col.Bound(c => c.Access_Request_ID).Title("ID");
col.Bound(c => c.RECORD_YEAR).Title("Year");
col.Bound(c => c.VERSION_NO).Title("Version");
col.Bound(c => c.EMPLOYEE_NAME).Title("Name");
col.Command(commands =>
{
commands.Edit()
.ButtonType(GridButtonType.Image);
commands.Delete()
.ButtonType(GridButtonType.Image);
commands.Custom("Clone")// the constructor accepts the name of the custom command (used to differentiate between multiple custom commands)
.Text("Clone")
// Specify which fields from the bound data item to include in the route (pass as action method arguments)
.DataRouteValues(route => route.Add(o => o.Access_Request_ID).RouteKey("requestId"))
.Ajax(true)
// Which action method to call
.Action("CloneRequest", "Home");
}).Width(145)
.IncludeInContextMenu(false);
})%>
Here is the standalone tabstrip:
<%
Html.Telerik().TabStrip()
// Make the Name unique
.Name("TabStrip")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.Render();
%>
Any Suggestion/ Solution/Demo will be helpful.
Thanks in advance!
UPDATE
I have figured out that the tabstrips are not displaying on initial load of the grid; after hitting the grid's refresh button or paging the tabstrips display and function correctly.
It appears that there is an invalid property value error being thrown after the grid is loaded but before any databinding is completed, but I still can't seem to pinpoint the exact problem. Again, hitting the grid's refresh button or paging will successfully databind all the rows.
When the page first loads, the grid is loaded via server side binding. The tab strips are defined in the client template which is not used during server binding. When you refresh the grid, it is loaded via ajax binding and the client template is used.
You need to make the grid load initially via ajax binding so you need to use a different constructor.
Change this:
Html.Telerik().Grid(Model.AccessRequests)
to this:
Html.Telerik().Grid<AccessRequests>() //Put in the appropriate type for AccessRequests
I've got a Kendo Grid like this:
<%: Html.Kendo()
...
.Pageable()
.Columns(c => {
c.Bound(x => x.ProductId).Width(80);
c.Bound(x => x.ProductCode).Width(40);
c.Bound(x => x.ProductName).Width(80);
c.Bound(x => x.Created).Format("{0:yyyy-MM-dd}").Width(70);
c.Bound(x => x.CreatedBy).Width(80);
})
.Sortable()
.Selectable()
...
When you click on a column header an up or down arrow appears to indicate sorting. So far so well, but the sort arrow makes the column expand its width which is very annoying. I want to avoid the columns changing their width, how do you do that?
Adding css rule to the grid's table: table-layout:fixed should resolve your problem.
What is the way to sort Telerik's RadGrid ? I don't want to add a form server tag, and I don't want to use a user control with code behind like an example I've seen (since I think these are not true MVC solutions, am I right ?).
Please point me to an example or post example code...
Thanks in advance.
For your telerik questions you should go to http://www.telerik.com/community/forums.aspx
Their support is great and if the forums don't cut it just send a formal request, you will need to create a demo project with your problem. I have used telerik products for years and they never fail to answer your question within a few days.
The demo site is also a great source of knowledge (linked above by robert)
Guido
I am using the ASP.NET MVC open source Telerik controls. Here is an example of how I'm using the sort. It works for server control or Ajax but I've found that the Ajax grid is more touchy as far as it creating circular reference errors.
This Ajax example sorts by two columns. The logic is the same for server binding.
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.category_id ))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("AjaxGridSelect", "CategoryTree")
.Insert("GridInsert", "CategoryTree", new { GridEditMode.PopUp, GridButtonType.ImageAndText })
.Update("GridUpdate", "CategoryTree", new { GridEditMode.InLine, GridButtonType.ImageAndText })
.Delete("GridDelete", "CategoryTree", new { GridEditMode.InLine, GridButtonType.ImageAndText }))
.Columns(columns =>
{
columns.Bound(p => p.category_name).Width(150);
columns.Bound(p => p.status_cd).Width(100);
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
}).Width(180).Title("Commands");
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Pageable(paging => paging.PageSize(50)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Bottom))
.Sortable(o => o.OrderBy(sortcol =>
{
sortcol.Add(a => a.category_name);
sortcol.Add(a => a.add_date);
})
.Filterable()
.Groupable()
.Selectable())