Questions on UI for ASP.NET MVC Forum

3 answers

197 views

Hello,
I try to implement dynamic change of series in chart by javascript, but they just disappear.

Build chart ASP.NET MVC Razor:

<div id="chartWrapper"><br> @{<br> var x = new List<object>();<br

>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 1 });<

br

>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 3 });<

br

>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 2 });<

br

>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<

br> var y = new List<object>();<br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 0 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 3 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:10:00.000"), Value = 1 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:20:00.000"), Value = 3 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:30:00.000"), Value = 2 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 3 });<

br

>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<

br> var z = new List<object>();<br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 6 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 1 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:05:00.000"), Value = 2 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:10:00.000"), Value = 3 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:15:00.000"), Value = 4 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:20:00.000"), Value = 5 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:25:00.000"), Value = 4 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:30:00.000"), Value = 3 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 2 });<

br

>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<

br> }<br> <div class="demo-section k-content wide"><br> @(Html.Kendo().Chart()<br> .Name("chartTest")<br> .HtmlAttributes(new { style = "height: 550px; width: 700px; z-index: 0;" })<br> .Title("test")<br> .Legend(legend => legend.Position(ChartLegendPosition.Top))<br> .SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(true))<br> .PlotArea(area => area.Background("#f0f0f0").Opacity(0.1))<br> .Series(series =><br> {<br

>                          series.Line(x).CategoryField("Dt").Field("Value").Name("X").Color("#F00").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<

br

>                          series.Line(y).CategoryField("Dt").Field("Value").Name("Y").Color("#0F0").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<

br

>                          series.Line(z).CategoryField("Dt").Field("Value").Name("Z").Color("#00F").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<

br> })<br> .CategoryAxis(axis => axis<br> .Date()<br> .BaseUnit(ChartAxisBaseUnit.Minutes)<br

>                          .Labels(labels => labels.DateFormats(formats => formats.Hours("HH:mm")).Rotation(-45).Step(60))<

br> .MinorGridLines(lines => lines.Visible(false))<br> .MinorTicks(t => t.Step(60).Visible(false))<br> .MajorGridLines(lines => lines.Step(60).Visible(true))<br> .MajorTicks(t => t.Step(60).Visible(true))<br> .Crosshair(c => c.Visible(true))<br> .PlotBands(bands =><br> {<br

>                              bands.Add().From(DateTime.Parse("2017-01-01 01:00:00.000")).To(DateTime.Parse("2017-01-01 02:08:00.000")).Color("#b0e1fc").Opacity(0.2);<

br> })<br> )<br> .ValueAxis(axis => axis<br> .Numeric()<br> .Line(line => line.Visible(true))<br> .MinorGridLines(lines => lines.Visible(false))<br> .MinorTicks(t => t.Step(2).Visible(false))<br> .MajorGridLines(lines => lines.Step(1).Visible(true))<br> .MajorTicks(t => t.Step(1).Visible(true))<br> )<br> )<br> <br> </div><br> </div>

Javascrip that erase series:

var chart = $("#chartTest").data("kendoChart");<br>chart.refresh();<br>

In my case chart.refresh(); - just clear data, I try to change chart.options.series to new data with the same result, there is no series after refresh.

Chart

answered on 02 Jun 2017

1 answer

93 views

Selecting Filtered Data

Is there a json/jscript function to select the filtered data when using the spreadsheet. I'm trying to find a way to limit the data that has to get serialized when I'm doing updates. Here's my Save function. I'm looking for a way to potentially replace the spreadsheetData with the filtered data set instead of the entire bound data set.

