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.
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 am using Kendo UI for ASP.NET MVC. I have grid with edit command. The default look of the edit command is "button" and i wanted to change it to link. But there is no Template() method for command. So how do i change the edit command button to link?
Telerik has option to create own custom command as defined here. but my grid is configured to use GridEditMode.Popup which works great with inbuilt edit command. If i create custom command then i guess i have to wireup popup window & everything else.
I just wanted to change "button" to link?
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Command(command => command.Edit().Text("Edit Me")); // How do i change this to link??
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
)
UPDATE1
#Steve Greene Thanks. Your approach did work on master grid. But i also have child detail grid which has edit link. The approach didnt work for detail grid. Kendo throws error.
I think we have to escaped template expression, to be evaluated in the child/detail context. But i am not sure the whats the syntax
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Master</a>");
//Worked in master grid
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
.ClientDetailTemplateId("detailtemplate")
)
<script id="detailtemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<UI.Models.DetailGridVM>()
.Name("detailgrid_#=CampaignID#")
.Columns(columns =>
{
columns.Bound(o => o.CampaignDetailID);
columns.Bound(o => o.Notes);
columns.Bound(o => o.CreatedBy);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Detail</a>");
// Does not work in detail grid
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetCampaignDetails", "Home", new { campaignID = "#=CampaignID#" }))
.Update(update => update.Action("UpdateCampaignDetails", "Home"))
.Model(model => model.Id(m => m.CampaignDetailID))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</script>
Use a column template that has the k-grid-edit class on it (use k-grid-delete for destroy):
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit</a>").Width(30);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-delete"" href=""\#"">Delete</a>").Width(30);
})
or for smaller buttons and bootstrap:
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-info btn-xs k-grid-edit"" href=""\#"">Edit</a>").Width(30);
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-danger btn-xs k-grid-delete"" href=""\#"">Delete</a>").Width(30);
For example you can do that with css only:
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit :hover {
cursor: pointer;
}
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit {
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: transparent;
border: none;
}
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.
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");
})
I was just using Kendo UI Hierarchy Grid in my MVC3 project. The hierarchy is about 2 levels. I need to customize the 2nd level hierarchy with my own custom actionlink for adding the details.
The flow of execution is something simple. The Kendo Grid will populate with default records. If the user is selecting to view inner detail of any of the records it should show another hierarchy grid with actionlink for adding new record.
Here is my child grid code:
<script id="pordersTemplate" type="text/kendo-tmpl">
#Html.ActionLink("Create PoDetails", "Create", "PoDetails", new { id = "#=Id#" }, null)
// Here i need to get the current selected ID to use it on the create page.
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)
Plase tell me some suggestions to add this actionlink with the grid.
Thanks,
Why don't you use a toolbar :
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.ToolBar(t => t.Create().Text("Create PoDetails")) // <-- add here the toolbar
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
// and here map the create event with your custom action
.Create(c => c.Action("Create", "PoDetails", new { id = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)