Telerik Forums
UI for ASP.NET MVC Forum
1 answer
144 views

Hello.

I am using Export to Excel functionality.

Is there a way of adding page numbers to the excel generated from the grid?

I have tried the following but it does not work.

function excelExport(e) {
        var sheet = e.workbook.sheets[0];

        sheet.pageNumber = true;

}

Or is there any property which can be set when defining the Excel?

       .Excel(excel => excel
        .FileName("Users.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "UserAndGroup"))
       )

 

Thanks

 

Boyan Dimitrov
Telerik team
 answered on 30 May 2018
1 answer
1.6K+ views

I have a Grid with a mix of static and dynamic columns.  The static columns have a lot going on -- the user can choose groups of columns to display.  There's formatting, commands, etc. I retrieve the main list of models from the database based on some filter criteria from the user.  Based on the user selection for displayed columns, I augment the data returned with additional data and fill out more data on the models. 

However, the tricky part is that users can customize additional fields they want to see in this table.  These fields are dynamic.  Our application is for building forms, so they define their own fields.  Let's say a customer defines 200 fields they want to have on their form.  Of those 200 fields, they wish to display 4 of them in the grid I'm struggling with.  These fields are stored in a table "flat",so like:

CustomerID       FieldID    FieldName

1                        1              "age"

The answers to these are stored like:

FieldID      UserID     Value:

1                1              25

 

I retrieve the data for these dynamic fields with a combination of Linq and SQL.  I pivot the data, so get:

 

UserID        1              3                4         6

1                25          "foo"            "bar"      3/4/2010

 

Currently, I'm taking these results and I'm adding it to a Dictionary<> per Model.  Then I dynamically add them to my Kendo MVC grid:

             
              foreach (var key in Model.AdminColumns.Keys)
              {
                  c.Template(@<text>@item. </text>).ClientTemplate(String.Format("#=CustomFields['{0}']#", key.ToUpper())).HeaderTemplate(Model.AdminColumns[key]);
                  }
              })

 

I can display the data just fine.  However, I really need to add sorting and filtering to these columns.  I understand that's not supported the way I'm doing it.  The problem is, I can't seem to find a solution that will give me what I need.  I can't change the nature of the data obviously.  But, I'm willing to take a new approach.  However, I keep running into road blocks.  I tried using the dynamic keyword and building a model, but the grid helper didn't like that.  I was thinking of going down the path of returning a json model with the dynamic fields merged in as first class members of each dataitem, but then i'm not sure how to define the grid.

 

Do you have any suggestions?  My complete grid code is shown below.  

 

