Questions on UI for ASP.NET MVC Forum

1 answer

607 views

Hi,

due to large amount of data in the grid, excel export does not work (>50.000 records). Is there a way to achieve this? Using

.AllPages(false)

only exports a number of records equal to the page size. I would like to be able to let's say export 200 records per .xls file.

Is there possible to use smth similar to https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/excelexport

Is there a way to achieve this and can you maybe share an small example?

Thanks a lot,

rina

Grid

answered on 30 Sep 2019

1 answer

335 views

Labels/Tick size for Bar Chart

I have a bar chart where the x axis is a dollar amount. Depending on the situation, this can be hundreds of dollars or millions of dollars and anywhere in between. In my example data it is in the millions and the x-axis is over crowded. (see attached image) In the case of thousands of dollars, the axis is not crowded. I have tried setting MajorTicks and MajorUnit with no success. So first is there a way to fix my example data so values are readable on the x-axis, and second, is there a way to dynamically adjust this based on the values plotted (from hundreds to millions).

Chart Code:

@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowInOutChartItem>()

.Name("chartFlows2")

.Title(title => title

.Text("Cash Flows")

.Position(ChartTitlePosition.Top)

)

.Legend(legend => legend

.Visible(false)

)

.SeriesDefaults(sd => sd.Bar().Stack(true))

.DataSource(dataSource => dataSource

.Group(g => g.Add(item => item.InOutField))

.Read(read => read.Action("CashInOutChartData", "PracticeAnalytics"))

)

.Series(series =>

{

series.Bar( "Total", "color", "category")

.Name("Flows");

})

.CategoryAxis(axis => axis

.Categories(model => model.category))

// .AxisDefaults(ad => ad.MajorTicks(mt => mt.Size(1000)))

//.ValueAxis(va => va.Numeric().MajorTicks(mt => mt.Size(1000000)))

//.ValueAxis(axis => axis

// .Numeric().MajorUnit(1000))

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # (#= series.name #): #= dataItem.TotalFormatted #"))

)

Model:

public class FlowInOutChartItem

{

public int? myYear { get; set; }

public int? myQtr { get; set; }

public decimal Total { get; set; }

public string TotalFormatted

{

get

{

return string.Format("{0:C0}", Total);

}

public decimal PercentOfTotal { get; set; }

public string category

{

get

{

return "Q" + myQtr.ToString() + " " + myYear.ToString();

}

public decimal value

{

get

{

return PercentOfTotal;

}

public string color { get; set; }

public string InOutField { get; set; }

}

Data:

[

{

myYear: 2019,

myQtr: 2,

Total: 58417603.24,

TotalFormatted: "$58,417,603",

PercentOfTotal: 33.86,

category: "Q2 2019",

value: 33.86,

color: "#0e5a7e",

InOutField: "In"

},

{

myYear: 2019,

myQtr: 1,

Total: 44370421.48,

TotalFormatted: "$44,370,421",

PercentOfTotal: 25.71,

category: "Q1 2019",

value: 25.71,

color: "#166f99",

InOutField: "In"

},

{

myYear: 2018,

myQtr: 4,

Total: 47372210.75,

TotalFormatted: "$47,372,211",

PercentOfTotal: 27.45,

category: "Q4 2018",

value: 27.45,

color: "#2185b4",

InOutField: "In"

},

{

myYear: 2018,

myQtr: 3,

Total: 22390062.02,

TotalFormatted: "$22,390,062",

PercentOfTotal: 12.98,

category: "Q3 2018",

value: 12.98,

color: "#319fd2",

InOutField: "In"

},

{

myYear: 2019,

myQtr: 2,

Total: -31987802.56,

TotalFormatted: "($31,987,803)",

PercentOfTotal: 36.82,

category: "Q2 2019",

value: 36.82,

color: "#f70404",

InOutField: "Out"

},

{

myYear: 2019,

myQtr: 1,

Total: -29400196.53,

TotalFormatted: "($29,400,197)",

PercentOfTotal: 33.84,

category: "Q1 2019",

value: 33.84,

color: "#cc0404",

InOutField: "Out"

},

{

myYear: 2018,

myQtr: 4,

Total: -20853907.18,

TotalFormatted: "($20,853,907)",

PercentOfTotal: 24,

category: "Q4 2018",

value: 24,

color: "#a80303",

InOutField: "Out"

},

{

myYear: 2018,

myQtr: 3,

Total: -4637187.52,

TotalFormatted: "($4,637,188)",

PercentOfTotal: 5.34,

category: "Q3 2018",

value: 5.34,

color: "#840202",

InOutField: "Out"

}

]

Chart

answered on 27 Sep 2019

1 answer

2.2K+ views

Clear validation messages client side

Hi,

I have a form in a modal window with server-side validation. "Name" field is a required input as defined by my model.

@using (Html.BeginForm("chnage", "Home", FormMethod.Post, new { id = "changeform" }))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary("", new { @class = "text-danger" })

<div class="modal fade-scale" id="changemodal" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header text-center">

<h4 class="modal-title w-100">Change</h4>

</div>

<div class="modal-body" id="modalFormBody">

<div class="container">

<div class="row">

<label class="col-sm-2 col-form-label">Name</label>

<div class="col-6">

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @style = "width:50px" } })

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="row">

