When i click the button in KendoUI the click function is not working that is Editfunction and Deletefunction.
<%: Html.Kendo().Grid(gridobj)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.TMovie_id).Groupable(false).Title("ID");
columns.Bound(p => p.Name).Title("Name");
columns.Bound(p => p.Genre).Title("Genre");
columns.Command(command => command.Custom("Edit").Click("Editfunction"));
columns.Command(command => command.Custom("Delete").Click("Deletefunction"));
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("", ""))
)
%>
<script type="text/javascript">
function Editfunction(e) {
e.alert("Inside e Hi");
alert("hi");
}
function Deletefunction(e) {
e.alert("Inside e Hi");
alert("hi");
}
</script>
columns.Command(commands =>
{
commands.Custom("Edit").Click("Editfunction");
command.Custom("Delete").Click("Deletefunction");
})
or
columns.Command(commands =>
{
commands.Destroy().Text("delete");
commands.Edit().Text("edite");
})
Related
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.
I have a Hierarchical grid and I'm trying to add a custom editor for pop-up editing. When I add the template to the child grid and click on the "edit" button, i get a invalid template error. If i add that same template to the parent, it works fine.
Here is the error in console:
Uncaught Error: Invalid template:'
Here is the code
#(Html.Kendo().Grid<ParentViewModel>()
.Name("GridAdjax")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Read", "controller"))
.Model(model =>
{
model.Id(c => c.Id);
})
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("onRequestEnd"))
)
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name");
columns.Bound(p => p.CompanyDomain).Title("Company Domain");
columns.Bound(p => p.CompanySecurityRole).Title("Security Role");
columns.Bound(p => p.CompanySecurityGroup).Title("Security Group");
})
.ClientDetailTemplateId("template")
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Events(e => e.DataBound("OnDataBound"))
.Deferred()
)
<CHILD>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ChildlViewModel>()
.Name("grid_#=CompanyId#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Update(update => update.Action("CompanyList_Update", "Administration"))
.Read(read => read.Action("Read", "Child", new { companyId = "#=CompanyId#" }))
.Model(model =>
{
model.Id(c => c.Id);
model.Field(c => c.CompanySoldTo).Editable(true);
model.Field(c => c.CompanyDistributionChannel).Editable(true);
model.Field(c => c.CompanyDivision).Editable(true);
model.Field(c => c.CompanyPlant).Editable(true);
model.Field(c => c.CompanySalesOrg).Editable(true);
})
)
.Columns(columns =>
{
columns.Bound(p => p.CompanySoldTo).Title("Sold To");
columns.Bound(p => p.CompanyDistributionChannel).Title("Dist. Chan.");
columns.Bound(p => p.CompanyPlant).Title("Plant");
columns.Bound(p => p.CompanySalesOrg).Title("Sales Org");
columns.Command(command => { command.Edit(); }).Title(("Edit SAP Info."));
})
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Detail"))
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
If anyone experiences this issue in the future, the problem was actually in my custom pop-up editor template. I had a data validation message on one of the input boxes set as "Please enter your account #". The "#" was being interpreted as a template by Kendo. I escaped the # and then was able to get it to successfully load.
I have this telerik grid in a asp.net mvc project
<div class="actualGrid" id="actualGrid">
#(Html.Kendo().Grid<AVNO_KPMG.Models.Bench>() //Bench Grid
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Bench").Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Width(100);
columns.Bound(p => p.freeSeats).Title("Free Seats").Width(200).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte"))).HtmlAttributes(new { #class = "FreeSeats" })
.ClientTemplate("<div class='barthingy'><div class='bars_text'><div class='seatsText'><span class=\"bookNotfull\"></span> <b>#=bookedSeats#</b> USED SEATS</div><div class='seatsText'><span class=\"bookfull\"></span> <b>#=freeSeats#</b> TOTAL OFSEATS</div></div><div id='bigbar'><div class='bigbar' style='width:100%; float:left; background-color:rgb(142, 188, 0);'><div ' style='float:right; width:#=bookedSeats *100 / seatsCount#%; background-color:rgb(255, 99, 71); height:16px ' class='b_#=name#' id='temp-log'></div></div></div></div>");
//buttons
columns.Command(command => { command.Custom("checkBench1 ").Text(" AM ").Click("doCheckIn"); command.Custom("checkBench 2").Text(" PM ").Click("doCheckIn"); command.Custom("checkBench3").Text("All Day").Click("doCheckIn"); }).HtmlAttributes(new { #class = "comms#=freeSeats# freeAM#=seatsCount - (bookings_am + bookings_allday)# freePM#=seatsCount - (bookings_pm + bookings_allday)# freeALLDAY#=freeSeats#" }).Title("Check in").Width(200);
})
.Pageable()
.Sortable()
.Scrollable(scrolling => scrolling.Enabled(false))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
//.HtmlAttributes(new { style = "height:530px;" })
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
//.Sort(sort => sort.Add("freeSeats").Ascending())
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.id))
.Read(read => read.Action("GetBenches", "Deskcheckin"))
)
)
</div>
Everytime i press on of the buttons in the command column, the url gets a # in front of it, even if i set the buttons to do nothing.
my url is something like
http://www.aaaaaa.com/stuff
When i press one of the buttons i get
http://www.aaaaaa.com/stuff#
How can i disable this?
Please try with the below code snippet. For custom command button grid generate anchor control for same. By default it set href='#' and I have replaced it with href='javascript:void(0)'.
<div>
#(Html.Kendo().Grid<MvcApplication1.Models.Student>()
.Name("grid")
.Columns(columns =>
{
..........
..........
columns.Command(command => { command.Custom("checkBench1").Text("AM").Click("doCheckIn"); }).Title("Check in").Width(200);
})
.Events(events => events.DataBound("onDataBound"))
..........
..........
)
</div>
<script>
function doCheckIn() {
alert('a');
}
function onDataBound(arg) {
$("#.k-grid-checkBench1").attr('href', 'javascript:void(0)');
}
</script>
Let me know if any concern.
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.
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.