Telerik Forums
UI for ASP.NET MVC Forum
5 answers
159 views

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.

Pavlina
Telerik team
 answered on 09 Nov 2016
3 answers
466 views

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?

 

 

Eyup
Telerik team
 answered on 09 Nov 2016
9 answers
1.7K+ views

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!!!!!

Eyup
Telerik team
 answered on 09 Nov 2016
2 answers
166 views

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.

mabs
Top achievements
Rank 1
 answered on 09 Nov 2016
5 answers
269 views

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?

Eyup
Telerik team
 answered on 08 Nov 2016
3 answers
256 views

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?

Dimiter Madjarov
Telerik team
 answered on 08 Nov 2016
1 answer
142 views

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

Bozhidar
Telerik team
 answered on 08 Nov 2016
6 answers
396 views
I have 2 charts that I'm defining using the mvc wrappers. They both operate on the same data, which I'm loading using Ajax binding.  So that they do not make 2 separate calls I wanted to define a shared dataSource, but I've been unable to figure out how to do this when the charts are defined using MVC. Here's a cut down version of my chart definitions.

@(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);          
        })        
    )

Is there a way to define a shared dataSource in MVC alone? if not is there a sensible way to do it in javascript? (I tried assigning the datasource from one grid to another in a javascript event, but this only seemed to work properly the 2nd time the event occurred. I also tried doing it in jquery document.ready, but the charts don't seem to have been created at that point.
Sébastien
Top achievements
Rank 1
 answered on 08 Nov 2016
1 answer
78 views

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."

 

Rumen
Telerik team
 answered on 07 Nov 2016
1 answer
985 views

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

Dimiter Madjarov
Telerik team
 answered on 07 Nov 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?