I am developing kendo grid with dynamic column header . Dynamic column header is working but data is not representing in correct cell .
Code link: https://jsfiddle.net/upa87s9L/
#(Html.Kendo().Grid<Invoice.Models.ViewModels.Reports.InvoiceReportViewModel>()
.Name("UnInvoicedGrid")
.Columns(columns =>
{
columns.Bound(c => c.CustomerName).Width(200);
foreach (var date in ((SelectList)ViewBag.Date).Items)
{
columns.Group(group => group
.Title(date.ToString())
.Columns(Report =>
{
Report.Bound(c => c.DocumentCount).Width(200);
Report.Bound(c => c.DossierId).Width(200);
Report.Bound(c => c.InvoiceLCTotal).Width(200);
}
)
);
}
columns.Group(group => group
.Title("Total")
.Columns(Report =>
{
Report.Bound(c => c.Document)
.Width(200);
Report.Bound(c => c.DossierId).Width(200);
})
);
})
All Column Data is showing in all column
Related
I have a kendo grid that shows around more than a million records and in its initial load, it takes more than a minute to display.
how can I use the kendo Grouppaging feature to minimize the load time so the page loads the group items on demand? Loading of the group items happens when a group is expanded. Any other options to speed up are also appreciated.
what it basically does is that based on the dropdown value it draws the kendo grid
<div>
#(Html.Kendo().DropDownList()
.Name("samplegrid")
.DataTextField("samplegrid")
.DataValueField("samplegrid")
.HtmlAttributes(new { style = "width:90%" })
.DataSource(source => source
.Custom()
.Transport(transport => transport
.Read(read =>
{
read.Action("infoDropdown_Read",
"sample").Type(HttpVerbs.Get);
})))
.Events(e =>
{
e.Select("onCheckSelectForDetail");
})
)
</div>
Here is the code for the Grid.
#(Html.Kendo().Grid<Portal.Data.Models.InfoModel>()
.Name("gridSummary")
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.OutstandingCount).Sum();
})
.Group(groups =>
{
groups.Add(p => p.OfficeNumber);
})
.Batch(true)
.ServerOperation(false)
.Sort(sort => sort.Add(column => column.Date))
)
.Columns(columns =>
{
columns.Bound(c => c.OfficeState).Width(70)
.Title("xxxx");
columns.Bound(c => c.OfficeNumber).Width(70)
.Title("zzzz");
columns.Bound(c => c.OutstandingCount).Width(60)
.Title("yyyy");
})
)
and the controller looks like
public async Task<IActionResult> infoDropdown_Read(){
try{
var infoListSR = await _eService.GetInfoListAsync();
if (infoListSR.Failed){
Log.Error($"Unexpected error occured due to
{infoListSR.ErrorData.ApplicationErrorMessage}");
throw new DataException($"{infoListSR.ErrorData.ApplicationErrorMessage}");
}
return Json(infoListSR.ResultData, new JsonSerializerOptions() {
PropertyNameCaseInsensitive = false});
}
catch (Exception ex){
Log.Error($"Username: {User.Identity.Name} - Dropdown list Failed with
Exception: {ex}");
return StatusCode(StatusCodes.Status500InternalServerError);
}
}
An option to boost the performance, you could use the server grouping along with virtualization:
Demo
I'm so tired to resolve this problem. I just want to display two values, For example in columns.Foreignkey. Showing Name and Id on the same columns. How do I do this?
#(Html.Kendo().Grid<Project_Test.Models.Workcenter>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.WorkcenterCode)
.Width(80)
.Title("Workcentercode")
.ClientTemplate("");
columns.Bound(p => p.WorkCenterSection)
.Width(84)
.Title("WorkcenterSection");
columns.ForeignKey(p => p.WorkcenterCategory,
(System.Collections.IEnumerable)ViewBag.WorkcenterCategory,
"WorkcenterCategoryID",
"WorkcenterCategoryName")
.Title("Category")
.Width(200);
//command.Custom("Details").Click("showDetails").HtmlAttributes(new { #class = "k-font-icon k-i-insert-unordered-list " });
command.Custom(" ")
.Click("showDetails")
.HtmlAttributes(new { #class = "btn btn-default btn-xs glyphicon glyphicon-list-alt" })
.Width(230);
})
//.Events(e => e.DataBound("onDataBound"))
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("Workcent")
.DisplayDeleteConfirmation("Are you sure to delete this Workcenter")
)
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.Messages(messages => messages.Refresh("Click to refresh"))
.ButtonCount(8)
)
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Selectable()
.Scrollable()
.HtmlAttributes(new { style = "height:580px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.WorkcenterID);
model.Field(p => p.WorkcenterID).Editable(true);
model.Field(p => p.UpdatedBy).DefaultValue(User.Identity.Name);
model.Field(p => p.CreatedBy).DefaultValue(User.Identity.Name);
})
.Create(update => update.Action("Employee_Create", "Home"))
.Read(read => read.Action("List", "Home"))
.Update(update => update.Action("Products_Update", "Home"))
.Destroy(update => update.Action("adress_Destroy", "Home"))
)
)
The ForeignKey column is just displaying the WorkcenterCategoryName associated with the corresponding WorkcenterCategoryID from the bound list(ViewBag.WorkcenterCategory).
Just make the WorkcenterCategoryName of each element in ViewBag.WorkcenterCategory contain the text you actually want to display, i.e.
"IDOfSelectedItem (TextOfSelectedItem)"
instead of just
"TextOfSelectedItem"
Edit to be more specific:
I'm assuming your server action is filling ViewBag.WorkcenterCategory something like:
ViewBag.WorkcenterCategory = GetWorkcenterCategories()
.Select(x => new
{
WorkcenterID = x.ID,
WorkcenterName = x.Name
});
Let's say this returns the list:
{ WorkcenterID = 1, WorkcenterName = "One" },
{ WorkcenterID = 2, WorkcenterName = "Two" }
Then the ForeignKey column maps a particular key to the corresponding item in the list bound to it (ViewBag.WorkcenterCategory) and the text value associated to the key will be displayed, whatever is contained in the WorkcenterName field.
i.e. value of 1 will display "One" in the grid.
If you want to display more than just the name of the Workcenter, then set the WorkcenterName of the objects in the ViewBag.WorkcenterCategory list to the text you want to have displayed, i.e.:
ViewBag.WorkcenterCategory = GetWorkcenterCategories()
.Select(x => new
{
WorkcenterID = x.ID,
WorkcenterName = x.ID + " (" + x.Name + ")"
});
This would return the list:
{ WorkcenterID = 1, WorkcenterName = "1 (One)" },
{ WorkcenterID = 2, WorkcenterName = "2 (Two)" }
And a value of 1 would now display "1 (One)" instead of just "One".
i have three tables tbl_admin_group ,tbl_admin_role, tbl_admin_groupRole the primary key of group and role are foreign keys in grouprole.
now i have a form in which i want to display foreign keys in dropdownlist first
for tbl_admin_role. image link given below
Controller Action Method
public ActionResult GetGroupRole()
{
dbcontext.Configuration.ProxyCreationEnabled = false;
List<TBL_ADMIN_GROUP_ROLE> lst = dbcontext.TBL_ADMIN_GROUP_ROLE.Where(x => x.IsDeleted == 0).ToList();
also try this
//List<TBL_ADMIN_GROUP_ROLE> lst = dbcontext.TBL_ADMIN_GROUP_ROLE.Include(r => r.TBL_ADMIN_ROLE).Include(g => g.TBL_ADMIN_GROUP).ToList();
ViewData["rolesList"] = lst;
return View(lst);
}
Razor view
#(Html.Kendo().Grid<TBL_ADMIN_GROUP_ROLE>().Name("Grid")
.Columns(columns =>
{
columns.Template(t => { }).Title("S.No").ClientTemplate("#= renderNumber(data) #");
columns.ForeignKey(p => p.RoleID, (System.Collections.IEnumerable)ViewData["rolesList"], "RoleID", "RoleName")
.Title("Role").Width(200).EditorTemplateName("RolesDropDown");
columns.Bound(gp => gp.GroupID).Width(200).Title("Group ID");
columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Actions");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(gp => gp.GroupRoleID))
.Read(read => read.Action("GroupRole_Read", "Security"))
.Update(up => up.Action("UpdateGroupRole", "Security"))
.Destroy(update => update.Action("DeleteGroupRole", "Security")))
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5))
.Selectable()
.Sortable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Update Group Role"))
.Events(e => e.Edit("onEdit"))
.Events(ev => ev.DataBound("resetRowNumber"))
)
i also trying with editor template but failed. please help me . thank in advance.
Editor Template
#model int
#(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select Role...")
.DataTextField("RoleName")
.DataValueField("RoleID")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("GetRoles", "Security"))
.ServerFiltering(true);
})
)
enter image description here
I am unable to bind ".MajorUnit" value from the controller side. I have googled a lot, but could not find the right answer.I have given static value "100" (.MajorUnit(100)) i.e ok. But how can I bind dynamic value returned from controller like .MajorUnit(ViewBag.MyCountValue).
#(Html.Kendo().Chart<ExtractorWiseExtractionCount>()
.Name("userchart")
.HtmlAttributes(new { style = "width: 100%; height:150pxpx", id = "ExtDataChart_" + extid })
//.Title("Extraction Details")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read.Action("GetExtractionCount", "DashboardStatistics", new { allotId = allotId, extid = extid })))
.Series(series =>
{
series.Line(model => model.ExtCompletedCount).Name("Allocation Wise Extraction");
series.Line(model => model.IssueReportedCount).Name("Issue Reported");
})
.CategoryAxis(axis => axis
.Categories(model => model.ExtractionDate).Visible(false)
.Labels(labels => labels.Rotation(-40))
.Crosshair(c => c.Visible(true))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(100)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.Format("{0:N0}")
)
)
I'm having a problem adding a child record in my hierarchical grid. It won't pass over the HeaderId from the parent in the grid.
Can anyone spot an issue, or am I trying to do something that isn't possible?
Thanks.
Here's the controller action:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult BillDetail_Create(BillDetail billDetail, int billHeaderId)
{
if (billHeaderId == 0)
{
ModelState.AddModelError("billHeaderID", "add bill header first");
}
if (billDetail != null && ModelState.IsValid)
{
var target = new BillDetail
{
Category = billDetail.Category,
Description = billDetail.Description,
Amount = billDetail.Amount,
BillHeaderId = billHeaderId,
BillDetailId = SessionBillDetails.Max(d => d.BillDetailId) + 1
};
//Get next Id in sequence
billDetail.BillDetailId = target.BillDetailId;
SessionBillDetails.Add(target);
}
return Json(new[] { billDetail }.ToDataSourceResult(new DataSourceRequest(), ModelState));
}
And here's the view:
#(Html.Kendo().Grid<BillHeader>()
.Name("BillHeaders")
.Columns(columns =>
{
columns.Bound(h => h.BillHeaderId);
columns.Bound(h => h.Category);
columns.Bound(h => h.Description);
columns.Bound(h => h.Amount);
})
.Pageable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("BillHeaders_Read", "Bill"))
)
.Events(events => events.DataBound("dataBound"))
.ClientDetailTemplateId("BillDetails")
)
<script id="BillDetails" type="text/kendo-tmpl">
#(Html.Kendo().Grid<BillDetail>()
.Name("BillDetails_#=BillHeaderId#")
.Columns(columns =>
{
columns.Bound(d => d.BillHeaderId).Width(50);
columns.Bound(d => d.BillDetailId).Width(70);
columns.Bound(d => d.Category).Width(70);
columns.Bound(d => d.Description).Width(150);
columns.Bound(d => d.Amount).Width(80);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(75);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(d => d.BillDetailId);
model.Field(d => d.BillDetailId).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("BillDetails_Read", "Bill", new { billHeaderId = "#=BillHeaderId#" }))
.Update(update => update.Action("BillDetail_Update", "Bill"))
**.Create(create => create.Action("BillDetail_Create", "Bill", new { billHeaderId = "#=BillHeaderId#" }))**
.Destroy(destroy => destroy.Action("BillDetail_Destroy", "Bill")))
.Pageable()
.ToolBar(tools => tools.Create())
.ToClientTemplate()
)
</script>
Managed to finally fix this. Unbelievable really....
I named the parameter in my controller (and view) to be "id"
So Controller:
public ActionResult BillDetail_Create(BillDetail billDetail, int id)
And View:
.Read(read => read.Action("BillDetails_Read", "Bill", new { id = "#=BillHeaderId#" }))
.Update(update => update.Action("BillDetail_Update", "Bill"))
.Create(create => create.Action("BillDetail_Create", "Bill", new { id = "#=BillHeaderId#" }))
.Destroy(destroy => destroy.Action("BillDetail_Destroy", "Bill")))
For a better explanation of why that worked:
This can occur if the BillDetail class has a property with the same name. In this case the MVC model binder will override the value sent with the request route values with the value sent as form data for the grid model. If this is the case then the simplest option to avoid the problem would be to rename the parameter. that is why renaming to ID worked.