@(Html.Kendo().Grid(Model.Donors).Name("DonorGrid")
      .DataSource(ds =>
          ds.Ajax()
              .ServerOperation(false)
              .Model(m => m.Id(x => x.DonorId))
              .Read(r => r
                .Action("GetDonors", "Donor")
                .Type(HttpVerbs.Post)
                .Data("getAdditionalData"))
      .PageSize(Model.RowsPerPage)
 
      )
      //.ToolBar(t => t.Excel())
      .Excel(e => e.FileName("DonorsExport.xlsx"))
      .Columns(c =>
      {
      c.Group(g => g.Title(" ").CenterGroupHeader()
          .Columns(cm =>
          {
                  //cm.Select().Width(30);
                  cm.Bound(m => m.DonorId).ClientTemplate("<a href=\"/App/Donor.aspx/EditDonor?donorId=#=DonorId# \">Edit</a>").HeaderTemplate("Edit").Width(75).Filterable(false).Sortable(false).Locked(true).CenterCell();
              cm.Bound(m => m.AdminThumbnail).ClientTemplate("<img src=\"#=AdminThumbnail#\" width=50px;").HeaderTemplate("").Visible(Model.Columns.Thumbnail).Width(75).Filterable(false).Sortable(false).Locked(true).CenterCell();
              cm.Bound(m => m.Email).Visible(Model.Columns.Email);
              cm.Bound(m => m.Unsubscribed).ClientTemplate("#if(Unsubscribed){# <span class='red glyphicon glyphicon-flag'></span> #}#").Visible(Model.Columns.Email).Width(80).CenterCell();
 
          }));
      c.Group(g => g.Title("Current Status").CenterGroupHeader()
          .Columns(cs =>
          {
              cs.Bound(m => m.CompositeStatusText).HeaderTemplate("Status").Visible(Model.Columns.Status);
          }));
      c.Group(g => g.Title("Participation").CenterGroupHeader()
          .Columns(cg =>
          {
              cg.Bound(m => m.ParticipationStatusText).HeaderTemplate("Participation").Visible(Model.Columns.Participation);
              cg.Bound(m => m.ParticipationStatusDateTimeText).HeaderTemplate("Date").Format("{0:M/d/yy}").Visible(Model.Columns.Participation);
              cg.Bound(x => x.LastLoginDays).HeaderTemplate("Last Login Date").Visible(Model.Columns.Participation);
 
          }));
      c.Bound(m => m.SharedStatus).HeaderTemplate("Shared").Visible(Model.Columns.Shared);
      c.Group(g => g.Title("App Dates").CenterGroupHeader()
          .Columns(ca =>
          {
              ca.Bound(m => m.PreScreenDate).HeaderTemplate("Pre-screen").Format("{0:M/d/yy}").Visible(Model.Columns.AppDates);
              ca.Bound(m => m.OverallAppText).HeaderTemplate("Overall App").Format("{0:M/d/yy}").Visible(Model.Columns.AppDates);
              ca.Bound(m => m.PercentComplete).HeaderTemplate("% Complete").Visible(Model.Columns.AppDates).Format("{0:P}");
              ca.Bound(m => m.AppUpdateDays).HeaderTemplate("App Update").Visible(Model.Columns.AppDates);
 
          }));
      c.Group(g => g.Title("Eligibility").CenterGroupHeader()
          .Columns(ce =>
          {
              ce.Bound(m => m.EligibilityPrescreen).ClientTemplate(
                  "<div>#= EligibilityPrescreen#<br/>" +
                  "#=Eligibility.ScreeningEligible#, #=Eligibility.ScreeningQuestionable#, #=Eligibility.ScreeningIneligible#" +
                  "</div>"
                  ).HeaderTemplate("Pre-screen").Visible(Model.Columns.Eligibility);
              ce.Bound(m => m.EligibilityOverall).ClientTemplate(
                  "<div>#= EligibilityOverall#<br/>" +
                  "#=Eligibility.OverallEligible#, #=Eligibility.OverallQuestionable#, #=Eligibility.OverallIneligible#" +
                  "</div>"
                  ).HeaderTemplate("Overall").Visible(Model.Columns.Eligibility);
 
          }));
      c.Group(g => g.Title("Frozen").CenterGroupHeader()
          .Columns(cf =>
          {
              cf.Bound(m => m.FrozenEnabled).ClientTemplate(
                  "<table><thead><td>A</td><td>S</td><td>I</td><td>N</td></thead><tr>" +
                  "<td>#=FooCount#</td>" +
                  "<td>#=SelectedCount#</td>" +
                  "<td>#=NotSelectedCount#</td>" +
                  "<td>#=NetworkCount#</td>" +
                  "</tr></table>"
                  ).HeaderTemplate("Frozen Enabled").Visible(Model.Columns.FrozenEnabled);
          }));
 
 
      c.Bound(m => m.AlternateId).HeaderTemplate("Reference #");
      foreach (var key in Model.AdminColumns.Keys)
      {
          c.Template(@<text>@item. </text>).ClientTemplate(String.Format("#=CustomFields['{0}']#", key.ToUpper())).HeaderTemplate(Model.AdminColumns[key]);
          }
      })
 
      .Filterable()
      .Pageable(p => p.AlwaysVisible(true).PageSizes(new[] { 25, 50, 100, 500, 1000 }))
      .Sortable()
      .Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row).Enabled(true))
      .Resizable(r => r.Columns(true))
      .NoRecords("No donors were found matching this criteria."));
Konstantin Dikov
Telerik team
 answered on 30 May 2018
2 answers
121 views

Hi,

I have 2 CategoryAxis, by Month and Year:

.CategoryAxis(axis => axis
                       .Date()
                       .Labels(l => l.Format("{0:MMM}"))
                       .BaseUnit(ChartAxisBaseUnit.Months)
                       .MajorGridLines(lines => lines.Visible(false))
                   )
                   .CategoryAxis(axis => axis
                       .Date()
                       .Labels(l => l.Format("{0:yyyy}"))
                       .BaseUnit(ChartAxisBaseUnit.Years)
                       .MajorGridLines(lines => lines.Visible(false))
                   )

 

Is there a way to align the Year within that Years Months. For instance currently the years are split evenly along the graph and not sitting within the Jan > Dec of the current year. See attached image.

Thanks.

Lee
Top achievements
Rank 1
Veteran
 answered on 30 May 2018
1 answer
123 views

HI

I have found that MaskedTextBox ClearPromptChar(true) NOT WORKS in Grid/EditorTemplates*.

Is there have any solution ?

*see attachment.

*Telerik DevCraft R2 2017 SP1.

Best regards

Chris

 

 

Viktor Tachev
Telerik team
 answered on 29 May 2018