function Save_onClick() {

var staticNotification = $("#staticNotification").data("kendoNotification");

staticNotification.show(" Updating data...");

var dataSource = $("#spreadsheet").data("kendoSpreadsheet").activeSheet().dataSource;

var spreadsheetData = dataSource._data;

if (spreadsheetData) {

$.ajax({

type: "POST",

url: '@Url.Action("Grid_Update", "Spreadsheet")',

contentType: "application/json; charset=utf-8",

data: JSON.stringify({ datum: spreadsheetData, moduleId: @Model.TheModule.Id }),

dataType: "json",

success: function (result) {

if (result.status == "Success") {

$(".validation-summary-valid").text(result.message);

staticNotification.hide();

} else {

}

});

}

Thanks,

Neil

Spreadsheet

answered on 02 Jun 2017

2 answers

525 views

MultiSelect dataSource Read before Grid Edit Event

I have a grid and a popup editor. One column of the grid is a list of objects and it is handled by a multiselect in the editor window. The multiselect list of values depends on the grid row selected for edit, so I cannot bind a list to the multiselect until the grid Edit button click. I am setting the value I need in the grid Edit event and the muitlselect dataSource Read().Data() calls a function to get the value from the edited row. The issue I am having is the multiselect is being bound BEFORE the grid edit event fires, so the Read().Data() call returns a null value and the controller action fails. Can anyone suggest how to fix this or suggest an alternative? Thanks!

To restate the problem with reference to the code below: the Data function of the multiselect "farmIdForSelectedGrouping" which returns the value of "farmId" is called BEFORE the "farmId is set in the Grid Edit event handler "onWipGroupingGridEdit"

View with Grid:

<script type="text/kendo" id="bmpListTemplate">

<ul class="horizontalList">

#for(var i = 0; i< data.length; i++){#

<li class="horizontalList">#:data[i].BmpNumber#</li>

#}#

</ul>

</script>

<script type="text/javascript">

var farmId;

var bmpTemplate = kendo.template($("#bmpListTemplate").html(), { useWithBlock: false })

function groupingBmpListChange(e) {

var row = this.element.closest("tr"),

model = $("#WipGroupingGrid").data("kendoGrid").dataItem(row);

model.set("MiniBmpList", this.dataItems());

}

// function called from multiselect dataSource.Read().Data()

function farmIdForSelectedGrouping() {

return farmId;

}

function onWipGroupingGridEdit(e) {

debugger;

grouping = e.model;

farmId = e.model.FarmId;

}

</script>

@(Html.Kendo().Grid<WipGroupingViewModel>() .Name("WipGroupingGrid") (the rest of the Grid definition) .Events(e => { e.Edit("onWipGroupingGridEdit"); }) )

View for popup:

@model WapTool.UIModel.ViewModel.Wip.WipGroupingViewModel

<div class="pad-left">

<table id="wipGroupingTable">

<tbody >

(other rows left out for brevity)

<tr>

<td colspan="3">

<div style="font-size: .8rem">

@(Html.Kendo().MultiSelectFor(m => m.MiniBmpList)

.Name("GroupingBmpListMultiSelect")

.DataValueField("Id")

.DataTextField("BmpNumber")

.Events(e => e.Change("groupingBmpListChange"))

.DataSource(d =>

{

d.Custom()

.Type("aspnetmvc-ajax")

.Transport(t =>

{

t.Read(r =>

{

r.Action("FarmBmps", "WipGrouping");

r.Data("farmIdForSelectedGrouping");

r.DataType("json");

});

})

.ServerFiltering(true);

})

.Value(Model.MiniBmpList)

)

</div>

</td>

</tr>

</tbody>

</table>

</div>

MultiSelect

answered on 02 Jun 2017

2 answers

97 views

Assemebly Management

Hi

I need Access to the server side types like RecurrenceRange etc I am not using a standard MVC project this is actually a microservice (using the service fabric sdk) that will process the saved schedule in the back end.

What is the safest way to manage the required assemblies in a fashion that will be functional on local dev machines and our build server?

Scheduler

answered on 01 Jun 2017

1 answer

127 views

Excel with different datasource

I have a grid (MVC) that displays a summary list, but when I Export to Excel I would like to use a different datasource that has detail information

when I use the ProxyUrl, it still takes the gridDatasource and when I use forceProxy(true) the post api method is called and data is retrieved, but I get the error

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Currently I am returning a model, but this seems to need to be some sort of Styling formatting to convert into a excel file to open.

What do I return in the API to allow the List<model> to open in Excel

Grid

answered on 01 Jun 2017

2 answers

113 views

Chart bars getting clipped

I have been trying to create a Tornado style graph in Telerik UI but have been having some issues as there is no immediate support for them. My best bet so far is to create a Ranged Bar graph and hack it slightly to the desired effect. By using the Gap and Spacing settings I am getting the look but its not rendering quite right, the main issue is the top and bottom bars are clipped.

Any thoughts on how to get around this greatly appreciated!

Thanks

Code:

@(Html.Kendo().Chart()
.Name("Tornado")
.Title("My First Tornado")
.Legend(legend => legend
.Visible(false)
)

.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(defaults =>
{
defaults.RangeBar().Gap(-1);
defaults.RangeBar().RangeBarSeries.Spacing = 2;
defaults.RangeBar().Border(b => b.Color("#000000"));

})
.Series(series =>
{
series.RangeBar(new double[][] { new double[] { 136, 320 }, new double[] { 136, 244 }, new double[] { 136, 283 } }).Name("Sensitivities");
series.RangeBar(new double[][] { new double[] { 130, -171 }, new double[] { 130, -74 }, new double[] { 130, 40 }, new double[] { 130, 3 } }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Color("#880000")
.Line(l => {
l.Visible(true);
l.Width(10);
l.DashType(ChartDashType.Solid);
}).MinorTicks(t =>
{
t.Visible(false);

}).MajorTicks( t =>
{
t.Visible(false);
}))
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories("Price 2, 7 ($/mmbtu)", "Resources 5, 10 (mmboe)", "Capex 1250, 1588 ($m)", "Penalties", "Tr 4 Price Structure")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
.AxisCrossingValue(133, int.MinValue)
.MajorGridLines(lines => lines.Visible(true))

)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)

Chart

answered on 01 Jun 2017

1 answer

171 views

Font Awsome Icons not show anymore in title bar

we were using font awesome icons on windows title bars. after upgrade to last kendo version, it doesn't work anymore

sintax was --- modal.setOptions({
modal: true,
width: "45%",
height: "55%",
minHeight: 440,
title: "<span class='fa fa-info'></span> About..",
actions: ["Minimize", "Maximize", "Close"],
});

Window

answered on 01 Jun 2017

1 answer

361 views

TreeView error while attempting to append a node

I am attempting to write the onDrop event:

when I do a drop over I get the following error:

kendo.all.js:78326
Uncaught TypeError: t.children is not a function
at kendo.all.js:78326
at init.append (kendo.all.js:79643)
at init.onTreeDrop (Index:497)
at init.trigger (kendo.all.js:124)
at Object.drop (kendo.all.js:78557)
at init.dragend (kendo.all.js:78269)
at init.i (jquery-1.10.2.min.js:21)
at init.trigger (kendo.all.js:124)
at init._trigger (kendo.all.js:23904)
at init._end (kendo.all.js:23881)

when I follow the error to kendo.all.js:78326 the object has node.children. My own Model has a Children property. Perhaps the two "children" are conflicting?

Index:497 Unc

aught TypeError: t.children is not a function at kendo.all.min.js:66 at init.append (kendo.all.min.js:67) at init.onTreeDrop (Index:497) at init.trigger (kendo.all.min.js:25) at Object.drop (kendo.all.min.js:67) at init.dragend (kendo.all.min.js:66) at init.i (jquery-1.10.2.min.js:21) at init.trigger (kendo.all.min.js:25) at init._trigger (kendo.all.min.js:36) at init._end (kendo.all.min.js:36)

Index:497 Uncaught TypeError: t.children is not a function at kendo.all.min.js:66 at init.append (kendo.all.min.js:67) at init.onTreeDrop (Index:497) at init.trigger (kendo.all.min.js:25) at Object.drop (kendo.all.min.js:67) at init.dragend (kendo.all.min.js:66) at init.i (jquery-1.10.2.min.js:21) at init.trigger (kendo.all.min.js:25) at init._trigger (kendo.all.min.js:36) at init._end (kendo.all.min.js:36)

TreeView

answered on 01 Jun 2017

3 answers

212 views

NumericTextBox in Detail Row

Hello,

I'm currently trying to implement an ASP.NET MVC Grid that hosts products and displays additional product information via detail rows. The additional information in the detail row is depending on the product group (e.g. products of productgroup 1 should display additonal information a, b and c and products of productgroup 2 should display additonal information d, e and f). I tried to implement this using ClientDetailTemplateId combined with Partial Views:

<script id="template" type="text/html">

# if(Productgroup == "Productgroup1") { #

@{ Html.RenderPartial("Partial/Productgroup1View"); }

# } else if(Productgroup == "Productgroup2") { #

@{ Html.RenderPartial("Partial/Productgroup2View"); }

# } else { #

@{ Html.RenderPartial("Partial/DefaultView"); }

# } #

</script>

In the partial views in want to use a NumericTextBox to display product information like:

@(Html.Kendo().NumericTextBox()

.Value("#= NumericProductProperty1 #")

.Name("NumericProductProperty1"))

As the Value property of a numeric textbox needs a decimal this is not working.

Is there any way to solve my problem? Is there a possibility to use early bound properties in client templates? In general: Is ClientTemplateId the recommended way to implement my requirements?

I tried to solve my problem using a server-side DetailTemplate but this is not working with an Ajax datasource.

Any help is appreciated!

Regards

Raphael

Grid

answered on 01 Jun 2017

13 answers

3.0K+ views

confirm modal window when deleting a row from grid

Hello,
How can i add a confirm modal window when deleting a row from the grid?
i was inspired by this example,
http://jsfiddle.net/Xtreu/ because of the gray colors that fits with the default theme from kendo ui.
but because i am not using it in a form,i do not know how to make it modal.

Regards,
Daniel

Grid

answered on 01 Jun 2017