I Have a view:
<% Html.Grid(Model.InnerModel.OrderRecords)
.Empty("No data available")
.Attributes(new Hash(id => "RoadReportResultsTable"))
.Columns(column =>
{
column.For(x => x.OrderNumber);
column.For(x => x.DateReceived);
column.For(x => x.TotalCount);
column.For(x => x.DateSent);
column.For(x => x.SentCount);
column.For(x => x.Comments);
}).Render();
%>
I need to make only the Comments column editable, so the user can only enter the Comments, but can't edit any of the other columns.
I want to open a popup on Comments Click
On my project I use this code to add action link to column:
column.For(group => Html.ActionLink("Delete", "Delete", new { appId = Model.ApplicationId, id = group.Id }, null))
.Encode(false)
.Sortable(false);
Related
I want to show radio button in kendo Grid column. I have tried so many methods. Its showing only header in row not showing radio button. I am working in MVC4
My code :
#(Html.Kendo().Grid<razor.Core.BOL.TRD_OrderItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(item => item.OrderId).Hidden(true);
columns.Template(item => #Html.RadioButton("Approve", true, false, new { #id = "Approve" })).Title("Approve");
columns.Bound(m => m.MatchType).Title("Match Type");
columns.Bound(item => item.OrderDate).Format("{0:MM/dd/yyyy}").Title("Date");
columns.Bound(item => item.OrderType).Title("Sell");
columns.Bound(item => item.Description).Title("Ask");
columns.Bound(item => item.OrderAmount).Title("Total");
columns.Bound(item => item.OrderStatus).Title("Status");
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(m => m.OrderId);
})
.Read(read => read.Action("GetOrderOption", "Order", new { OrderId = ViewBag.OrderId}))
))
Thanks,
S Somu
In my case the radio button was bound to the model, so you should add a field to save the radiobutton value (Approved), so following your example I added my radio button column with:
columns.Bound(item => item.Approved).Template(#<text></text>).ClientTemplate("<input type='radio' name='ItemList[#= index(data)#].Approved' value='true' />").Title("Approve");
Where ItemList is the name of your List of TRD_OrderItem in your model.
Also you will need to add this javascript function that is used to get the index for the radiobutton name field:
function index(dataItem) {
var data = $("#Grid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
I am trying to create a master/detail Telerik MVC grid with Ajax binding. When I select a detail row to update, click "Edit", edit the value, then click "Update", the value is not updated on the client side. I see in the debugger that the model is not updated when I call TryUpdateModel. Here is the view:
#(Html.Telerik().Grid<FeeSrcMstrDteViewModel>()
.Name("FeeSourceConfirmMasterGrid")
.Columns(columns =>
{
columns.Bound(m => m.FEE_SRC_NME).Width(65).Title(#FeeBuilderResource.FeeSourceName);
columns.Bound(m => m.PUBLISHING_ENTITY_NME).Width(45).Title(#FeeBuilderResource.PublishingEntity);
columns.Bound(m => m.FEE_SRC_SRVC_CATEGORY_NME).Width(55).Title(#FeeBuilderResource.ServiceTypeCategory);
columns.Bound(m => m.FEE_SRC_PUBLISHED_DTE).Width(45).Title(#FeeBuilderResource.PublishedDate).Format("{0:d}");
columns.Bound(m => m.YEAR).Width(30).Title(#FeeBuilderResource.Year);
if (Model.FeeSourceMasterDate.GEO_LOC_ID == 1 || Model.FeeSourceMasterDate.GEO_LOC_ID == 4)
{
columns.Bound(m => m.STATE).Width(50).Title("State or carrier locality");
}
else
{
columns.Bound(m => m.CARRLOC).Width(50).Title("State or carrier locality");
}
//columns.Command(commands => commands.Custom("ExportToExcel").Text("Export to Excel")
//.DataRouteValues(route => route.Add(m => m.FeeSourceMasterDate.FEE_SRC_MSTR_ID).RouteKey("FEE_SRC_MSTR_ID"))
//.Ajax(false).Action("_ConfirmMasterExportXlsAjax", "FeeSrcFlatRate", new { feeSourceServiceMasterDateId = "<#= FEE_SRC_MSTR_ID #>" }))
//.HtmlAttributes(new { style = "text-align: center" }).Width(50).Title(#FeeBuilderResource.Actions);
})
//.ClientEvents(events => events.OnSave("FeeSourceTestGrid_OnSave"))
.DetailView(details => details.ClientTemplate(
Html.Telerik().Grid<FeeSourceFlatRateCommentsViewModel>()
.Name("FeeSourceHome_<#= FEE_SRC_MSTR_ID #>")
.DataKeys(keys => keys.Add(m => m.CommentId))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDetailDataAjax", "FeeSrcFlatRate")
.Update("_UpdateFeeSourceDetailDataAjax", "FeeSrcFlatRate")
)
.Columns(columns =>
{
columns.Bound(m => m.CommentId).Width(200).Hidden();
columns.Bound(m => m.FeeSourceDescription).Width(200).Title("Fee source description");
columns.Bound(m => m.FeeSourceComments).Width(200).Title("Fee source comments");
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
}).Width(75);
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDetailDataAjax", "FeeSrcFlatRate", new { id = "<#= FEE_SRC_DTE_ID #>" }))
.Editable(editing => editing.Mode(GridEditMode.InLine).InsertRowPosition(GridInsertRowPosition.Top))
.Footer(false)
.ToHtmlString()
))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDataAjax", "FeeSrcFlatRate"))
.Pageable(paging => paging.PageSize(20))
//.Scrollable(scrolling => scrolling.Height(580))
.Sortable()
)
The select methods work great, but not the update method. I would expect the model to be updated when i call TryUpdateModel in my controller, but I do not see that. Here is my controller code:
[HttpPost]
[GridAction]
public ActionResult _UpdateFeeSourceDetailDataAjax(int id)
{
FeeSourceFlatRateViewModel modelTest = new FeeSourceFlatRateViewModel();
List<FeeSourceFlatRateCommentsViewModel> commentsList = new
List<FeeSourceFlatRateCommentsViewModel>();
// get the model by id
IFeeSourceMstrRepository repo = new FeeSourceMstrRepository();
IList<FeeSrcMstrDteViewModel> modelTestList = repo.GetFeeSrcMstrDteViewModel((int)id);
FeeSrcMstrDteViewModel modelTestChange = modelTestList[0];
//Perform model binding (fill the product properties and validate it).
if (TryUpdateModel(modelTestChange))
{
var testy = modelTestChange;
// set the comments
FeeSourceFlatRateCommentsViewModel modelComments = new FeeSourceFlatRateCommentsViewModel
{
CommentId = id,
FeeSourceDescription = modelTestChange.FEE_SRC_DESC,
FeeSourceComments = modelTestChange.FEE_SRC_COMMENTS
};
commentsList.Add(modelTestChange);
// save the object
repo.SaveFeeSrcUOW(saveModel);
OperationStatus opStatus = repo.Save();
}
TempData["FeeSourceFlatRateModel"] = modelTestChange;
return View(new GridModel(commentsList));
}
What am I missing? Thanks for the help!
I got some help from the Telerik site. As it turns out, I was trying to update the incorrect model. My master grid is bound to FeeSrcMstrDteViewModel, but my detail grid, which I want to update, is bound to FeeSourceFlatRateCommentsViewModel.
The fix was to call TryUpdateModel on the FeeSourceFlatRateCommentsViewModel.
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),
Does anyone know how to sort the MVCContrib grid when using a complex object.
My grid is displaying a list of Person and I'm trying to sort on the Country property. The problem is that Country is a property an Address class which is a property of Person.
Person.Address.Country
<%Html.Grid(Model).Columns(column =>
{
column.For(x => x.Id);
column.For(x => x.FirstName);
column.For(x => x.LastName).Sortable(false);
column.For(x => x.Address.Country).Sortable(false);
column.For(x => x.Age).Sortable(true);
}).Render(); %>
Exception:
Property 'Country' is not defined for type '{Namespace}.Person'
var sourceProp = Expression.Property(sourceParam, this.SortBy);
\MVCContrib\UI\Grid\Sortable\ComparableSortList.cs Line: 41
Any suggestions would be helpful.
Thank you,
MG1
A workaround would be to expose Country as a property on Person and use that:
public string Country { get { return Address.Country; } }
#orip gave you an answer.
But if you want to use the sorting feature you need to use:
<%Html.Grid(Model).Columns(column =>
{
column.For(x => x.Id);
column.For(x => x.FirstName);
column.For(x => x.LastName).Sortable(false);
column.For(x => x.Address.Country).Sortable(false);
column.For(x => x.Age).Sortable(true);
}).RenderUsing(new SortableHtmlTableGridRenderer<Person>())
.Render(); %>
Source: http://www.jeremyskinner.co.uk/2009/02/23/rewriting-the-mvccontrib-grid-part-3-gridmodels-and-gridrenderers/
You need to use SortColumnName for this.
column.For(x => x.Address.Country).SortColumnName("Address.Country");
I have tested this and it works like a charm :)
If you are not able to access SortColumnName(), you can get the latest version of MVC contrib from
http://mvccontrib.codeplex.com/SourceControl/changeset/changes/7db1cecc938f