1 answer
242 views

Hi,

I want to set my grid in percentage  and not by pixels, I don't find the way to do it, because although I set the grid to be set by percentage it's always required pixels in the div uses the class "k-grid-content"

can you help me? I want the grid to look good in pc and also in laptop/

Thanks!

Stefan
Telerik team
 answered on 29 May 2018
1 answer
100 views
I am using Kendo MVC grids as provided in your examples and linking them directly to my domain models. The problem I am facing is that when I am trying to edit/create a certain Model, not only its primitive properties, but also any of the other Models' properties it contains are validated. For example, if I have a School  model, and it contains a Country (which i can select via a populated dropdown), it should only validate School properties such as Name, etc. But it's unreasonable if it also tries to validate all the properties under Country.  I don't care in my form if Country has all the required fields. All I care about is populating the Country dropdown with Id, Name for Value and Text. When I look at the Request.Form, I can clearly see that its trying to bind all the fields that start with "models" and that includes all the relational models' properties. 

Please tell me a workaround/solution and also please fix your documentation or your library to not enable this by default as it is a waste of time. I have been searching how to fix this for a long time and it's very frustrating that these basic cases are not well thought out.
Konstantin Dikov
Telerik team
 answered on 28 May 2018
1 answer
972 views

I developed a Kendo MVC Grid which displays a pop-up for updates. Popup Edit screen is a Custom template with a dropdown list that calls the controller to populate the . In this case, I am populating the prefixes. The  is populated fine, but when I click on a row on the grid to edit an item, I need to pre-select the value in the drop-down. let's say if a particular row has a value of "Mr." as a prefix, I need it to be pre-selected in the popup .

If the use of a  @Html.EditorFor(model => model.Prefix), it perfectly populates the editor fine. This doesn't work for Dropdown.

The editor template is called MemberEdit and the code in it is as below:

01.@model Aamva.Api.Common.WebSite.Models.WebUser
02.        <div class="col-lg-2">
03.            @Html.LabelFor(model => model.Prefix)
04.            @*@Html.EditorFor(model => model.Prefix)*@
05.            @(Html.Kendo().DropDownList()
06.                      .Name("ddlPrefix")
07.                      .DataTextField("Prefix")
08.                      .DataValueField("PrefixKey")
09.                      .DataSource(source =>
10.                      {
11.                          source.Read(read =>
12.                          {
13.                              read.Action("ListCustomerPrefix", "Home"); //.Data("additionalPrefixData");
14.                          })
15.                          .ServerFiltering(true);
16.                      })
17.                      //  .Text(Model.Prefix)
18.                      .Value(Model.PrefixKey)
19.                      .AutoBind(false)
20.                      .HtmlAttributes(new { style = "width: 100%" })
21.            )
22.        </div>
23.        <div class="col-lg-2">
24.            @Html.LabelFor(model => model.FirstName)
25.            @Html.EditorFor(model => model.FirstName)
26.            @Html.ValidationMessageFor(model => model.FirstName)
27.        </div>

 

The Grid code is as shown below: 

