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.
Related
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.
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 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();
}
}
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()
)
I have use Kendo version 2012.03.1114 and below mention code to add value to model and work fine but when I update the kendo varsion to 2013.3.1119 it will give a error
(TypeError: $(...).data(...).kendoGrid.editable is undefined)
any workaround please?
var model = $('#grid').data().kendoGrid.editable.options.model;
model.set('Name', getNames());
#(Html.Kendo().Grid<ABC.Domain.Entities.user>()
.Name("Grid")
.Columns(columns => {
columns.Command(command => { command.Edit(); }).Width(80);
columns.Bound(u => u.Name).Title("Name").Width(150);
columns.Bound(u => u.Status).Title("Status").Width(70);
columns.Bound(u => u.Address).Title("Address").Width(100); })
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("userEdit")) .Events(events => events.DataBound("onDataBound").Edit("onEdit"))
.Pageable(paging => paging.PageSizes(new int[] { 5, 10, 20, 50 })
.Refresh(true))
.Sortable() .ToolBar(toolbar => toolbar.Create())
.Resizable(resize => resize.Columns(true))
.Scrollable()
.DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.userKey); }) .PageSize(5) .Events(events => events.Error("error_handler"))
.Read(read => read.Action("user_Read", "User"))
.Update(update => update.Action("User_Update", "User"))
.Create(create => create.Action("User_Create", "User")) ) )