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

Hi, 
I am working on the scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).Where X-axis is Weekdays from Monday to Friday and Time is y-axis 9:00 am to 4:00 pm with Interval of 1 hour. I did not found any examples on this unable to achieve this.
Below is the sample code Kindly help me in this regard.

Thanks & Regards,
Sampath 

 

<div class="roundbox" style="width:450px; height:350px; border: solid 5px steelblue; float:right; margin-top:10px; margin-bottom:20px">
            @(Html.Kendo().Chart<AdvantEdgePortal.Web.ViewModels.DayTimeStamp>()

          .Name("chartcallTimings")
          .Title("Call Timings")

            .DataSource(dataSource => dataSource.Read(
                    read => read.Action("GetCallDataCompletionTime", "Home"))
            )
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom)
          )
          .SeriesDefaults(seriesDefaults => seriesDefaults
              .Scatter().Labels(labels => labels
                  .Visible(false)
              )
          )

          .Series(series =>
          {
              series.Scatter(m => m.WeekDay, m => m.TimeofDay);
              //series: [{ type: "scatterLine", name: "3.1C", data: [[10, 70], [13, 90], [25, 100]], dashType: "dot" }]
          }

      )
          .CategoryAxis(axis => axis
          .Categories("Monday", "Tuesday", "Wednesday", "Thrusday", "Friday")
          .MajorGridLines(lines => lines.Visible(false))
           .Categories(c => c.WeekDay)
          )
         .ValueAxis(axis => axis
                .Numeric()
                .MajorUnit(1)
                .Min(9)
                .Max(16)
                .Labels(labels => labels.Format("{0:N0}:00"))
            .Line(line => line.Visible(true))
            )

            .ChartArea(chartArea =>
            {
                chartArea.Height(340);
                chartArea.Width(440);
                chartArea.Margin(5);
            })

            )

        </div>

Tsvetina
Telerik team
 answered on 01 Jun 2018
3 answers
821 views

Hello.

I'm using kendoValidator to display all my validation errors with the kendo validation template. Using this:

 

<script>    
    $(function () { $("form").kendoValidator();});
</script>

 

But I have certain errors that I handle server side in the controller. Because they are kind of complex. And then I added the errors to the model this way:

 

ModelState.AddModelError("Hours", "The hours and the minutes can't be both 0.");

 

But if I add an error this way it is displayed with the standard ASP NET MVC way:

 

 

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0</span>

 

¿Is some kind of way to display those errors like the kendoValidator  way?

In the image attached I show one error client side like kendo validation and two error's server side. I would like to all of then be like the client side error.

Thank you.

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0.</span>

Steve
Top achievements
Rank 1
 answered on 30 May 2018
1 answer
136 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.5K+ 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
112 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
114 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
236 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
94 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
959 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
107 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
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?