<label class="col-sm-2 col-form-label">Info</label>

<div class="col-6">

@Html.EditorFor(model => model.Info, new { htmlAttributes = new { @class = "form-control", @style = "width:50px" } })

@Html.ValidationMessageFor(model => model.Info)

</div>

<div class="modal-footer justify-content-center">

<button type="submit" id="submit" name="submit" value="submit" class="btn k-primary k-button">Switch</button>

<button type="submit" id="clearBtn" name="submit" value="clear" class="btn k-button" onclick="this.form.reset();">Clear</button>

<button type="submit" id="closeBtn" name="submit" value="close" class="btn k-button" data-dismiss="modal">Close</button>

</div>

}

I need to be able to clear the validation messages on for eg. modal window close or a clear button.

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" id="Name_validationMessage" role="alert" data-valmsg-for="Name" data-for="Name"><span class="k-icon k-i-warning"> </span> Name is required</span>

How can I get the error messages cleared out?

Thanks a lot

General Discussions

answered on 24 Sep 2019

4 answers

73 views

Editor rendered different after `Convert to Telerik application`.

Hi There,

In our original ASP.NET MVC 5 application, the following editor (in the code box below) was a dropdown control with three states: `Not set`, `true` and `false`.

After converting the VStudio solution into a Telerik application we got the two states checkbox in the attached image. Why?

Thanks,

Alberto

<div class="form-group">

@Html.LabelFor(m => m.validated, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.EditorFor(model => model.validated, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.validated)

</div>

General Discussions

answered on 20 Sep 2019

8 answers

8.2K+ views

Nuget package restore error on build server

so I've followed the instructions here:

https://docs.telerik.com/devtools/aspnet-ajax/installation/installing-the-telerik-controls-from-nuget-package

I've added my credentials in clear text. (note we check in a nuget.config with the solution(needed for other sources and solution configuration)

locally everything works.

on the build server we get these errors pulling from telerik source:

:45 Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Westwind.Utilities'&semVerLevel=2.0.0'. 09:47:45 The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

the build server is using a command line nuget restore command to restore these files

Installer and VS Extensions

answered on 19 Sep 2019

4 answers

126 views

Tooltip Template background not wide enough

Pie chart with a tooltip that uses a template. The tooltip has a backgound color that is not wide enough to cover all the text in the label. See attached image.

It doesn't appear there is a width property that I could increase. Suggestions?

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))

Chart

answered on 17 Sep 2019

2 answers

1.8K+ views

Grid loading spinners

