I am using the MVCContrib grid and I would like to display images depending on the values of a column, e.g.:
if the column's value is null display the image "<img src="true.gif">"
otherwise display the image "<img src="false.gif">
Furthermore I would also need (this should be the same approeach I think) to display different actions depending on the column's/rows' value ...
Thanks in advance for your answers!
Best regards
Stefan
The answer was quite simple :)
<% Html.Grid(Model.Languages).Columns(column =>
{
column.For(c => c.LanguageName).Named("Language");
column.For(c => c.LangCode).Named("Language Code");
column.For(c => c.IsDefaultLanguage ? "<img src=\"library/images/true.gif\">" : "<img src=\"library/images/false.gif\">").Named("Default Language").DoNotEncode();
}
).Empty("There is no language available")
.Render(); %>
Related
I have seen a couple of code examples of how to do this, but none in the format I'm looking for. I tried to convert them myself, but without success. What I'm trying to do is to create a custom row filter that will give you an x-amount of options that can be used on a date.
columns.Bound(cc => cc.StartDate).Width(160)
.HeaderHtmlAttributes(new { title = "startdate") })
.Title("startdate"))
.Filterable(ftb => ftb.Extra(false)
.Operators(op => op.ForDate(d => d
.IsEqualTo("At date")
.IsLessThan("Before date")
.IsGreaterThan("After date"))));
In the code above I'm trying to use filter options so a user can chose to filter events before, at and after a certain date. It would be nice if these options would actualy be shown and even better if a user could use the kendo datepicker.
So my question is: What am I doing wrong that I'm not seeing the correct options and how do i get the date-picker into the filter?
You need to have a column datatype as datetime .
If you're using MVC, in your model, you add DataType.Date above your DatePicker property in case you want only datepicker and not datetimepicker as below:
[DataType(DataType.Date)]
public DateTime StartDate{ get; set; }
Note: add reference to System.ComponentModel.DataAnnotations if its not included in your header.
Then specify in filtrable that UI will be datetime picker
filterable: {
ui: "datetimepicker"
}
OR
columns.Bound(c => c.StartDate).ClientTemplate("#= kendo.toString(kendo.parseDate(StartDate), 'MM/dd/yyyy HH:mm:ss') #")
.Filterable(ftb => ftb.Cell(cell => cell.Template("DateTimeFilter")));
here is a sample code you can refer.In this smple there is column for Birthdate that you can refer.
Demo - sample
In your case it would be like
columns.Bound(cc => cc.StartDate).Width(160)
.HeaderHtmlAttributes(new { title = "startdate") })
.Title("startdate"))
.Filterable(ftb => ftb.Extra(false)
.Cell(cell => cell.Template("DateTimeFilter"))
.Operators(op => op.ForDate(d => d
.IsEqualTo("At date")
.IsLessThan("Before date")
.IsGreaterThan("After date"))));
Hope it helps you.
I have a Razor MVC webpage that makes heavy use of Kendo charts/grids.
Some of these grids and charts are found in multiple locations and it's important that the look and feel is identical
right now I've been reusing my backend code quite well by copying the .cshtml between views
with this technique, I do get good backend code reuse, but it'd be awesome to reuse the chart, is this possible?
can I somehow put this code into it's own .cshtml file and then reference it from multiple locations? maybe a Razor version of #include? :S
#(Html.Kendo().Chart<AuthTest.Models.HardDriveUsagePieSlice>().Theme("Uniform")
.Name("chart" + s.Key.ToString()).Title(title => title.Position(ChartTitlePosition.Bottom))
.Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Pie(model => model.Percent, model => model.Title)
.Labels(labels => labels
.Template("#= category #: #= value#%")
.Background("transparent")
.Visible(true)
).StartAngle(150);
})
.DataSource(x => x.Read(r => r.Action("_Usage", "Home", new {ID=s.Value.Id, UID=Model.UID})))
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
).Transitions(false)
)
What I have done was create an html helper that returns a kendo grid. Your helper is just a regular extension that can be written like so:
public static class KendoChartHelper
{
public static Kendo.Mvc.UI.Fluent.ChartBuilder<T> RenderPieSlice<T>(this HtmlHelper helper, string chartName, int uid, int id)
where T : AuthTest.Models.HardDriveUsagePieSlice
{return helper.Kendo().Chart<T>()
.Theme("Uniform")
.Name(chartName).Title(title => title.Position(ChartTitlePosition.Bottom))
.Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Pie(model => model.Percent, model => model.Title)
.Labels(labels => labels
.Template("#= category #: #= value#%")
.Background("transparent")
.Visible(true)
).StartAngle(150);
})
.DataSource(x => x.Read(r => r.Action("_Usage", "Home", new {ID = id, UID = uid})))
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
).Transitions(false);
}
Then in your cshtml file, you can call it like so:
#(Html.RenderPieSlice<AuthTest.Models.HardDriveUsagePieSlice>("MyPieSliceName",s.Value.Id, Model.UID))
I havent tested this exact code, but it should be (somewhat) correct. I hope this helps. Good luck!
I have something along the following:
<div class="editor-field">
#Html.RadioButtonFor(m => m.TotalCol, "Yes") #Html.Label("Yes")
#Html.RadioButtonFor(m => m.TotalCol, "No") #Html.Label("No")
Note that TotalCol is a string.
public string TotalCol { get; set; }
I use the following to get the value:
var TotalCo = $('#TotalCol').val();
alert(TotalCo);
the alert show Yes.
If I do an alert on submit of the form without selecting either the Yes or No, I still
get Yes. Why is that. Why doesn't it just return blank.
Thanks in advance
From looking at you code I see that your RadioButtons are actually "grouped" together as #TotalCol and therefore the jquery can only grap the first element and display for you the val from that particular element of the group. For instance if you were to reverse this you would get the opposite result (alert would return "No" like this):
#Html.RadioButtonFor(m => m.TotalCol, "No") #Html.Label("No")
#Html.RadioButtonFor(m => m.TotalCol, "Yes") #Html.Label("Yes")
I hope this is making any sense :)
When you have two radio buttons with the same name (or ID) you need to find out which one was selected. You can do that by using the selector :checked.
Example:
$('#TotalCol:checked').val();
or
$('input[name=TotalCol]:checked').val();
I've just been looking at the source code for the Telerik MVC extensions and can't for the life of me work out how the template columns work. I can get them to work just fine, but I'm trying to understand what is happening under the hood, as I think they are really useful. I've stepped through the source code but I'm still a bit confused. Here's an example from the source code's example project.
Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Template(c => {
%><img
alt="<%= c.CustomerID %>"
src="<%= Url.Content("~/Content/Grid/Customers/" + c.CustomerID + ".jpg") %>"
/><%
}).Title("Picture");
columns.Bound(c => c.ContactName).Title("Name");
columns.Bound(c => c.Phone);
})
.Sortable()
.Scrollable(scrolling => scrolling.Height(250))
.Pageable()
.Render();
The columns => {} delegate is of type Action<GridColumnFactory<T>>
where Model is IEnumerable<T> and the c=>{} delegate is of type Action<TModel> . That much I understand, the Template method on the GridColumnFactory is given an action as a parameter.
How is this action used to render the required HTML?
Thanks !!!
The magic here is that Telerik uses the fact that any content (HTML, JavaScript, etc) inside ASP.NET Web Pages is in fact translated into a Response.Write-like call by the page compiler.
For example;
<% Action action = () => { %><h1>Title</h1><% }; %>
Will be translated to something like this C# code:
Action action = () => { Response.Write("<h1>Title</h1>"); };
Once you understand this, it's no different than other methods: for each cell, Telerik simply call the Action you wrote without realizing it, which contains one or more Write calls generated by the compiler.
I currently have a product view page that contains an MVCContrib HTML Grid with a select link at the beginning of each row. If the select link is clicked, it takes me to a different page.
My question is whether it is possible to retrieve the productID from the row that is selected and pass that to the next page.
Maybe this is posible to do with a session variable but im not sure.
Any help would be greatly appreciated.
Thanks in advance.
Here is my view code:
<% Html.Grid((List<System2__MVC2.Controllers.ProductController.ProductsSet>)ViewData["Products"]).Columns(column =>
{
column.For(c => Html.ActionLink("Select", "Products", "Product")).DoNotEncode();
column.For(c => c.ProductID);
column.For(c => c.Name);
column.For(c => c.Description);
column.For(c => c.Price);
}).Render();
%>
Maybe I'm misunderstanding your question, but couldn't you just pass the ProductID as a route value to the ActionLink method? Something along the lines of:
Html.ActionLink("Select", "Products", "Product", new { ID = c.ProductID }, null)