I have implemented a kendo mvc grid and having only 3 records. It is showing blank white space at the bottom of the grid. I would like to show rows only for the records. How do I eliminate the white space
#(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.ActivityViewModel>()
.Name("GridActivity")
.Columns(columns =>
{
columns.Bound(o => o.ActivityID).Hidden();
columns.Bound(o => o.ServiceID);
columns.Bound(o => o.ActivityAppliesToName);
columns.Bound(o => o.TeamName);
columns.Bound(o => o.FullName);
columns.Bound(o => o.EmployeeID);
columns.Bound(o => o.RequiredBy);
columns.Bound(o => o.CompletedDate);
columns.Bound(o => o.Status);
columns.Bound(o => o.CountryCode);
columns.Bound(o => o.CreatedDate);
columns.Bound(o => o.CreatedBy);
columns.Bound(o => o.ModifiedDate);
})
.ToolBar(toolbar => toolbar.Create().Text("Add Activity"))
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("ActivityEdit")
.Window(w=>w.Width(600)))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => model.Id(p => p.ActivityID))
.Create(create => create.Action("Activity_Create", "Activity"))
.Read(read => read.Action("Activity_Read", "Activity", new { id = 5 }))
.Update(update => update.Action("Activity_Update", "Activity"))
.Destroy(update => update.Action("Activity_Delete", "Activity"))
)
)
I believe that this is related to the paging options - if you turn off paging, it will shrink to fit the number of records displayed.
Additionally, you may find this Telerik forum thread useful: Dynamic Grid Height?
Related
I have code that looks as follows:
#(Html.Kendo().Grid<JeffreysOnline.Entities.Customer>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.LastName).Width(150);
columns.Bound(p => p.FirstName).Width(125);
columns.Bound(p => p.MiddleInitial).Width(75);
columns.Bound(p => p.Phone).Width(125);
columns.Bound(p => p.Address).Width(150);
columns.Bound(p => p.City).Width(100);
columns.Bound(p => p.State).Width(50);
columns.Bound(p => p.Zip).Width(125);
columns.Bound(p => p.TaxName).Width(125);
columns.Bound(p => p.TaxId).Width(125);
columns.Bound(p => p.BadChecks).Width(125);
columns.Bound(p => p.OtherRisk).Width(125);
columns.Bound(p => p.Interests).Width(125);
columns.Bound(p => p.BirthDate).Width(125);
columns.Bound(p => p.BouncedCheck).Width(125);
columns.Bound(p => p.PCNumber).Width(125);
columns.Bound(p => p.Comments).Width(125);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // In-cell editing instead of the whole row
.Pageable()
.Navigatable() // This allows the user to tab between columns in the grid.
.Sortable()
.Scrollable()
.Groupable()
.Excel(excel => excel
.FileName("Customers.xlsx")
.Filterable(true)
.AllPages(false)
.ProxyURL(Url.Action("ExcelExport", "Customer"))
)
.HtmlAttributes(new { style = "height:700px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true) // We want to perform batch operations
.PageSize(500) // Set the page size
.Events(events => events.Error("error_handler")) // Define a function that gets called on an error
.Model(model => model.Id(p => p.RowId)) // Define the PK
.Create(update => update.Action("Create", "Customer")) // The Create method in the controller
.Read(read => read.Action("Read", "Customer")) // The Read method in the controller
.Update(update => update.Action("Update", "Customer")) // The Update method in the controller
.Destroy(update => update.Action("Delete", "Customer")) // The Delete method in the controller
)
When the grid renders on the page, an Edit button appears in the last column:
Why is this edit button appearing when I have in-cell editing mode set?
Do you mean the Edit button? You're adding it in your code here:
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
Remove the command.Edit(); statement and the button should disappear.
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 want to get the edit row ID on Edit button click on kendo grid.
When i click on the edit button i want to get "Document Type ID" which is shown in the grid and it has to be hidden in the original grid(primary key of datasource). I have shown it to clarify my issue.
below event fires on edit click but I have not been able to get the ID of that particular row.
$("#grid").data("kendoGrid").bind("edit", function (e) {
var grid = $("#grid").data("kendoGrid");
});
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.DocumentTypeModel>)Model.lst_DocumentType)
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.DocumentTypeID).Visible(false);
columns.Bound(o => o.DocumentType).Title("Document Type");
columns.Bound(o => o.DocumentTypeDescription).Title("Description");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))//.TemplateName("DocumentType_template"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentTypeID))
.Create(update => update.Action("EditingInline_Create", "DocumentType").Data("additionalInfo"))
.Read(read => read.Action("EditingInline_Read", "DocumentType").Data("additionalInfo"))
.Update(update => update.Action("EditingInline_Update", "DocumentType").Data("additionalInfo"))
.Destroy(update => update.Action("EditingInline_Destroy", "DocumentType").Data("additionalInfo"))
)
)
Inside the edit event of the Grid you can get reference to the row model via the arguments object.
function onEdit(e){
alert(e.model.DocumentTypeID);
}
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.
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()
)