I should have asked this question on the Telerik forum but having browsed through many answers there, with due respect to Telerik, I feel it will be futile and I can expect better and quicker answers here. So here I go:
I am using Kendo UI Grid control and displaying the values in an editable dropdownlist cell.But that has taken away the in built filtering capability as it is not provided out of the box. Now I am stuck on the only way to achieve this which is using foreign keys; http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
There are some bits missing in the example like the PopulateCategories() function and what code to put in the MVC EditorTemplate.
Has anyone tried and successfully able to display the filters? I can provide my code but I think thats not part of the question as there is nothing wrong in the code. What I am asking is how I can achieve filtering with dropdownlist templates using the solution provided by Telerik.
Hope it may help someone.The following bits are missing from the example as provided in the link above (I have used my code to convey the missing bits):
First
Instead of:
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").Width(150)
Use EditorTemplateName property too:
columns.ForeignKey(p => p.Region.RegionId, (System.Collections.IEnumerable)ViewData["Regions"], "RegionId", "RegionName").Title("Region").EditorTemplateName("RegionsTemplate");
Second
Keep using the complex model otherwise the Add New Record functionality would not work:
So instead of
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
Use both the Foreign key model and the complex model:
.Model(model => {
model.Id(p => p.FunctionLevelRegionMappingId);
model.Field(p => p.FunctionLevelRegionMappingId).Editable(false);
model.Field(p => p.Region.RegionId).DefaultValue(1);
model.Field(p => p.Region).DefaultValue(
ViewData["DefaultRegion"] as GlobalLossAnalysisTool.Web.Areas.Administration.Models.RegionDto);
})
Third
In the example ProductViewModel is missing. This can be referred from http://demos.telerik.com/aspnet-mvc/grid/editing-custom. There is no change to this model.
Fourth
Changes to template:
The templates are missing in the example but can in inferred from the link http://demos.telerik.com/aspnet-mvc/grid/editing-custom. Change the template from :
#model Kendo.Mvc.Examples.Models.CategoryViewModel
#(Html.Kendo().DropDownListFor(m => m)
.DataValueField("CategoryID")
.DataTextField("CategoryName")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
)
To:
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]))
Related
I have a MVC3 Razor View for a simple Contact entity - first and last name, job title etc - including a grid being used to save one or more phone numbers.
The grid appears setup in inline edit mode after the user clicks save to create a new item, and there is a new Id to save phone numbers against. This works okay but the client would prefer that the whole form is saved on that first click, including any edits to the phone number grid. The tricky bit is they want to keep the existing inline UX, which is where my question lies:
How can you keep all the UI/UX associated with the kendo grid inline editing mode, but save as a batch, as you would if it were set to in-cell editing?
I have read various articles and tutorials to do with saving grid changes on click, but most are specific to in-cell editing and are not specific to Razor.
Here is the code for the grid as it stands (no editor template or js functions), please let me know if I can provide any further detail and I will update my question.
#(Html.Kendo().Grid<ContactNumberListItem>()
.Name("PhoneNumbersGrid")
.Columns(columns =>
{
columns.Bound(model => model.Number).Title("Number").Format("{0:#,#}");
columns.Bound(model => model.Type).EditorTemplateName("_tmpl_contactPhoneNumberType_dd").Title("Type").ClientTemplate("#:Type.Name#");
columns.Command(commands =>
{
commands.Edit().Text(" ")
.UpdateText(" ")
.CancelText(" "); // The "edit" command will edit and update data items
commands.Custom("Delete").Text(" ").Click("DeleteContactPhoneNumber"); // The "destroy" command removes data items
}).Width(98);
})
.ToolBar(toolBar => toolBar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
.Selectable()
.Events(events => events
.DataBound("OnGridDataBound")
.Cancel("OnGridCancel")
.Edit("OnGridEdit")
.Save("OnGridSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(5)
.ServerOperation(false)
.Model(model =>
{
model.Id(x => x.Id);
model.Field(t => t.Type).DefaultValue(((List<PhoneNumberTypeListItem>)ViewBag.ContactPhoneNumberTypes).FirstOrDefault());
})
.Create(update => update.Action("CreateContactPhoneNumber", "ContactPhoneNumber").Data("GetContactId"))
.Update(update => update.Action("UpdateContactPhoneNumber", "ContactPhoneNumber"))
.Read(read => read.Action("SelectContactPhoneNumbers", "ContactPhoneNumber").Data("GetContactId"))
.Events(e => e.Error("error_handler"))))
The answer seems to be to use placeholder controller methods for create/update/delete - that is, methods that do not do anything - then follow use the code below to submit to the controller on whatever click or action:
http://www.telerik.com/support/code-library/save-all-changes-with-one-request
I have the next
#(Html.Kendo().Grid<Corporativo.Model.SolicitudProductoVM>()
.Name("SolicitudesProducto")
.Columns(columns =>
{
columns.Bound(e => e.Consecutivo).Width(20).Title("CÓDIGO");
columns.Bound(e => e.Desc_Cliente).Width(80).Groupable(false).Title("CLIENTE");
columns.Bound(e => e.Fecha).Width(40).Groupable(false).Title("FECHA");
columns.Bound(e => e.Imp_Total).Width(40).Groupable(false).Title("IMP. TOTAL");
})
.Filterable()
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAllSolicitudesJSON", "CrmProductRequest", null))
)
)
with the next error...
Cannot find a public property of primitive type to sort by.
Ideas???
I have this error with Kendo UI and I did not have sorting used in my view. For me it I found an issue with the view model, I had used a view model to stop an different issue with EF objects causing circular errors. If this is still an issue and you use view models try setting the attributes with full getter and setters.
I had my view model properties declared like this: *
public int OrderID;
I and I changed them to this to get Kendo .ToDataSource() to work:
public int OrderID
{
get;
set;
}
*Other syntax issues with these properties could also cause this error.
This is the article that explains how to get rid of circular references that indirectly helped me come to this conclusion. I hope that this may still be helpful to someone who stumbled onto this question like I did.
I am trying to dynamically add grid filters in my view using the html helper via datasource configuration, like this example from the kendo documentation:
#(Html.Kendo().Grid<Product>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
.Filter(filters =>
{
if (someCondition){
// Show products whose ProductName property contains "C"
filters.Add(product => product.ProductName).Contains("C");
// and UnitsInStock is greater than 10
filters.Add(product => product.UnitsInStock).IsGreaterThan(10);
}
})
)
)
The filters are added, but the filterdescriptor.Value in each case is always null (the Member and Operator are fine).
Any help much appreciated.
Thanks!
--Berry
Make sure you have included kendo.aspnetmvc.min.js. Missing it would lead to similar symptoms.
My model contains an enumeration that I'd like to filter the grid on when it's loaded via AJAX.
.cshtml Code:
#(Html.Kendo().Grid()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(x => x.Type);
columns.Bound(x => x.Status); #*This is my enum*#
})
.Filterable()
.DataSource(ds => ds
.Ajax()
.ServerOperation(true)
.Filter(filter => filter.Add(x => x.Status).IsEqualTo(MyEnum.Updated))
.Read(read => read.Action("QueryAlerts", "Alert"))))
The filter request on the AJAX POST is going across as Status~eq~'updated' and returns an Input string was not in a correct format error.
I removed the filtering on the data source and used the filtering controls to see how that request is normally passed which looks like this: Status~eq~2.
I've tried casting the filter values to integers (e.g. filter.Add(x => (int)x.Status).IsEqualTo((int)MyEnum.Updated)) and that results in an invalid cast error to Int32 from the model which is expected by the Add method.
Can this problem be solved using Razor or is this a JavaScript fix?
What data type is your x.Status? If it's an int then you don't need to cast it, only the enumeration:
filter.Add(x => x.Status).IsEqualTo((int)MyEnum.Updated)
I have a grid which contains an id,which is a hyperlink and takes me to a different page.Can anyone help me to achieve this.
Thanks
Assuming that the user is working on Telerik-MVC. Here's a sample code.
Html.Telerik().Grid(Model)
.Name("GridName")
.DataKeys(keys => keys.Add(k => k.Id))
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("ID")
.Template(#<text>#item.RpoId </text>);
columns.Bound(c => c.PropertyA);
columns.Bound(c => c.PropertyB); //And so on...
}
)
.Render();
Have a closer look at how the column is Templated.
If you're willing to use the RadGrid, then there is a type of column called the GridHyperLinkColumn described here: http://www.telerik.com/help/aspnet-ajax/grid-column-types.html
Using RadGrid with MVC: http://www.telerik.com/help/aspnet-ajax/mvc-radgrid-databinding.html
This example shows what it can look like http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx.
If not, you'll need to use a GridColumnTemplate with a link in it.