I have an asp.net MVC application where I am using telerik grid to show the data/records.I am using the Entity Model.
My requirement is that sometime I want to show only some of the columns specified at the runtime/may the user select. How do I bind View with only those columns as selected by the user . Initially view is binded with Model class with all columns .
Is there any other way other than telerik to show the customized columns as selected by the user
then it will be also OK .
You could customize the columns that are shown using the Columns method. You need to have the information about which columns need to be shown in the view model so that you can at runtime select the columns to show:
<%= Html.Telerik()
.Grid(Model.Customers)
.Name("Grid")
.Columns(columns =>
{
if (Model.IsShowFirstName)
{
columns.Bound(customer => customer.FirstName);
}
if (Model.IsShowLastName)
{
columns.Bound(customer => customer.LastName);
}
})
%>
<%= Html.Telerik()
.Grid(Model.Customers)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(customer => customer.FirstName).Visible(Model.IsShowFirstName);
columns.Bound(customer => customer.LastName).Visible(Model.IsShowLastName);
})
%>
Related
im trying to populate a grid in an asp.net mvc app.
i have an issue with one specific column in the grid which needs to render as dropdown list.
#(Html.Kendo().Grid(Model)
.Name("gridExclusions")
.AutoBind(false)
.Columns(columns =>
{
columns.ForeignKey(c => c.SubTaskId, GetSubTasks(item.Id), "Value", "Text").Width(100).Title("Sub Task").Filterable( ftb => ftb.Multi(true) .Search(true));
columns.Command(command => { command.Edit(); }).Width(100);
})
....
Because every item in the grid can have different list of sub task, my question is how to pass the current item id "item.Id" to the function GetSubTasks(int id)
try using the kendo escape characters - # in a string like => "#{parameterNameInModel}"
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 need a way to set already selected values in a multi select dropdown in a edit view in a web application (ASP.NET, Mvc)
<div class="form-group">
<label>Choose Categories</label>
#Html.DropDownListFor(model => model.SelectedValues, new MultiSelectList(Models.GetCategoryList().OrderBy(c => c.Value), "Key", "Value"), "Select Category", new { #class = "chzn-select form-control", multiple = "multiple" })
</div>
this is view code, here I passed selected ids in to selected values array.(when I return values from DB , assign those in to a array then assign to here.
I need a edit view like this
please anyone suggest way to do this
Thank you.
To generate this view you can use select2 jquery plugin. Check out the following link.
https://select2.github.io/examples.html#multiple
I currently have the multiselect working the way I want it with one exception. Preloading previously selected items.
My view looks:
<div class="editor-field">
#Html.LabelFor(model => model.UntaggedPersons)
#Html.ListBoxFor(model => model.PeopleToTag,
new SelectList(Model.CommitteeMembers, "PersonId", "FullName"))
</div>
JS:
$("#PeopleToTag").kendoMultiSelect({ "dataTextField": "FullName", "dataValueField": "PersonId", "placeholder": "Tag or Untag Persons to Action Item" });
PeopleToTag is an IEnumerable<int> int that posts to the controller
CommitteeMembers consists of a persons First, Last, FullName, and PersonId
This works perfectly, I can manipulate who is tagged in the post to the controller.
Now I want to add the functionality of preselecting those that are currently tagged.
How do I add a preselected Value? I have a model with:
model.TaggedPersons consists of a persons First, Last, Fullname, PersonId.
How do I wire up the javascript to display the model.TaggedPersons as the already selected value?
I don't mind using the MVC wrapper approach if it is easier.
I've tried something like:
<div class="editor-field">
#Html.LabelFor(model => model.TaggedPersons)
#(Html.Kendo().MultiSelectFor(model => model.PeopleToTag)
.Name("PeopleToTag")
.Placeholder("These people are Tagged")
.DataTextField("FullName")
.DataValueField("PersonId")
.BindTo(Model.CommitteeMembers)
.Value(Model.TaggedPersons)
)
</div>
However this isn't even rendering a kendo multiselect for me at present. That's the general thought of how I want to approach it though.
Any help is much appreciated!
Change:
DataTextField("FullName") to DataTextField("Text")
DataValueField("PersonId") to DataValueField("Value")
SelectList uses "Text" and "Value", respectively. You already filled the fields of the select list with FullName and PersonId when the selectlist was created.
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