I am using the `scrollable.Virtual` option on my grid. What i'm trying to do is paginate 4000 rows into 50 per page and have the next set load on scroll. The problem is that when I first load the grid it loads all 4000 records, then when i scroll to the 51st record it pulls all 4000 records again.
This is my code
@(Html.Kendo().Grid<EmployeeMasterView>()
.Name(
"grid"
)
.ToolBar(tools => tools.Excel())
.Excel(e => e.AllPages(
true
))
.Excel(excel => excel
.FileName(
"List.xlsx"
)
)
.Columns(columns =>
{
columns.Bound(e => e.EmployeePicture).ClientTemplate(
"<img src='"
+ Url.Content(
"~/#: EmployeePicture#"
) +
"' height='50px' width='50px' />"
).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Picture"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Picture"
, GlobalVariables.LanguageID)).Width(100);
columns.Bound(e => e.FirstName).Width(120).ClientTemplate(
"<a href='"
+ Url.Action(
"Index"
,
"Employees"
,
new
{ E =
"#: EmployeeID#"
, M =
"Info"
}) +
"' >#: FirstName#</a>"
).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"FirstName"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"FirstName"
, GlobalVariables.LanguageID));
columns.Bound(e => e.LastName).Width(120).ClientTemplate(
"<a href='"
+ Url.Action(
"Index"
,
"Employees"
,
new
{ E =
"#: EmployeeID#"
, M =
"Info"
}) +
"' >#: LastName#</a>"
).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"LastName"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"LastName"
, GlobalVariables.LanguageID));
columns.Bound(e => e.dispEmployeeID).Width(120).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"EmployeeID"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"EmployeeID"
, GlobalVariables.LanguageID));
columns.Bound(e => e.Email).ClientTemplate(
"<a href='mailto:"
+
"#: Email#"
+
"' title='"
+
"#: Email#"
+
"'>"
+
"<i class='list-icon-mail fa fa-envelope-o fa-lg fa-fw'></i></a>"
).Width(100).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Email"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Email"
, GlobalVariables.LanguageID));
columns.Bound(e => e.dispDept).Width(155).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Department"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Department"
, GlobalVariables.LanguageID));
columns.Bound(e => e.StrGender).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Gender"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Gender"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.DateEmpInactivated).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Date Employee Inactivated"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Date Employee Inactivated"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.InactivatedReason).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Inactivated Reason"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Inactivated Reason"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.JobCategory).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Job Category"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Job Category"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.WorkSiteID).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"WorkSiteID"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"WorkSiteID"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.WorkSiteLocation).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Work Site Location"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Work Site Location"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.EmployeeWorkAddress).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Employee Work Address"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Employee Work Address"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.TerminationDate).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Termination Date"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Termination Date"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.disbStartDate).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Start Date"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Start Date"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.dispPos).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Position"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Position"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.SSN).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"SSN"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"SSN"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.State).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"State"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"State"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.EmployeementStatus).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Work Status"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Work Status"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.dispBirthDate).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Birthdate"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Birthdate"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.dispDOH).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Original Hire Date"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Original Hire Date"
, GlobalVariables.LanguageID)).Hidden(
true
);
columns.Bound(e => e.BlnInactive).HeaderHtmlAttributes(
new
{ @title = FieldTranslation.GetLabel(
"Inactive"
, GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel(
"Inactive"
, GlobalVariables.LanguageID)).Hidden(
true
).ClientTemplate(
"<input type='checkbox' #= BlnInactive ? checked='checked' : '' # disabled='disabled'></input>"
);
//columns.Bound(e => e.dispDept).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Dept Desc", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Dept Desc", GlobalVariables.LanguageID)).Hidden(true);
})
.Sortable()
// .Scrollable(scrollable => scrollable.Virtual(true))
.Scrollable(scrollable => scrollable.Virtual(
true
))
.Groupable()
.ColumnMenu()
//.Pageable()
.Filterable()
.ClientDetailTemplateId(
"template"
)
.HtmlAttributes(
new
{ style =
"height:600px;"
})
.Reorderable(reorder => reorder.Columns(
true
))
.Resizable(resize => resize.Columns(
true
))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Read(read => read.Action(
"DetailTemplate_Employees"
,
"Employees"
))
)
.Events(events => events.DataBound(
"dataBound"
))
)
What I am trying to achieve is on first load it has the first 50 rows, then on scroll loads the next 50...and doesn't pull all 4000 records each time I scroll to the next 50.
According to this demo here there is supposed to be a .Filter() event for the Grid. But when I try to us it in my code, just as it is in that demo, it is undefined. There is no Filter() event. Or is there? Which is it?
Currently, the Grid Excel export will not export columns that have a client template defined on them.
The answer from Telerik HERE, solves the issue in a static way. Meaning that for each column that has a client template definition, you will have to alter the script to add the other columns.
function excelExport(e) {
var sheet = e.workbook.sheets[0];
var employeeTemplate = kendo.template(this.columns[0].template);
var employerTemplate = kendo.template(this.columns[1].template);
//Add more template variables and set them to the column index in the grid.
var data = this.dataSource.view();
for (var i = 0; i < data.length; i++) {
sheet.rows[i + 1].cells[0].value = employeeTemplate(data[i]);
sheet.rows[i + 1].cells[1].value = employerTemplate (data[i]);
//Add the cell values by column index from the template v
}
}
Here is a script to dynamically get all of the columns with client templates :
Grid HTML Helper:
@(Html.Kendo().Grid<Employee>()
.Name("employeeGrid")
.ToolBar(t => { t.Create(); t.Save(); t.Excel(); })
.Events(e => e.ExcelExport("excelExportDynamic"))
.Columns(col =>
{
col.Bound(c => c.Employee).ClientTemplate("#: data.Employee#");
col.Bound(c => c.Employer).ClientTemplate("#: data.Employer#);
col.ForeignKey(c => c.Status, Model, "StatusID", "StatusCode").Title("Status");
col.Command(c => c.Destroy());
})
//Removed for brevity
Javascript function:
<script>
function excelExportDynamic(e) {
var sheet = e.workbook.sheets[0];
var colTemplates = []; //Initialize new array
var data = this.dataSource.view();
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].template) {
colTemplates.push(kendo.template(this.columns[i].template)); //Add kendo template to colTemplate array if it exists for the given index's column
} else {
colTemplates.push(null); //Add null to given index if template does not exist for the column index. This ensures columns are mapped to the proper index.
}
}
//colTemplate array has been built now: Example of array at this point) colTemplate: { templateCol[0], null, templateCol[3], null, null }
for (var i = 0; i < colTemplates.length; i++) {
for (var j = 0; j < data.length; j++) {
if (colTemplates[i] != null) {
sheet.rows[j + 1].cells[i].value = colTemplates[i](data[j]); //Loop through all colTemplates and all data in the grid to build the excel sheet. Skip null colTemplates.
}
}
}
}
</script>
Hope this helps!!!!!
I am currently trying to initialise the Kendo schedular in MVC (VB.Net). I am getting the following error;
'Schema' is not a member of 'Kendo.Mvc.UI.Fluent.SchedulerAjaxDataSourceBuilder(Of TPinvestor.Models.ViewModels.PersonalFinanceManagement.SchedulerEvent)
which is in relation to line 15 below.
01.
@Code
02.
Html.Kendo().Scheduler(Of Models.ViewModels.PersonalFinanceManagement.SchedulerEvent)() _
03.
.Name(
"scheduler"
) _
04.
.
Date
(
New
DateTime(2013, 6, 6)) _
05.
.StartTime(
New
DateTime(2013, 6, 6, 7, 0, 0)) _
06.
.AllDaySlot(
False
) _
07.
.Views(
Sub
(views)
08.
views.DayView()
09.
views.MonthView(
Function
(monthView) monthView.Selected(
True
))
10.
End
Sub
) _
11.
.Editable(
True
) _
12.
.DataSource(
Sub
(d)
13.
d.Custom()
14.
d.Batch(
True
)
15.
d.Schema(
Function
(schema)
16.
schema.Model(
Sub
(m)
17.
m.Id(
Function
(f) f.Id)
18.
m.Field(
"title"
,
GetType
(
String
)).DefaultValue(
"No Title"
).From(
"Title"
)
19.
m.Field(
"description"
,
GetType
(
String
)).From(
"Description"
)
20.
m.Field(
"start"
,
GetType
(
String
)).From(
"Start"
)
21.
m.Field(
"end"
,
GetType
(
String
)).From(
"End"
)
22.
End
Sub
)
23.
End
Function
)
24.
End
Sub
) _
25.
.Render()
26.
27.
28.
End
Code
I have created a viewmodel that implements Kendo.Mvc.UI.ISchedulerEvent. I have added no additional properties.
Any help would be much appreciated.
Hi,
I've a grid with a custom editor template.
I need to open a new popup for a new record insert after the user updated o inserted the record before by clicking on a dedicated button
How can I do that?
Hello.
I want to use Telerik ASP.net MVC Upload control to upload large files. How to use Upload Control to split the large file into small chunks and upload to the server with IEnumerable<HttpPostedFileBase>, and then I could merge these parts into the original large file?
I created a custom editor for my Scheduler, which works well.
Then, I wanted to hide some parts of it with the help of a flag on my ViewModel like this:
<div class="k-edit-label">
@(Html.LabelFor(model => model.Title))
</div>
<div data-container-for="title" class="k-edit-field">
@(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
</div>
if(@Model.XXX) {
<div class="k-edit-label">
@(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="description" class="k-edit-field">
@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description", rows = 3 }))
</div>
}
But that didn't work. A debugging session shown that my XXX flag was always false. Curiously, if I'm writing something like this
<div data-container-for="xxx" class="k-edit-field">
@(Html.TextBoxFor(model => model.XXX, new { @class = "k-textbox", data_bind = "value:xxx" }))
</div>
I'm seeing the correct value (something true, something false).
So my question is: why using @Model.XXX always return false (the default value of a flag) and how then to implement the behavior I would like?
Thanks & Cheers,
Nicolas
@(Html.Kendo().Chart<
OtpDelayStat
>()
.Name("OtpBreakdown")
.DataSource(ds => ds.Read(r => r.Action("GetOtpBreakdown", "Reports").Data("OtpBreakdownData")))
.Series(series =>
{
series.Column(m => m.OutDelay).Name("Out Delay").Color("#F93");
})
)
@(Html.Kendo().Chart<
Collins.Hermes.WebMessenger.Models.Reports.OtpDelayStat
>()
.Name("OtpBreakdown2")
.Series(series =>
{
series.Column(m => m.ScheduledLength).Name("Schedule").Stack("Scheduled Times").Color("#090");
series.Column(m => m.OnTimeArrival).Name("On-Time Arrival").Stack("Scheduled Times").Color("#090").Opacity(0.5);
})
)
Hello,
the default "norecords" text is not the correct german Translation
instead of "Keine Aufzeichnungen zur Verfügung." it should be "Keine Datensätze verfügbar."
When I use the Kendo UI scaffolder for MVC and choosing "Use Existing ViewModel" the "Add" button remains disabled in the final dialog so I can never complete the process unless I also select a data model and DbContext. I have tried this with each of the available widgets the scaffolder supports as well as many combinations of options. Environment is: vs2015, MVC UI 2016.3.1028, EF 6.1, .Net 4.5.2
Steps: 1) right click on "Controllers" in Solution Explorer
2) Select Add, Controller
3) In the Add Scaffold dialog select MVC Kendo UI Scaffolder and Add
4) In the Kendo UI Scaffolder dialog, select UI for MVC Grid (or any other widget) and Add
5) In the widget specific dialog set Controller name, View name, check the "Use Existing ViewModel" box, select a View Model
At this point the "Add" button remains disabled regardless of any additional selections of options. The only way to get the Add button to become enabled is to also select a Data Model and DbContext.
Thanks, John