01.@(Html.Kendo().Grid<Aamva.Api.Common.WebSite.Models.WebUser>()
02.        .Name("membersGrid")
03.        .Columns(columns =>
04.        {
05.            columns.Command(command => { command.Edit(); command.Destroy().Text("EZ Del"); }).Width("15%");
06.            columns.Bound(p => p.CST_KEY).Visible(false);
07.            columns.Bound(p => p.FullName).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
08.            columns.Bound(p => p.Role).Width("25%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
09.            columns.Bound(p => p.Title).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
10.            columns.Bound(p => p.EmailAddress).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
11.            columns.Bound(p => p.Prefix).Visible(false);
12.            columns.Bound(p => p.Suffix).Visible(false);
13.            columns.Bound(p => p.RoleKey).Visible(false);
14.            columns.Bound(p => p.OrganizationMemberKey).Visible(false);
15.
        }).Filterable(filterable => filterable
17.          .Extra(false)
18.          .Operators(ops => ops
19.              .ForString(str => str.Clear()
20.                   .Contains("Contains")
21.                   .StartsWith("Starts With")
22.                   .IsEqualTo("Is Equal To")
23.                   .IsNotEqualTo("Is Not Equal To")
24.                  )))
25.        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MemberEdit").Window(w => w.Title("Edit Employee").Width(1100)))
26.        .Pageable(pager => pager.AlwaysVisible(false).PageSizes(new List<object> { 5, 10, 15, 20 }))
27.        .Sortable()
28.        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
29.        .HtmlAttributes(new { style = "width:100%;" })
30.        .DataSource(dataSource => dataSource
31.            .Ajax()
32.            .PageSize(10)
33.            .Events(events => events.Error("error_handler"))
34.            .Model(model => model.Id(p => p.CST_KEY))
35.            .Read(read => read.Action("ListMembers", "Home"))
36.            .Update(update => update.Action("EditingPopup_Update", "Home"))
37.            .Model(model =>
38.            {
39.
40.                model.Field(m => m.Title);
41.                model.Field(m => m.Prefix);
42.                model.Field(m => m.PrefixKey);
43.                model.Field(m => m.Suffix);
44.                model.Field(m => m.FirstName);
45.                model.Field(m => m.MiddleName);
46.                model.Field(m => m.LastName);
47.                model.Field(m => m.OrganizationKey);
48.                model.Field(m => m.FullName);
49.                model.Field(m => m.CustomerId);
50.                model.Field(m => m.OrganizationMemberKey);
51.                model.Field(m => m.EmailAddress);
52.                model.Field(m => m.CST_KEY);
53.                model.Field(m => m.Role);
54.                model.Field(m => m.RoleKey);
55.                model.Field(m => m.RoleList).DefaultValue(new List<Aamva.Api.Common.WebSite.Models.WebUserRole>());
56.            }
57.            )
58.         )
59.)

The Model is as below:

01.public class WebUser
02.{
03.    public string CST_KEY { get; set; }
04.    public string EmailAddress { get; set; }
05.    public string Prefix { get; set; }
06.    public string PrefixKey { get; set; }
07.    public string Suffix { get; set; }
08.    public string Title { get; set; }
09.    public string FirstName { get; set; }
10.    public string MiddleName { get; set; }
11.    public string LastName { get; set; }
12.    public string OrganizationKey { get; set; }
13.    public string Role { get; set; }
14.    public string RoleKey { get; set; }
15.    public List<WebUserRole> RoleList { get; set; }
16.}
17.
public class WebUserPrefix
20.{
21.    public string PrefixKey { get; set; }
22.    public string Prefix { get; set; }
23.}

 

 

 

Viktor Tachev
Telerik team
 answered on 28 May 2018
1 answer
116 views

i have downloaded and installed latest version of kendo UI for mvc into existing project. since then the datetimepicker doesn't stay open,can anyone help me with this.

 

thanks 

 

Viktor Tachev
Telerik team
 answered on 28 May 2018
2 answers
444 views

Hi,

I tried to set the grid height in percents and it's doesn't effect?

how can I do it? I want it to looks  good in pc and laptop and I don't want to have 2 vertical scrollbar (one for the window and one for the grid)/ i want only for the grid.

Thanks

Viktor Tachev
Telerik team
 answered on 28 May 2018
6 answers
143 views

Hi,

I have a chart in Excel i'd like to replicate, i've attached an image of it (Chart1). I've currently gotten this far (Chart2).

Here's the code:

@(Html.Kendo().Chart<UtilisationOverall>()
    .Name("chart2")
    .Title("RDO")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .DataSource(ds => ds
        .Read(read => read.Action("UserUtilisationListRdoAjax", "Kendo", new { returnType = AjaxReturnType.Json }))
        .Group(group =>
        {
            group.Add(model => model.FullName);
        })
    )
    .Series(series =>
    {
        series.Column(model => model.TimesheetHours, categoryExpression: model => model.FullName)
            .Aggregate(ChartSeriesAggregate.Sum)
            .Stack(ChartStackType.Normal)
            .Name("#= group.value #");
    })
    .SeriesColors(Colours.Blue, Colours.Orange, Colours.Grey, Colours.Yellow, Colours.LightBlue, Colours.Green)
    .CategoryAxis(axis => axis
        .Labels(l => l.Rotation(90))
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= kendo.format('{0:N0}', value) #")
    )
)

 

2 Issues:

  1. I'm not sure how to stack the sum of TimesheetHours into the Month and Year from TimesheetWorkDateMonthYear (DateTime)
  2. I don't now how to get the Key to should the Month and Year instead of the Person (FullName)

 

My Class:

public class UtilisationOverall
{
    /// <summary>
    /// Persons Full Name
    /// </summary>
    public string FullName { get; set; }
 
    /// <summary>
    /// Timesheet Work Date Month Year
    /// </summary>
    public DateTime TimesheetWorkDateMonthYear { get; set; }
 
    /// <summary>
    /// Timesheet Overhead
    /// </summary>
    public string TimesheetOverhead { get; set; }
 
    /// <summary>
    /// Timesheet Hours
    /// </summary>
    public double TimesheetHours { get; set; }
}
Stefan
Telerik team
 answered on 28 May 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?