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.
Related
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"]))
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'm trying to add a DropDown inside kendo grid but it displays a TextBox
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Vendor.DocumentsDetails>)Model.documents_lst)
.Name("grid").Scrollable()
.Columns(columns =>
{
columns.Bound(o => o.DocumentRevisionID).Visible(false);
columns.Bound(o => o.Documentnumber).Title("Document #").Width(150);
columns.Bound(o => o.Revision).Title("Revision").Width(80);
columns.Bound(o => o.RevisionDate).Format("{0:dd/MM/yyyy}").Title("Rev Date").Width(85);
columns.Bound(o => o.RevisionStatus).Title("Revision</br> Status").Width(100);
columns.Bound(s => s.DocNumberPurpose).ClientTemplate((#Html.Kendo().DropDownList()
.BindTo((System.Collections.IEnumerable)ViewData["Purpose"])
.Name("DocNumberPurpose")
.DataTextField("Text")
.DataValueField("Value")
.ToClientTemplate()).ToHtmlString());
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.DocumentRevisionID))
.Model(model=>model.Field(o=>o.DocNumberPurpose).Editable(false))
)
.Events(ev=>ev.DataBound("onGridDataBound"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentRevisionID))
.Read(read => read.Action("EditingInline_Read", "DesignCoverSheet").Data("additionalInfo"))
)
)
<script>
function onGridDataBound(e) {
$('#grid script').appendTo(document.body);
}
</script>
You're very close actually:
columns.Bound(property => property.neatProperty).Width(38).EditorTemplateName("neatPropertyDropDownList").Title("NeatProperty")
And then in a separate view called "neatPropertyDropDownList.cshtml"
#using System.Collections;
#(Html.Kendo().DropDownList()
.Name("NeatProperty")
.DataTextField("Value")
.DataValueField("Text")
.BindTo("don't forget to bind!")
)
Check this article for a detailed example of exactly what you are trying to do, specifically in step 3
Step 3 – Embedding the Kendo Drop-down List
Basically you can do that in the following manner:
Inside the Kendo grid the property foreign key of your model must be linked to a EditorTemplateName that accepts a template name. As an example:
columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
The template name in the above example is "CompaniesList" which will be a cshtml view file inside EditorTemplates folder.
As per the above article:
The EditorTemplateName specifies to the grid that when either in Create or Edit modes, the template should be placed in the data file named "CompaniesList" that is found in the directory by name of EditorTemplates directory. The subsequent step therefore involves the creation of a folder by name of "EditorTemplates" and place an empty view in it by name of "CompaniesList". The code bit "ClientTemplate(“#:CompanyName#”)" means that when display is in the view mode, (that is, not creating or editing) CompanyName has to be displayed (in this case, it is "Microsoft"). Once this is complete, all what remains to be done is the creation of drop-down list which will be used in the view.
After you create the "CompaniesList" editor template file, you define the Kendo drop down list inside it as follows:
#using System.Collections
#model System.Int32
#(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewBag.Companies)
.OptionLabel("- Select Company - ")
.DataValueField("Id")
.DataTextField("Name")
.Name("CompanyId")
)
Note that the drop down Name must be exactly as the column property in the grid which is "CompanyId"
You might look into Kendo Grid ForeignKey Column concept. It can be used as
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);
Detail can be found here http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html
I'm tryin to export kendo grid to excel: i tried this method:
http://jsfiddle.net/SZBrt/4/
But i have a kendo grid already that gets data on button click.
I want another button to excel the grid with datas on export button click as mentioned in jsfiddle.
#(Html.Kendo().Grid<KendoGridExportExcelMvc.Models.Sales>()
.Name("Sale")
.Columns(columns =>
{
columns.Bound(p => p.R).Width(100);
columns.Bound(p => p.Cur).Width(100);
columns.Bound(p => p.goods).Width(100);
columns.Bound(p => p.cost).Width(70);
columns.Bound(p => p.isdeleted).Width(60);
})
.Sortable()
.Scrollable()
.HtmlAttributes(new { #style = "Font:12px calibri; " })
.Filterable()
)
how to bring this inside the js file. please help,
Well, dude, you are just rendering HTML.
If you want to generate a real CSV file, just use one of the classes from the System.IO namespace, and write directly to the Response's OutputStream.
See this article for reference on how to do it:
Writing to Output Stream from Action
I am using Telerik MVC Extensions Grid control, with AJAX binding, and run a delete command. Deletion works as intended, and the grid updates so that it doesn't show the deleted row.
However, after deleting one of the grid columns (the first one) shows up empty. There is also difference in the second column - 'false' instead of the unchecked box.
Any ideas why, and how do I fix that?
I can refresh the screen, and that fixes the view. But it is a heavy page, and I'd rather not do the second refresh.
After deleting, the first column shows up empty:
My grid:
Html.Telerik()
.Grid(Model)
.Name("scenarioGrid")
.DataBinding(dataBinding => dataBinding.Ajax()
.Delete("Delete", "Scenario"))
.DataKeys(keys => keys.Add(c => c.Id))
.Columns(columns =>
{
columns.Template(o => Html.ActionLink(o.Name, "Index", new {id = o.Name})).Title("Scenario")
.FooterTemplate(#<text>Total #Model.Count() </text>);
columns.Bound(o => o.IsLocked);
columns.Bound(o => o.ContractMonth);
columns.Bound(o => o.CreateDate);
columns.Command(commands => commands.Delete().ButtonType(GridButtonType.Image)).Title("Delete");
}
)
.Sortable()
.Scrollable(scroll => scroll.Height(200))
.ClientEvents(events => events.OnDelete("onDelete").OnComplete("afterDelete"))
You shouldn't use columns.Template with Ajax binding. It's meant for server side bound grids. You should use
columns.Bound(o => 0.whatever).ClientTemplate("convert your link to a string here");
It looks like you are using server binding to load the grid, but ajax binding to update it. columns.Template is used for server binding. You should use ClientTemplate for ajax binding.