How can I insert a ActionLink into a Kendo grid? - kendo-ui

I am trying to get the action link working in this code. Afraid I am an absolute novice so need help desperately.
The link simply has to call a small managing window linked to the UnderwriterID which would be the UserName.
#(Html.Kendo().Grid<QMS.ViewModels.UnderwriterVM>()
.Name("Grid1")
.Columns(columns =>
{
columns.Bound(p => p.PortfolioID).Width(100);
columns.Bound(p => p.UnderwriterID).Width(100);
columns.Bound(p => p.UWName).Width(100);
columns.Bound(p => p.UWLastName).Width(100);
columns.Bound(p => p.PremiumAuthority).Width(100);
columns.Bound(p => p.DiscountAuthority).Width(100);
columns.Bound(p => p.UW_ShortID).Width(100);
columns.Bound(p => p.MaxDiscount).Width(100);
columns.Template(p => #Html.ActionLink("Manage", "ManageUW", new { pfid = ViewBag.PF, uwid = Model.FirstOrDefault().UserName }));
columns.Command(command => { command.Destroy(); }).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
//.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Create("Underwriters_Create", "Grid")
.Update("Underwriters_Update", "Grid")
.Destroy("Underwriters_Destroy", "Grid")
.Read("Read_Underwriters", "Grid", new { vPortId = ViewBag.PF} )
.Model(model =>
{
model.Id(p => p.UnderwriterID);
model.Field(p => p.PortfolioID).DefaultValue(ViewBag.PF);
model.Field(p => p.UWName).Editable(true);
model.Field(p => p.UWLastName).Editable(true);
model.Field(p => p.PremiumAuthority).Editable(true);
model.Field(p => p.DiscountAuthority).Editable(true);
}))
)

Here is what my column client templates look like:
columns
.Bound(p => p.UserName)
.Title("")
.Filterable(false)
.Sortable(false)
.Width(103)
.ClientTemplate(Html.ActionLink("<span class=\"k-icon k-i-pencil\"></span>Manage", "ManageUW", "YourController", new { pfid = ViewBag.PF, uwid = "#=UserName#" }, new { #class = "k-button k-button-icontext" }).ToHtmlString());

Try something like this
VB code:
.ClientTemplate(Html.ActionLink("Roles", "UserRolesManage", New With {.UserId = "#=UserId#", .UserLogin = "#=UserLogin#"}).ToHtmlString()
C# code:
.ClientTemplate(#Html.ActionLink("Roles", "UserRolesManage", New {UserId = "#=UserId#", UserLogin = "#=UserLogin#"}).ToHtmlString()

Related

Invalid Tempate error on nested grids inside editorTemplate popup of ASP.NET Core Kendo Grid

I have a ASP.NET Core Kendo grid which display's list of Users. The grid has pouup mode editor template. The Kendo Grid code looks like this.
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.UserViewModel>()
.Name("UserGrid")
.Columns(columns =>
{
columns.Command(command =>
{
if (UserAccessService.CanEdit("User"))
{
command.Edit().UpdateText("Submit").Text(" ");
command.Custom("Clear").Text(" ").IconClass("k-icon k-i-clear-css k-grid-features").HtmlAttributes(new { title = "Clear User", #class = "k-grid-custom" }).Click("User_clearUser");
command.Custom("Email").Text(" ").IconClass("k-icon k-i-envelop").HtmlAttributes(new { title = "Send Welcome Email", #class = "k-grid-custom" }).Click("User_sendWelcomeEmail");
command.Custom("Unlock").Text(" ").IconClass("k-icon k-i-unlock").Visible("function (e) { return (!e.IsLockedOut); }").HtmlAttributes(new { title = "Disable User", #class = "k-grid-custom" }).Click("User_disableUser");
command.Custom("Lock").Text(" ").IconClass("k-icon k-i-lock").Visible("function (e) { return (e.IsLockedOut); }").HtmlAttributes(new { title = "Enable User", #class = "k-grid-custom" }).Click("User_enableUser");
command.Custom("UserFile").Text(" ").IconClass("k-icon k-i-file").HtmlAttributes(new { title = "User Profile File", #class = "k-grid-custom" }).Click("User_openFilePopup");
}
}).Width(75);
columns.Bound(p => p.UserId).Hidden(true);
columns.Bound(p => p.UserName).MinResizableWidth(100);
columns.Bound(p => p.Prefix).MinResizableWidth(50);
columns.Bound(p => p.FirstName).MinResizableWidth(50);
columns.Bound(p => p.LastName).MinResizableWidth(50);
columns.Bound(p => p.Suffix).MinResizableWidth(50);
columns.Bound(p => p.Email).MinResizableWidth(100);
columns.Bound(p => p.PhoneNumber).MinResizableWidth(60);
})
.ToolBar(toolbar =>
{
toolbar.Custom().Text("Reset Filters").HtmlAttributes(new { id = "resetAllGridFilters", #class = "btn-grid-toolbar", onclick = "ResetGridFilter(\"UserGrid\")" });
if (UserAccessService.CanAdd("User"))
{
toolbar.Create().Text("Add New User").HtmlAttributes(new { #class = "btn-grid-toolbar" });
}
if (UserAccessService.IsAnjuAdmin)
{
toolbar.Custom().Text("Flag Reset Security").HtmlAttributes(new { id = "flagResetSecurity",#class = "btn-grid-toolbar", onclick = "User_flagResetSecurity()" });
toolbar.Custom().Text("Unflag Reset Security").HtmlAttributes(new { id = "unFlagResetSecurity",#class = "btn-grid-toolbar", onclick = "User_unFlagResetSecurity()" });
}
toolbar.Custom().Text("Show Disabled Users").HtmlAttributes(new { id = "showHideDisabledUsers", #class = "btn-grid-toolbar", onclick = "showHideDisabledUsers()" });
})
.Pageable(pageable => pageable
.Refresh(true)
.Responsive(false)
.PageSizes(Constants.PageSizes)
.ButtonCount(5))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Filterable()
.Events(e => e.DataBound("gridDataBoundAutoFit"))
.Events(e => e.Edit("User_AddEditUser"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(UserAccessService.PageSize)
.ServerOperation(true)
.Events(e => e.RequestEnd("User_AddProductDetails"))
.Events(events => events.Error("onGridError"))
.Model(model => model.Id(p => p.UserId))
.Read(read => read.Action("GetUserList", "User").Data("getUserDetailsOptions"))
.Create(create => create.Action("AddUser", "User"))
.Update(update => update.Action("UpdateUser", "User")))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("User").Window(w => w.Height(670).Width(600)))
)
The Editor template is having tab strips and one of tab is having nested Kendo grid.
The Code for the ASP.NET Core Kendo Grid is as follows :
<script id="UserProductSegmentTemplate" type="text/kendo">
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.SegmentViewModel>()
.Name("UserProductSegmentGrid#=ProductId#")
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(c => c.SegmentId).Width(0).Hidden();
columns.Bound(c => c.Name).Title("Segment Name").Width(100);
})
.Sortable()
.Scrollable()
.PersistSelection()
.NoRecords(records => records.Template("No Records."))
.DataSource(dc => dc.Ajax()
.ServerOperation(true)
.Model(model => model.Id(p => p.SegmentId))
.Read(read => read.Action("GetSegmentList", "Segment", new { productId = 1 }))
)
.ToClientTemplate()
)
</script>
<div class="row">
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.ProductViewModel>()
.Name("ProductGrid")
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(p => p.ProductId).Hidden(true);
columns.Bound(p => p.Name).MinResizableWidth(200);
columns.Bound(p => p.Identifier).MinResizableWidth(150);
columns.Bound(p => p.GenericName).MinResizableWidth(150);
})
.Pageable(pageable => pageable
.Refresh(true)
.Responsive(true)
.PageSizes(Constants.PageSizes)
.ButtonCount(5))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Filterable()
.PersistSelection()
.Events(e => e.Change("onUserProductGridChange"))
.Events(e => e.DataBound("onUserProductDataBound"))
.ClientDetailTemplateId("UserProductSegmentTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(UserAccessService.PageSize)
.ServerOperation(true)
.Model(model => model.Id(p => p.ProductId))
.Read(read => read.Action("GetProductList", "Product")))
.ToClientTemplate()
)
</div>
When I click on "Add New User" toolbar button the editor popup opens but grid is not getting rendered and getting "Invalid template" in browser console.

kendo mvc grid hierarchy dropdownlist create fails

This is my code:
#(Html.Kendo().Grid<RMS.Admin.ViewModel>()
.Name("ResourceGrid")
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType.Name#");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:800px" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(s => s.ResourceId);
model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
})
.Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
.Read(read => read.Action("ReadResource", "Home"))
.Update(update => update.Action("SaveSystem", "Home"))
.Destroy(destroy => destroy.Action("RemoveSystem", "Home"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<RMS.Admin.Metadata>()
.Name("grid_#=ResourceId#")
.Columns(columns =>
{
columns.Bound(o => o.MetaDataName);
columns.Bound(o => o.MetaDataDescription);
columns.Bound(o => o.LanguageCode);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.HtmlAttributes(new { style = "height:500px" })
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(s => s.MetaDataId))
.Read(read => read.Action("GetMetaDataByResourceId", "Home", new { id = "#=ResourceId#" }))
.Create(update => update.Action("CreateMetaData", "Home", new { id = "#=ResourceId#" }))
.Update(update => update.Action("SaveSystem", "Home"))
.Destroy(destroy => destroy.Action("RemoveSystem", "Home"))
)
.Scrollable()
.Sortable()
.ToClientTemplate()
)
So when i add clienttemplate to resourcetype on the main grid everything works as it should but when i press create button is tells me
"Uncaught ReferenceError: ResourceType is not defined "
If i take clienttemplate away the dropdownlist in the grid wont work.

Child grid custom command button

I have a question based on my current situation, I have a grid with ClientDetail / Child grid inside of it. In my parent grid there is a custom command button, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showEdit"); command.Destroy();
}).Width(160);"
and also i had my custom command button as well in my child grid, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showSubEdit"); command.Destroy();
}).Width(160);"
Those 2 custom command should call different function which is "showEdit" & "showSubEdit". The problem is, every time custom command in child grid triggered, it always calls its parent's function which is "showEdit", however the child grid should call "showSubEdit".
Is there something i missed ?
NB :
function showEdit(e) {
...
}
function showSubEdit(e) {
...
}
Grid Code :
<div>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridActivity")
.Columns(columns =>
{
//columns.Template(t => { }).Title("No").ClientTemplate("#= renderNumber(data) #").Width(50);
columns.Bound(c => c._id).Visible(false);
columns.Bound(c => c.ActivityType.TypeTitle).Title("Type").Width(80);
columns.Bound(c => c.ActivityTitle).Title("Title").Width(120);
columns.Bound(c => c.DependenciesStr).Title("Dependencies").Width(120);
columns.Bound(c => c.ResourcesStr).Title("Resources").Width(120);
columns.Bound(c => c.FromStr).Title("From");
columns.Bound(c => c.ToStr).Title("To");
columns.Bound(c => c.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(c => c.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEdit"); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 290px;" })
.Groupable()
.Scrollable()
.Sortable()
.Filterable()
.ClientDetailTemplateId("template")
.Pageable(x => x.PageSizes(new int[] { 10, 20 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(c => c.Id(p => p._id))
.Read(read => read.Action("ProjectActivities_Read", "Project", new { projectId = ViewBag.ProjectId }))
.Destroy(destroy => destroy.Action("ProjectActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId }))
)
.Events(x => x.DataBound("resetRowNumber"))
)
</div>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=_id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Sub Activity").Content(#<text>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridChild_#=_id#")
.Columns(columns =>
{
columns.Bound(x => x._id).Visible(false);
columns.Bound(x => x.ActivityType.TypeTitle).Title("Type");
columns.Bound(x => x.ActivityTitle).Title("Title").Width(150);
columns.Bound(x => x.DependenciesStr).Title("Dependencies").Width(150);
columns.Bound(x => x.ResourcesStr).Title("Resources").Width(150);
columns.Bound(x => x.FromStr).Title("From");
columns.Bound(x => x.ToStr).Title("To");
columns.Bound(x => x.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(x => x.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEditSub"); command.Destroy(); }).Width(160);
})
.Pageable(x => x.PageSizes(new int[] { 5, 10 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(x => x.Id(y => y._id))
.Read(read => read.Action("ProjectSubActivities_Read", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
.Destroy(destroy => destroy.Action("ProjectSubActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
}).ToClientTemplate())
</script>
I got around the bubbling by checking if the element shown by the first command event is visible:
function showDetailsLevel(e) {
e.preventDefault();
originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id
var wnd = $("#Details").data("kendoWindow");
if (!$("#Details").is(":visible")) {
wnd.center();
wnd.open();
var grid = $("#DetailGrid").data("kendoGrid");
grid.dataSource.read();
}
}

kendo grid do not refresh on update

I have the next Kendo Grid, all the events in the models take place, no problem!.
The problem is when I change a value in the grid, it not refresh again.
How I can fix this, or how I can get the event occurring when I do changes on the grid, to manage the grid refresh with JQuery.
#(Html.Kendo().Grid<Corporativo.Model.SolProdVM>()
.Name("SolicitudesProducto")
.Columns(columns =>
{
columns.Bound(e => e.Id_Producto).Width(80).Title("Código");
columns.Bound(e => e.DescProducto).Width(40).Groupable(false).Title("Producto");
columns.Bound(e => e.UM).Width(40).Groupable(false).Title("UM");
columns.Bound(e => e.Precio).Width(40).Groupable(false).Title("Precio");
columns.Bound(e => e.Cantidad).Width(40).Groupable(false).Title("Cantidad");
columns.Bound(e => e.Importe).Width(40).Groupable(false).Title("Importe");
columns.Command(command => command.Custom("Eliminar").Click("elimar_de_solicitud")).Width(25);
})
.Sortable()
.ToolBar(toolBar =>
{
toolBar.Save().Text("Guardar cambios");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => {
model.Id(p => p.Id_Solicitud);
model.Id(p => p.Id_Producto);
model.Field(p => p.Desc_Producto).Editable(false);
model.Field(p => p.UM).Editable(false);
model.Field(p => p.Precio).Editable(false);
model.Field(p => p.Cantidad);
model.Field(p => p.Importe).Editable(false);
})
.Read(read => read.Action("GetAllSolProdJSON", "ProductRequest", new { Id_Solicitud = #Model.Id_Solicitud }))
.Update(update => update.Action("ActualizarSolProd", "ProductRequest").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("EliminarSolProd", "ProductRequest").Type(HttpVerbs.Post))
)
)
There is an Events Method you can call.
#(Html.Kendo().Grid<Model_MVC.Models.OrderGridViewModel>()
.Name("ProposalGrid")
.HtmlAttributes(new { style = "font-size:14px;line-height:2em;width:80%;margin-left:190px;" })
.Columns(columns =>
{
//columns
})
.
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Orders"))
.Events(x => x.Change("JSFunction") )
.Model(model =>
{
model.Id(i => i.OrderId);
model.Field(x => x.OrderId).Editable(false);
})
.PageSize(15)
)
.Pageable()
)

Kendo UI Child Grid -> Destroy Confirmation Firing Twice on Cancel

I have a grid which has a child/sub Grid. It works fine, I can add and remove. However, when I attempt to run the command.destroy, should I press Cancel on the confirmation, it fires again (so I have to press Cancel again). If I choose Confirm, it doesn't popup again and does delete it on first try.
I am unsure whats causing this and I don't think it's my CSHTML but just need a second opinion.
#(Html.Kendo().Grid<ModelA>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ID).Width(50);
columns.Bound(o => o.Name).Width(300);
columns.Bound(o => o.UpdateUser).Width(100);
columns.Bound(o => o.UpdateDate).Format("{0:d}").Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.ClientDetailTemplateId("adTemplate")
.Pageable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RoleTemplate"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("RoleRead", "Role"))
.Update(update => update.Action("RoleUpdate", "Role"))
.Create(create => create.Action("RoleCreate", "Role"))
.Destroy(destroy => destroy.Action("RoleRemove", "Role"))
.PageSize(10)
.Model(model =>
{
model.Id(c => c.ID);
model.Field(c => c.UpdateUser).Editable(false).DefaultValue(Context.User.Identity.Name);
model.Field(c => c.UpdateDate).Editable(false).DefaultValue(DateTime.Now);
})
)
.Sortable()
.Filterable()
)
<script id="adTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ModelAChild>()
.Name("Roles_#=ID#")
.Columns(columns =>
{
columns.Bound(s => s.ActiveDirectoryGroup).Width(500);
columns.Command(command => { command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RoleSecurityTemplate"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("RoleReadSecurity", "Role", new { roleID = "#=ID#" }))
.Create(create => create.Action("RoleAddSecurity", "Role", new { roleID = "#=ID#" }))
.Destroy(destroy => destroy.Action("RoleRemoveSecurity", "Role", new { roleID = "#=ID#" }))
.Model(model =>
{
model.Id(s => s.ID);
model.Field(s => s.UpdateUser).Editable(false).DefaultValue(Context.User.Identity.Name);
model.Field(s => s.UpdateDate).Editable(false).DefaultValue(DateTime.Now);
})
)
.Pageable()
.Sortable()
.ToClientTemplate())
</script>
Update your version to the latest one. This was fixed some releases ago.

Resources