Hi,

I have a standard grid and while loading the data, multiple spinner are also displayed (see attachment).

Any idea how I can get rid of it? I believe is attaching a spinner for every data row or so, I don't know why.

Thanks

Grid

answered on 17 Sep 2019

5 answers

218 views

"Complex" object sent to Chart

In all of the examples I have seen, lets just take an area chart for example, the data sent to the chart is a simple list of values. So for instance you have the ElectricityProduction class with data points for Solar, Hydro, etc and the category (Year) is sent with it. The chart then is defined as:

@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()

The datasource is defined as:

.DataSource(ds => ds.Read(read => read.Action("_SpainElectricityProduction", "Area_Charts")))

The action returns a collection of ElectricityProduction objects.

I am trying to use the following class that has a property which is a collection of data points and then another property with the points I want on the x-Axis. In my case there can be a thousand points but I don't want to show a thousand ticks on my graph. I want to be able to customize which points I use for tick mark. So my class is as follows:

public class DailyPerformanceChart

{

private List<string> _months;

public List<AccountRunningPerformance> RunningPerformanceValues;

public List<string> MonthsForAxis {

get

{

return _months;

}

public class AccountRunningPerformance

{

public string Date {get; set;}

public decimal Value{ get; set; }

}

My Kendo Chart is defined as:

@(Html.Kendo().Chart<DailyPerformanceChart>()

.Name("chartRunningPerformance")

.Title("Growth of $10k")

.ChartArea(chartArea => chartArea

.Background("transparent")

)

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Area().Line(line => line.Style(ChartAreaStyle.Smooth))

)

.DataSource(ds => ds.Read(read => read.Action("RunningPerformanceData", "Account").Data("sendAccountID")))

.Series(series =>

{

series.Area(model => model.RunningPerformanceValues).Name("Account").CategoryField("Date");

})

)

So the read action returns a DailyPerformanceChart filled with a collection of plot points (RunningPerformanceValues) and a collection of Dates to plot on x-axis (MonthsForXAxis).

What I can't figure out is how to code the series to look at model.RunningPerformanceValues as the plot points, using Date as X and value as Y and then setting the CategoryAxis to use the model.MonthsForAxis.

Hopefully this is enough information to explain my issue.

Chart

answered on 16 Sep 2019

12 answers

882 views

2019 R1 Grid Stack Overflow on Template columns

After upgrading to 2019 R1, grid template columns that used to work are no longer working. I am getting a stack overflow error. I believe that I have updated all of my files appropriately. Is anyone else having this problem?

columns.Template(@<text></text>)

.ClientTemplate("<button class=\"k-button\" name=\"groupBtn\" onclick=\"EditGroups('#=Id#')\"><span class='k-icon k-i-edit'></span></button>")
.HeaderHtmlAttributes(App.HdrAttr)
.HtmlAttributes(App.BtnAttr)
.Title("Districts");

Grid

answered on 14 Sep 2019

2 answers

2.2K+ views

Setting Focus to the First Kendo Control (DropDownList or Textbox)

We have a number of pages that execute a common javascript function that sets the first kendo control to have focus. When the first control is a text box all browsers are setting focus when the page loads. When the first control is a dropdownlist, IE works but Chrome and FireFox (FF) are not setting the focus to the dropdownlist. Here is the javascript for the focus.

$(document).ready(function () {
focusFirstElement(formId);
});
function focusFirstElement(formId) {
$(formId).find('.editor-control:visible:enabled:not([readonly]):first').focus().select();
}

It seems that the dropdownlist input tag is styled to "display: none" which I could see then why Chrome and FF do not find the control with the current jquery selector (not sure why IE works). Currently our solution is to have every page set the focus to the desired control, but we were looking for a common javascript to set the focus to first control that is enabled, visible, and not read only.

Any ideas? Is this possible with the kendo controls?

DropDownList

answered on 13 Sep 2019