I have added new menu, new controller and new view in my nop.Admin project. What i want is to bind Edit link inside Rad grid in nop.Admin. my code is.
#(Html.Telerik().Grid<Nop.Admin.Models.AuthorizeWorkshops.RegistrationModel>()
.Name("ProductRegistration-grid")
.Columns(columns =>
{
columns.Bound(x => x.RegisteredProducts.Make);
columns.Bound(x => x.RegisteredProducts.Model);
columns.Bound(x => x.RegisteredProducts.Year);
columns.Bound(x => x.RegisteredProducts.CC);
columns.Bound(x => x.RegisteredProducts.AuthorizedWorkshop);
columns.Bound(x => x.RegisteredProducts.PurchaseDate);
columns.Bound(x => x.RegisteredProducts.InoiceNo);
columns.Bound(x => x.RegisteredProducts.SerialNo);
columns.Bound(x => x.RegisteredProducts.Id)
.Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "Edit", new { Id = x.RegisteredProducts.Id }))
.ClientTemplate("" + T("Admin.Common.Edit").Text + "")
.Width(50)
.Centered()
.HeaderTemplate(T("Admin.Common.Edit").Text)
.Filterable(false);
})
.Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
.DataBinding(dataBinding => dataBinding.Ajax().Select("List", "ProductRegistration"))
.EnableCustomBinding(true))
**if i exclude following code**
columns.Bound(x => x.RegisteredProducts.Id)
.Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "Edit", new { Id = x.RegisteredProducts.Id }))
.ClientTemplate("" + T("Admin.Common.Edit").Text + "")
.Width(50)
.Centered()
.HeaderTemplate(T("Admin.Common.Edit").Text)
Rad Grid in View works fine and return me all records. **but if i continue with same** i get following error.
Uncaught ReferenceError: Id is not defined
Please Help me for this issue. thanks.
It took my 5 hours to identify that what was issue behind the scene. Actaully i was using model which was returning multiple models. so i just replaced
.ClientTemplate("" + T("Admin.Common.Edit").Text + "")
** WITH **
.ClientTemplate("" + T("Admin.Common.Edit").Text + "")
and it worked.
Thanks GOD.
Related
i'm new to kendo UI and currently learning about custom editor.
My Problem is i managed to get my editor template working in edit mode and populate the data just fine, but somehow it won't save the value to the display grid
I Retreive all my data from API.
UPDATE:
i've managed to properly save the value from the custom editor template to the controller and it works just fine, but using clientTemplate won't display the correct value from what i select in the dropdown, and only show a string
DropDown Only Display A String
my setup code is like this
#( Html.Kendo().Grid<SalesOrderDetailVM>()
.Name("list-detail")
.Columns(columns =>
{
columns.Bound(c => c.Product).ClientTemplate("\\#=Product.ProductId\\#").Title("Products");
columns.Bound(c => c.Quantity);
columns.Bound(c => c.UnitPrice);
})
.Editable(GridEditMode.InCell)
.ToolBar(tool =>
{
tool.Create();
tool.Save();
}
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(true)
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.Product);
})
.Create(act => act.Action("DetailCell_Create","SalesOrder"))
)
)
DDLProduct.cshtml:
#model AAF.WEB.MVC.ViewModels.ProductVM
#(
Html.Kendo().DropDownListFor(m => m)
.DataValueField("ProductId")
.DataTextField("ProductName")
.OptionLabel("Select Product")
.BindTo((System.Collections.IEnumerable)ViewData["products"])
)
Edit Mode
DisplayMode / Out of Product Edit Mode
Use template method to acheive dropdown with kendo grid.
GridForeignKey.cshtml - it should placed in shared folder or EditorTemplates
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
In your kendo grid please change like below
#( Html.Kendo().Grid<AAF.WEB.MVC.ViewModels.SalesOrderDetailVM>()
.Name("list-detail")
.Columns(columns =>
{
columns.Bound(c => c.Id)
columns.ForeignKey(c => c.ProductId, (System.Collections.IEnumerable)ViewData["Products"], "ProductId", "ProductName").Title("Products");
columns.Bound(c => c.Quantity);
columns.Bound(c => c.UnitPrice);
})
.Editable(GridEditMode.InCell)
.ToolBar(tool =>
{
tool.Create();
tool.Save();
}
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
You can set the products data to view data. using this method you can save the product id.
Thanks
Okay after i frustrated for many hours, finally found the solution
the solution is to add a defaultvalue to the passed model in the grid
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.Product).DefaultValue(
ViewData["defaultProduct"] as ProductVM
);
})
and pass the data from the controller
// Function that get data from API
ViewData["products"] = products;
ViewData["defaultProduct"] = products.First();
I am Migrating the app from MVC 5 to Core 2.0. We are facing issue with the grid client template as we are unable to use it when we use it along with the editable property. Following is the code.
#(Html.Kendo().Grid<PPVR>()
.Name("PPVRGird")
.Columns(columns =>
{
columns.Bound(e => e.Id).Hidden();
columns.Bound(c => c.Name);
columns.Bound(c => c.Quantity);
columns.Bound(c => c.Type);
columns.Bound("").ClientTemplate("<div style='text-align:center'><a href='javascript:void(0)' class='k-grid-edit custom-action-button'onclick='customGridEditClick(this)'><img src='/Content/edit.svg' width ='40' height='40'/><br/>Edit</a></div>").HeaderHtmlAttributes(new { #class = "custom-action-button" }).Title("Edit").Width(150);
columns.Bound("").ClientTemplate("<div style='text-align:center'><a href='javascript:void(0)' class='custom-action-button pull-center' onclick='deletePayPerViewRules(#=Id#)'><img src='/Content/trashed.svg' width='40' height='40' /><br />Delete</a></div>").HeaderHtmlAttributes(new { #class = "custom-action-button" }).Width(200);
})
.Pageable()
.HtmlAttributes(new { style = " text-align:left; font-family:lato; font-size:16px; " })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("GetPPVR", "PPV"))
.Model(model =>
{
model.Id(u => u.Id);
model.Field(u => u.Type).Editable(false);
})
.Update(update => update.Action("UpdatePPVR", "PPV")))
.Editable(editable => editable.Mode(GridEditMode.InLine))
)
This brings the empty page. When I comment the line .Editable(editable => editable.Mode(GridEditMode.InLine)) page appears. It works well in MVC 5 but not in core 2.0.
Kindly suggest how can I achieve this.
UPDATE => This issue is coming only when I am using Inline option for editing when I use Pop Up then it works fine.
Okay after 2 days of waiting I got the response from Telerik Team.
A possible solution is to bind the desired columns to any field, and using the columns.editable configuration to prevent editing for these columns.
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable
columns.Bound(p => p.Freight).ClientTemplate("Hi").HeaderHtmlAttributes(new { #class = "custom-action-button" }).Width(200).Editable("function(){return false;}");
columns.Bound(p => p.Freight).ClientTemplate("Bye").HeaderHtmlAttributes(new { #class = "custom-action-button" }).Title("Sample").Width(150).Editable("function(){return false;}");
Telerik Team Answer
It seems to be a workaround for me but it worked fine.
Hope this question saves someother people time as well.
App type: ASP.NET MVC with Kendo framework
Problem Encountered: The detail template is not firing the controller action method. Please find the attached screenshot also. I checked it under the firebug window also, there is no ajax call to the controller action method "PublishedImportFiles_Read". This is making me crazy and annoying. No error is thrown or shown for this anomaly. I guess i am missing something very small.
Please help.
MVC - View Code
<div class="gapLeft gapBelow20" style="width:70%;">
#(Html.Kendo().Grid<ViewModels.PublishedImportViewModel>()
.Name("GridImport")
.Columns(columns =>
{
columns.Bound(p => p.TemplateGroup).Title("Template Group").Width("120px");
columns.Bound(p => p.TaxYear).Title("Tax Year").Width("70px");
columns.Bound(p => p.FileDescription).Title("Description").Width("200px");
columns.Bound(p => p.DatePublished).Title("Published Date").Format("{0:MM/dd/yyyy}").Width("100px");
columns.Bound(p => p.PublishedBy).Title("Published By").Width("100px");
})
.Scrollable()
.ClientDetailTemplateId("tplGridImport")
.Events(et => et.DataBound(fnCall.Replace("functionName", "gridImpDataBound")))
.Events(et => et.DetailInit(fnCall.Replace("functionName", "gridImpChildInit")))
.HtmlAttributes(new { style = "height:300px;" })
.DataSource(ds => ds.Ajax().ServerOperation(false)
.Read(read => { read.Action("PublishedImport_Read", "Import"); })
.Model(m => { m.Id(p => p.TemplateGroupID); })
)
)
</div>
<script id="tplGridImport" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ViewModels.PublishedImportViewModel>()
.Name("GridImport_#=TemplateGroupID#")
.Columns(columns =>
{
columns.Bound(c => c.TemplateGroup).Title("Template Group").Width("120px");
columns.Bound(c => c.TaxYear).Title("Tax Year").Width("70px");
})
.DataSource(dsx => dsx.Ajax()
.Read(rd => { rd.Action("PublishedImportFiles_Read", "Import"); })
)
.ToClientTemplate()
)
</script>
Import Controller ActionResult Method:
[OutputCache(Duration = 0)]
public ActionResult PublishedImportFiles_Read([DataSourceRequest] DataSourceRequest request)
{
int groupID = 5;
IEnumerable<PublishedImportViewModel> pubVM = Enumerable.Empty<PublishedImportViewModel>();
var pubRecords = base.ScenarioMangtService.GetPublishedImportFilesByTemplateGroup(ClientID, SelectedYear, groupID);
pubVM = pubRecords.Select(s => new PublishedImportViewModel
{
ImportFileJobID = s.ImportFileJobID,
TemplateGroupID = s.TemplateGroupID,
TemplateGroup = s.TemplateGroup,
FileName = s.FileName,
FileDescription = s.FileDescription,
TaxYear = SelectedYear,
DatePublished = s.DatePublished,
PublishedBy = s.PublishedBy
});
return Json(pubVM.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
There was nothing wrong with the KendoGrid code. Strangely, there was a javascript error in another js file. And for some weird reason, it was breaking the binding of the detail template grid.
So when i commented the other broken code in another file, this grid starts working automatically.
I have a kendo grid setup like this
#(Html.Kendo().Grid(Model)
.Name("projects")
.Columns(columns =>
{
columns.Bound(c => c.ID).Width(90);
columns.Bound(c => c.Name).Width(300);
columns.Bound(c => c.Description);
columns.Bound(c => c.ProjectCode);
columns.Template(c => "").ClientTemplate(Html.ActionLink("Tasks", "TasksList", "Task", new { projectId = "#=ID#" }, new { #class = "k-button k-button-medium-grid" }).ToHtmlString()).Width(65);
})
)
This set up with the Client Template (for the last column) was working fine until I updated to the new version of Kendo (2014.3.1119)
Now i get an error on the page "Uncaught TypeError: Cannot read property 'context' of null".
Has anyone else bumped into this problem? Did the syntax change and now setting up the client template like this no longer works?
Thanks!
You should not use template and clientTemplate methods to the same column. If you are using field id just bind second column to this field:
#(Html.Kendo().Grid(Model)
.Name("projects")
.Columns(columns =>
{
columns.Bound(c => c.ID).Width(90);
columns.Bound(c => c.Name).Width(300);
columns.Bound(c => c.Description);
columns.Bound(c => c.ProjectCode);
columns.Bound(c => c.ID).ClientTemplate(Html.ActionLink("Tasks", "TasksList", "Task", new { projectId = "#=ID#" }, new { #class = "k-button k-button-medium-grid" }).ToHtmlString()).Width(65);
})
)
You can read more about Kendo MVC column templates in Kendo Grid FAQ.
I have been looking all over for the answer and think I am missing something simple. I have a kendo grid where I want one of the columns to be a link to another page with the id as a route parameter. However, the value in the column cells are the bound values and are unchanged by my template. Any insights to this will be appreciated.
#(Html.Kendo().Grid((IEnumerable<ProviderAccess>)Model.Providers)
.Name("grants-grid")
.Columns(columns =>
{
columns.Bound(a => a.ProviderName);
columns.Bound(a => a.HasAccess);
columns.Bound(a => a.ProviderId).ClientTemplate("#= toggleLink(data) #");
})
.Scrollable()
)
<script>
function toggleLink(access) {
var action = '#Url.Action("Toggle", "Access")';
var html = kendo.format("<a href='{0}/{1}'>Toggle...</a>",
action,
access.ProviderId
);
return html;
}
</script>
ClientTemplate isn't using when Kendo Grid is binded to a dataSource on server side like your code.
You should use Template method of columns like below
columns.Template(p => "<a href='..../Toggle/Access/" + p.ProviderId + "'>Click</a>");
dataSource.Server() will let you use a custom.template
dataSource.Ajax() will let you use ClientTemplate
Figuring that out was really frustrating... They are not interchangeable one of the other will work depending on ajax or Server
<%: Html.Kendo().Grid((List<RadCarePlus.V2.Web.Models.GetMeSomeData>) ViewData["Mydata"])
.Name("Grid")
.Columns(columns =>
{
columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>").Title("Testing").Width(140);
//columns.Bound(c => c.EpisodeID).Width(140);
columns.Bound(c => c.AuthStatus).Width(190);
columns.Bound(c => c.CPTCode).Width(100);
columns.Bound(c => c.inscarrier).Width(110);
columns.Bound(c => c.CreatedOn).Width(160);
//columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>");
//columns.Template(c => c.EpisodeID).Title("Testing").ClientTemplate("<a href='ImplementationDetails?EpisodeID=#= EpisodeID#'>#= EpisodeID #</a>");
})
.Pageable(pageable=> pageable.ButtonCount(5))
.Sortable(sortable => sortable.AllowUnsort(false))
.DataSource(dataSource => dataSource.Server().PageSize(5)
)
%>