Is there any way to display and hide coloumn onEdit and Add mode. As display in the sample code. I want to display Unit Price on add and edit mode and hide in view mode. Please advise. But the following will shrink the grid. i want to make it still 100%. What event should i use if the user click cancel.
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
.Events(ev => ev.DataBound("onDataBound").Edit("onEdit"))
)
<script type="text/javascript">
function onEdit(e) {
var grid = $('#Product').data('kendoGrid');
if (!e.model.isNew()) {
grid.showColumn(2);
}
else
{
grid.showColumn(2);
}
function onDataBound(e) {
var grid = $('#Product').data('kendoGrid');
grid.hideColumn(2);
</script>
Actually in popup mode hidden columns of the original grid are not hidden. If you remove your onEdit function it should be enough. You might even remove the dataBound and set it to hidden in the column initialization:
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Hidden( true );
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
)
Check in http://jsfiddle.net/OnaBai/B2Ses/ how the column Freight is hidden in column mode but visible on popup (both for editing and creation).
For other grid properties (toolbar etc.) with .HtmlAttributes function you can use:
.ToolBar(toolbar => toolbar.Custom().Name("New item").HtmlAttributes(style = ViewData["isThisPropertyAllowed"] }))
And in Controller use for example:
ViewData["isThisPropertyAllowed"] = (User.IsInRole("ADMIN")?"":"display:none");
Related
I am using Kendo UI for ASP.NET MVC. I have grid with edit command. The default look of the edit command is "button" and i wanted to change it to link. But there is no Template() method for command. So how do i change the edit command button to link?
Telerik has option to create own custom command as defined here. but my grid is configured to use GridEditMode.Popup which works great with inbuilt edit command. If i create custom command then i guess i have to wireup popup window & everything else.
I just wanted to change "button" to link?
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Command(command => command.Edit().Text("Edit Me")); // How do i change this to link??
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
)
UPDATE1
#Steve Greene Thanks. Your approach did work on master grid. But i also have child detail grid which has edit link. The approach didnt work for detail grid. Kendo throws error.
I think we have to escaped template expression, to be evaluated in the child/detail context. But i am not sure the whats the syntax
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Master</a>");
//Worked in master grid
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
.ClientDetailTemplateId("detailtemplate")
)
<script id="detailtemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<UI.Models.DetailGridVM>()
.Name("detailgrid_#=CampaignID#")
.Columns(columns =>
{
columns.Bound(o => o.CampaignDetailID);
columns.Bound(o => o.Notes);
columns.Bound(o => o.CreatedBy);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Detail</a>");
// Does not work in detail grid
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetCampaignDetails", "Home", new { campaignID = "#=CampaignID#" }))
.Update(update => update.Action("UpdateCampaignDetails", "Home"))
.Model(model => model.Id(m => m.CampaignDetailID))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</script>
Use a column template that has the k-grid-edit class on it (use k-grid-delete for destroy):
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit</a>").Width(30);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-delete"" href=""\#"">Delete</a>").Width(30);
})
or for smaller buttons and bootstrap:
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-info btn-xs k-grid-edit"" href=""\#"">Edit</a>").Width(30);
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-danger btn-xs k-grid-delete"" href=""\#"">Delete</a>").Width(30);
For example you can do that with css only:
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit :hover {
cursor: pointer;
}
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit {
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: transparent;
border: none;
}
I'm trying to add a dropdownlist in a telerik mvc grid using column.Bound I can get the dropdownlist to display but initially it displays as a textbox. Apparently if I use an editor template it should work but I get the error value cannot be null?
The aim is to display a dropdownlist in a grid, each item will have a different text color and background. This needs to be populated via model properties.
At the moment I'm using ViewData just to get things working but no joy. Was advised this can be done by Templates.
Any ideas why this isn't working?
#using System.Collections.Generic;
#model IEnumerable<TelerikChecklist.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("gridDropDown")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
//columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
// .Title("Category")
// .Width(150);
columns.Bound(p => p.CategoryID).Title("Category Name").ClientTemplate((#Html.Kendo().DropDownList()
.Name("dropdown_#=CategoryID#")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.ValueTemplate("")
.ToClientTemplate().ToString()
)).EditorTemplateName("GridForeignKey");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home")).Events(e => e.Change("Category"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)
The GridForeignKey.cshtml
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
resolved by creating another template:
columns.Bound(p => p.Category.CategoryName).Title("CategoryName").EditorTemplateName("GridForeignKey2");
#using System.Collections;
#(Html.Kendo().DropDownList()
.Name("NeatProperty")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
.Template("<div style='background-color:#: data.CategoryColor #'><span class=\"k-state-default\"></span>" + "<span class=\"k-state-default\"><p style='color:#: data.CategoryTextColor #;'>#: data.CategoryName #</p></span></div>")
.ValueTemplate("<div style='background-color:#: data.CategoryColor #;'><span>#:data.CategoryName#</span></div>")
)
Seen this in another post on stackoverflow but lost the link so couldn't post.
I want to get the edit row ID on Edit button click on kendo grid.
When i click on the edit button i want to get "Document Type ID" which is shown in the grid and it has to be hidden in the original grid(primary key of datasource). I have shown it to clarify my issue.
below event fires on edit click but I have not been able to get the ID of that particular row.
$("#grid").data("kendoGrid").bind("edit", function (e) {
var grid = $("#grid").data("kendoGrid");
});
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.DocumentTypeModel>)Model.lst_DocumentType)
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.DocumentTypeID).Visible(false);
columns.Bound(o => o.DocumentType).Title("Document Type");
columns.Bound(o => o.DocumentTypeDescription).Title("Description");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))//.TemplateName("DocumentType_template"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentTypeID))
.Create(update => update.Action("EditingInline_Create", "DocumentType").Data("additionalInfo"))
.Read(read => read.Action("EditingInline_Read", "DocumentType").Data("additionalInfo"))
.Update(update => update.Action("EditingInline_Update", "DocumentType").Data("additionalInfo"))
.Destroy(update => update.Action("EditingInline_Destroy", "DocumentType").Data("additionalInfo"))
)
)
Inside the edit event of the Grid you can get reference to the row model via the arguments object.
function onEdit(e){
alert(e.model.DocumentTypeID);
}
I am using a KENDO UI grid in MVC.NET.
The grid is configured to show a column filter for each column.
Some of my columns are not filterable, though, so I want to hide the filter.
Is there a way to configure this from the C# side? (Not using CSS or JS).
In your code, you probably have something like:
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<%: Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
%>
</asp:Content>
If you want ProductID column not being filterable, you should say:
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<%: Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID).Groupable(false).Filterable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
%>
</asp:Content>
If you are not setting up the columns, you could hide the filter buttons after the grid is initialized, such as in the databound event. Here's one way, hiding the filter button on a specific field:
$("#MyGrid").find(".k-header[data-field='Pct_positive']").find(".k-grid-filter").css("visibility","hidden");
To hide them all...
$("#MyGrid").find(".k-header").find(".k-grid-filter").css("visibility","hidden");
As far as I can tell, you would have to be able to set the columns.filterable configuration property to 'false' for those columns that you don't want filtered, as it defaults to 'true' (see Docs: columns.filterable)
Whether you can do this from the C# side will depend on how the Kendo Grid is being initialised in your code.
I didn't mention it in the question, but I was using the AutoGenerate() feature of the grid, so then there is no easy access to the Filterable setting.
One workaround for that case is:
var gb = Html.Kendo().Grid(data).Name("test");
gb.Columns(columns => { columns.AutoGenerate(true); });
// !!! Hide filter for first column in grid.
gb.Columns( (columns) => { (columns.Container.Columns[0] as IGridBoundColumn).Filterable=false; });
gb.Filterable(filtering => filtering.Enabled(true));
gb.DataSource(ds => ds
.Ajax()
.ServerOperation(true)
.Model(model => model.Id("A"))
);
gb.Render();
for the client side (jquery) kendo grid you can put filterable: false, for the individual column after putting filterable: true, for the whole grid.
eg.
field: "Margin01",
width: 40,
filterable: false,
title: "0-"
I am working on Kendo UI with asp.net mvc razor. I am trying to bind database table data with kendo grid that supports CRUD operations. Here i need to populate a dropdownlist for one of my table field. I have used the following code
View:
#model IEnumerable<MvcApplication1.PriceOption>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(p => p.ProductTitle).ClientTemplate("<input type='checkbox' disabled='disabled'name='Discontinued' <#= Discontinued? checked='checked' : '' #> />");
columns.Bound(p => p.ProductTitle).EditorTemplateName("OptionalEmail");
columns.Bound(p => p.OptionTitle);
columns.Bound(p => p.Price);
columns.Bound(p => p.Frequency);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ProductID))
.Create(create => create.Action("CreateOption", "ZiceAdmin"))
.Read(read => read.Action("Read", "ZiceAdmin"))
.Update(update => update.Action("UpdateOption", "ZiceAdmin"))
.Destroy(update => update.Action("DeleteOption", "ZiceAdmin"))
)
)
OptionalEmail.cshtml
#model string
#(Html.Kendo().DropDownList()
.Name("ProductTitle")
.Value(Model)
.SelectedIndex(0)
.BindTo(new SelectList(ViewBag.ProductTitle))
)
Here i need to store the selected item from the dropdownlist. But it always shows null. How could i get the selected value from dropdownlist.
It's a bug. Remove the name, and it will submit back to the server as part of the ViewModel:
#model string
#(Html.Kendo().DropDownList()
.Value(Model)
.SelectedIndex(0)
.BindTo(new SelectList(ViewBag.ProductTitle))
)