This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
MVC 3 Webgrid - how do you hide columns you do not want to be visible?
I am using a WebGrid in my MVC application. What I want to do is put an if statement inside my form to hide a column depending on the condition. The code below shows what I mean with the if statement, but this is not allowed;
#grid.GetHtml(columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Select", "Details", new { contractId = item.ContractId })),
if(Context.User.IsInRole(ITOF.Web.Models.Role.Inputter)
{
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { contractId = item.ContractId })),
}
grid.Column("SignOffDate", "Sign Off Date",
format:#<text> <span>#item.SignOffDate.ToString("d/M/yyyy")</span></text>),
grid.Column("FullContractNumber", "Contract Number"),
grid.Column("ContractTitle", "Title")
));
I don't know if this works, because I don't know the inner workings of the helper. You probably could do something like this:
#{
var temp = grid.GetHtml(....);
if(Context.User.IsInRole(ITOF.Web.Models.Role.Inputter)
{
temp.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { contractId = item.ContractId })),
}
}
#Html.Raw(temp);
The helper should return an grid object not a string, otherwise you can't add the columns anymore.
Related
I am using Kendo() grid in my application which has binding with an model.
I want to provide Upload control in Grid against each row. Please see razor view design as follows
#(Html.Kendo().Grid<Model>()
.Name("Grid")
.Columns(col =>
{
col.Template(#<text></text>).ClientTemplate("<a Title='Export' href='" + Url.Action("Export", "RouteFileExport", new { Id = "#= RouteScheduleID #", routeID = "#= RouteID #" }) + "'><img src=" + #Url.Content("~/Content/images/download.png") + "></a>").Title("Export");
col.Template(#<text>#(Html.Kendo().Upload()
.Name("attachments<#= ID #>")
.HtmlAttributes(new { id = "attachments<#= ID #>" })
.Multiple(false)
.Async(async => async
.Save("Save", "Controller", new { folder = "<#= ID #>" })
.AutoUpload(true)
)
)</text>).Title("Import");
col.Command(command =>
{
command.Destroy();
command.Custom("Unlock");
command.Custom("Notification");
}
);
})
With above design i am not able to get the upload control displayed inside grid. Its displaying BLANK column.
Please let me know how can i achieve upload against each kendo grid row.
Thanks
Are you looking for a custom button in the last column? If you use the custom command buttons it can be linked to JQuery or a controller action like below:
columns.Command(cmd => cmd.Custom("Upload").Text("Upload").Click("UploadJqueryScript")).Width(75);
columns.Command(cmd => cmd.Custom("Upload").Action("UploadMethod", "Controller")).Width(75);
Have you tried these options?
I have a custom editor template for a vehicle part that is used in a telerik grid for insertion in mvc3 razor. The editor template includes a datetime field. On insertion of a new vehicle part the datetime field is incorrect and the format is changed.
For example, if I insert "06/10/2011" which is day 6 , month 10 and year 2011 , in the controller, the dateTime field in the model is "10/06/2011" which is day 10 month 6 and year 211. I am using telerik's date picker
Basically the day and month are becoming switched after submitting to the controller
I have other instances in my code where I am passing a datetime field without an issue, so I believe the problem is the fact that I'm using a custom editor template ...
Here is the code for the grid:
#(Html.Telerik().Grid<VehiclePartsViewModel>()
.Name("VehiclePartsViewModel")
.ToolBar(commands =>
{ commands.Insert();
})
.DataKeys(keys => keys.Add(c => c.Id))
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.DataBinding(dataBinding => dataBinding
.Ajax()
.Insert(MVC.Vehicles.CustomCoverage._InsertPart().GetRouteValueDictionary())
.Select(MVC.Vehicles.CustomCoverage._SelectPart().GetRouteValueDictionary())
.Update(MVC.Vehicles.CustomCoverage._SavePart().GetRouteValueDictionary())
.Delete(MVC.Vehicles.CustomCoverage._DeletePart().GetRouteValueDictionary())
)
.Columns(columns =>
{
omitted..
})
.Footer(false)
.Editable(editing => editing.Mode(GridEditMode.PopUp))
The simplified editor template is :
<div>
#Html.LabelFor(v => v.ItemId, new { #class = "uc-caption"})
#Html.EditorFor(v => v.ItemId)
</div><br />
<div>
#Html.LabelFor(v => v.InstallDate, new { #class = "uc-caption"})
#Html.EditorFor(v => v.InstallDate, new { Modifiable = true })
</div>
I am also using an editor template for dateTime, but I do not believe the issue is here:
#(
Html.Telerik().DatePicker()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })
.ShowButton(true)
.Value(Model.HasValue ? Model.Value : new DateTime())
.ClientEvents(events => events.OnChange("onChangeDatePicker"))
.InputHtmlAttributes(new { style = "width:100%"})
.Enable(ViewData["Modifiable"] != null ? (bool)ViewData["Modifiable"] : true)
)
Thanks
Ok so I was finally able to resolve this with telerik .. there seems to be a problem with setting globalization to true .. You have to add a line before it .. This is what my _layout.cshtml looks like now ..
#(Html.Telerik().ScriptRegistrar()
.OnDocumentReady(#<text></text>) //Telerik: This is required because there is still no Telerik components on the page and jQuery(document).ready will not be rendered and the globalization will not work
.Globalization(true)
You probably have problems with globalization/localization of your app.
Different cultures are mixed up.
I had the same problem when posting float values, and solved it by adding this method to Global.asax.cs:
protected void Application_AcquireRequestState(object sender, EventArgs e)
{
System.Threading.Thread.CurrentThread.CurrentUICulture = new CultureInfo("en");
System.Threading.Thread.CurrentThread.CurrentCulture = new CultureInfo("en");
}
This question already has answers here:
How do I add a class to an #Html.ActionLink?
(5 answers)
Closed 7 years ago.
How do I add a css class to this actionlink? I have read you do it something like new { class = button } but I'm not sure where to put it within my actionlink:
<%= Html.ActionLink("View Performances", "Details", "Productions",
new { name = item.show , year = item.year }, null) %>
you can try
<%= Html.ActionLink("View Performances", "Details", "Productions",
new { name = item.show , year = item.year },
new {#class = "button"}) %>
I have the following legacy code that I would like to mimic, with all action links inside one column. However, I can't seem to get the Razor syntax right. How should I express this in Razor?
The ASPX column template is like this:
.Columns(column =>
{
column.Template(o =>
{%>
<%= Html.ActionLink("Edit", "Edit", new{ id = o.DeviceID}) %> |
<%= Html.ActionLink("Delete", "Delete", new { id = o.DeviceID })%>
<%});
I have only been able to get three separate columns using Razor without complaints about syntax etc. as below:
.Columns(columns =>
{
columns.Template(o => #Html.ActionLink("Edit", "Edit", new { id = o.ProductId })).Width(50);
columns.Template(o => #Html.ActionLink("Details", "Details", new { id = o.ProductId })).Width(50);
columns.Template(o => #Html.ActionLink("Delete", "Delete", new { id = o.ProductId })).Width(50);
How can I define one template column that contains all three action links using Razor syntax?
EDIT: In trying the following small adaptation of Mike's answer below, I get the error "Only assignment, call, increment, decrement, and new object expressions can be used as a statement":
columns.Template(o => #<text>#Html.ActionLink("Edit", "Edit", new { id = o.CampaignId }) |
#Html.ActionLink("Delete", "Delete", new { id = o.CampaignId })
</text>).Width(100);
Here is a quick sample showing both bound columns and a template column:
Sample #1 using #<text></text> syntax
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(m => m.UserName);
columns.Bound(m => m.Email);
columns.Template(#<text> #Html.ActionLink("Edit", "Edit", new { id = item.UserId} ) |
#Html.ActionLink("Delete", "Delete", new { id = item.UserId)
</text>).Width(100);
})
)
Sample #2 using an Action delegate
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(m => m.UserName);
columns.Bound(m => m.Email);
columns.Template(m => #Html.ActionLink("Edit", "Edit", new { id = m.UserId} ) + " | " +
#Html.ActionLink("Delete", "Delete", new { id = m.UserId)
).Width(100);
})
)
Hope that helps, if didn't already figure it out. :)
UPDATE - added the implicitly defined "item" parameter in code sample above. It shows how to get the Model properties within the Telerik control template.
UPDATE#2 - korchev showed the "#item.someProperty" syntax within his code sample. The # symbol is not needed in our case since we are within an extension method, but doesn't hurt to leave it for clarity.
UPDATE#3 - added Sample #2 code sample
If you are binding with ajax, the format has to look something more like this:
c.Bound(i => i.Name).ClientTemplate(#Html.ActionLink("<#= Name #>", "[Action]", "[Controller]", new { Id = "<#= Id #>" }, new { Area = "[Area]" }).ToHtmlString())
See here for more info: http://www.telerik.com/forums/kendo-mvc-grid-actionlink-column
columns.Template(#Html.ActionLink("Edit", "Edit", new {id = #item.id }));
Check ScottGu's blog posts with regard to Razor for what #item is.
columns.Command(commands => {
commands.Custom("Update").Text(Resource.Edit)
.ButtonType(GridButtonType.BareImage) .SendState(true).SendDataKeys(true).HtmlAttributes(new { id = "popUp"})
Action("Gallery_Bar_EditOrAddTranslate", "Administration").Ajax(false);
commands.Custom("Update").Text(Resource.Edit)
.ButtonType(GridButtonType.BareImage) .SendState(true).SendDataKeys(true).HtmlAttributes(new { id = "popUp"}) Action("Gallery_Bar_EditOrAddTranslate", "Administration").Ajax(false); }).Width("5%").Title(Resource.Coomand);
This will generate something like action Link
the id id = m.UserId you can show like DataKeys:
.Name("GridName") .DataKeys(key =>
{
key.Add(c => c.UserId).RouteKey("userId");
})
at the post method you will have :
public ActionResult xxx(int userId)
{
}
I had a print button I needed to put in the Header row, that I chose to put in the same column as, but above where the Update button goes. I was able to do it just fine in Razor like this:
columns.Command(command => {command.Edit(); }).Width(100).HeaderTemplate(i => #Html.ActionLink("Print Grid", "OutputAgencies", "Admin", new { #class = "k-button" }) );
This is where "Print Grid" was for display on my linkbutton, "OutputAgencies" was a method in my controller, and "AdminController" was the name of my controller.
I could create a grid with telerik mvc
<% Html.Telerik().Grid(Model)
.Name("ProductGrid")
.Columns(columns => {
columns.Bound(h => h.ProductName).Width("34%");
columns.Bound(h => h.Description).Width("60%");
columns.Bound(h => h.ProductID).Format(Html.ImageLink("Edit", "Products", new { Id = "{0}" }, "/Content/images/icon_edit.gif", "", new { Id = "edit{0}" }, null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
columns.Bound(h => h.ProductID).Format(Html.ImageLink("Delete", "Products", new { Id = "{0}" }, "/Content/images/icon_delete.gif", "", new { onclick = string.Format("return confirm('Are you sure to delete this add on?');") },null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
})
.EnableCustomBinding(true)
.DataBinding(databinding => databinding.Ajax().Select("_Index", "ProductGrid"))
.Pageable(settings => settings.Total((int)ViewData["TotalPages"])
.PageSize(10))
.Sortable()
.Render(); %>
but I need to add a serial number column in telerik grid.How can i do this?
I think the best way is to use template column like this.
<%
var sn = 0;
Html.Telerik().Grid(Model).Name("Grid").HtmlAttributes(new { style = "width:auto" })
.EnableCustomBinding(true)
.Columns(columns =>
{
columns.Template(c=> {%> <%: ++sn %> <% }).Title("S/N");
columns.Bound(c => c.CustomerNumber);
columns.Bound(c => c.Narration);
})
.Render(); %>
This way you don't have to be adding serial number property to your view models.
Hope this help?
I think the best way to do this is to add a SerialNumber column to your Product class which is your model and than just add another bound column to the grid like this:
columns.Bound(h => h.SerialNumber)
If you pass a List of Products you can populate the SerialNumber column like this:
List<Product> products = GetList(); // Your method to get data here
int counter = 1;
products.ForEach(x => x.SerialNumber = counter++);
If you want to support consistent numbers with paging you have to calculate yourself the initial value of the counter valuable. For this purpose you must have the current page and page size.
In MVC Web Grid
use this calculation
grid.Column(header: "#",
format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) * grid.RowsPerPage * grid.PageIndex),