In an Html.Grid, how can we ensure that data in the column (e.g. currency amounts) gets right aligned?
Thanks.
You mean in the MvcContrib Grid?
You could use something like:
column.For(x => x.Amount).Attributes(style => "text-align:right");
or more tidily you could set a class:
column.For(x => x.Amount).Attributes(#class => "right-align");
and set an appropriate style rule on that class.
Here's what worked for me. Within the grids htmlAttributes assign the resulting table an id. In this example "gridT". In the CSS create a style for "#gridT", for the second column to align the text left.
#grid.GetHtml(
.
.
htmlAttributes: new { id = "gridT" },
columns: grid.Columns(
grid.Column(columnName: "ID", header: "ID"),
grid.Column(columnName: "Name", header: "Name")
<style>
#gridT th:nth-child(2) {
text-align: left;
}
</style>
The second column "Name" will be left aligned.
Related
I need to pass parameter with spaces in a detail view in Kendo Grid. This is the inner grid that reads parameter from "parent grid" as a row is selected.
How can I pass the "paramWithSpaces" as encoded string with spaces? For instance, something like "department name".
#(Html.Kendo().Grid<Derp>()
.Name("grid_#=paramWithSpaces#")
.Columns(c =>
{
c.Bound(e => e.Col1);
c.Bound(e => e.Col2);
c.Bound(e => e.Col3);
c.Bound(e => e.Col4);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Action", "Controller", new { param = "#=paramWithSpaces#" }))
)
.ToClientTemplate()
)
You can replace space with any unique character like _ (underscore) or any number like 0.
Because in name attribute it wont allow space. For binding purpose you can replace that character with a space again on server side.
Hope it helps.
Hi I need to do the following:
#Html.TextBoxFor(m => m.Login,
new {
#class = "form-control",
#placeholder = "Username",
required="true" data-required-message="Please insert your name"
})
But Im getting error on data-required-message seems that I can't use "-".
Any clue?
You have to use it with underscore _ and razor will render it as - in html:
data_required_message="Please insert your name"
another thing to note is that you don't need to put # sign in front of every parameter of htmlAttributes , we put it for class becasue class is a reserved word in c#, so it cannot be used directly as a variable name.
your final code will be like:
#Html.TextBoxFor(m => m.Login,
htmlAttributes: new {
#class = "form-control",
placeholder = "Username",
required="true",
data_required_message="Please insert your name"
})
you are also missing a comma after placeholder attribute.
Try data_required_message instead of data-required-message
#Html.DropDownListFor(m => m.Baled, new SelectList(new [] {"Select Type","Option1", "Option2", "Option3"}))
I want to add a css class in the dropdown list.
I have tried this
#Html.DropDownListFor(m => m.Baled, new SelectList(new [] {"Select Type","Option1", "Option2", "Option3"}, new {#class="myclass"}))
But it doesn't work
If anyone can suggest me any other better way to display dropdown list will be ok too.
You have close the bracket at wrong place. you have defined attribute in second paramter of selectlist. actually it should be close first and define in the last parameter of Html.DropDownListFor
#Html.DropDownListFor(m => m.Baled, new SelectList(new[] { "Select Type", "Option1", "Option2", "Option3" }), new { #class = "myclass" })
I have a grid where first 2 columns are bound with ForeignKey (Category and Product). The value of the first dropdown dictates the value of the second. How can I reload the values of the second dropdown after the first dropdown value changes?
#(Html.Telerik().Grid<Order>().HtmlAttributes(new { style = "width: 700px" })
.Name("grdOrders")
.ToolBar(tb => tb.Insert())
.DataBinding(binding => binding.Ajax()
.Select("GetOrders", "Home")
.Update("UpdateOrder", "Home")
.Insert("InsertOrder", "Home")
.Delete("DeleteOrder", "Home"))
.DataKeys(keys => keys.Add(o => o.OrderID))
.Columns(cols =>
{
cols.Bound(c => c.OrderID).Width(100).ReadOnly();
cols.Bound(c => c.Name);
cols.ForeignKey(c => c.ItemCategoryID, (System.Collections.IEnumerable)ViewData["Categories"],
"ItemCategoryID", "CategoryName").Title("dbCategory").Width(300);
cols.ForeignKey(c => c.ItemID, (System.Collections.IEnumerable)ViewData["dbItems"],
"ItemID", "ItemName").Width(200).Title("Item");
cols.Command(cmd =>
{
cmd.Edit().ButtonType(GridButtonType.Image);
cmd.Delete().ButtonType(GridButtonType.Image);
}).Title("Commands").Width(100);
})
Having the same problem, i found this:
"Dependent Drop Down in Grid"
http://www.telerik.com/community/forums/aspnet-mvc/grid/dependent-drop-down-in-grid.aspx
There is a full explanation for PopUp mode, however only a description of the solution for Inline mode (which, unfortunately, is too difficult for me to follow).
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),