Questions on UI for ASP.NET MVC Forum

3 answers

304 views

Bind DateTimePicker to DataTimeOffset attribute

We have all our date fields in our Oracle DB defined as "Timestamp with Timezone". We use EF and LINQ to hydrate our VM from the DB. The VM gets populated correctly however when I try to bind a DateTimeOffset attribute to DateTimePicker component it fails.

Can you tell me what could I be doing incorrectly. If this is not supported does someone else have any suggestions that I can try.

Here is what I have so far

VM

[DisplayName("Inactivate Date")]

public DateTimeOffset? inactivateDate { get; set; }

[DisplayName("Inactivate Date")]public DateTimeOffset? inactivateDate { get; set; }
public DateTimeOffset? activateDate { get; set; }

[DisplayName("Energizing Date")]

public DateTimeOffset? energizingDate { get; set; }

View Template

<div class="form-group">

@Html.LabelFor(model => model.energizingDate, new { @class = "control-label col-xs-2" })

<div class="col-xs-2">

@Html.EditorFor(model => model.energizingDate)

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

</div>

<div class="col-xs-3">

<div class="form-group">

@Html.LabelFor(model => model.activateDate, new { @class = "control-label col-xs-4" })

<div class="col-xs-7">

@Html.EditorFor(model => model.activateDate)

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

</div>

<div class="col-xs-3">

<div class="form-group">

@Html.LabelFor(model => model.inactivateDate, new { @class = "control-label col-xs-4" })

<div class="col-xs-7">

@Html.EditorFor(model => model.inactivateDate)

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

</div>

DAO

var x = dao.CONNECTIVITY_UNIT

.Join(dao.OP_AREA_ORG, cu => cu.OP_AREA_CODE, oa => oa.OP_AREA_CODE, (cu, oa) => new { CONNECTIVITY_UNIT = cu, OP_AREA_ORG = oa })

.Where(w => w.CONNECTIVITY_UNIT.UNIT_TYPE.Equals("SUBSTATION"))

.Where(w => w.CONNECTIVITY_UNIT.IS_ACTIVE_FLAG.ToUpper().Equals("Y"))

.Where(w => w.CONNECTIVITY_UNIT.ABBR.ToUpper().Equals("BRA"))

.Select(c => new SubstationVM

{

connectivityUnitID = c.CONNECTIVITY_UNIT.CONNECTIVITY_UNIT_ID,

energizingDate = c.CONNECTIVITY_UNIT.ENERGIZING_DATE.Value.DateTime,

activateDate = c.CONNECTIVITY_UNIT.ACTIVATE_DATE.Value.DateTime,

//inactivateDate = c.CONNECTIVITY_UNIT.INACTIVATE_DATE.Value.DateTime,

updateTime = c.CONNECTIVITY_UNIT.UPDATE_TMSTMP

})

.OrderBy(o => o.substationABBR)

.ToList();

This fails when it has to find to the DateTimePicker component. I tried to bind it to plain old TextBox and it works fine.

What am I missing.

DatePicker

answered on 06 Jun 2017

5 answers

532 views

Grid buttons clicked make page scroll to the top in google chrome

Hello,

If I have a grid which fills more than the heigth of the screen, (if the grid doesn´t fill the whole height it works fine) for some reason when I click on the grids buttons it makes an annoying scroll to the top. It only happens in google chrome.

I attach a picture

Thank you

Grid

answered on 06 Jun 2017

5 answers

303 views

Searching with paging in telerik mvc grid

hi all,
Actually this is related to telerik mvc extension grid.In my telerik grid i have an search text box.i write something in text box and press enter,fire a java script function,from the function i call...ajaxrequest function of grid to rebind the grid for the search.That the simple process.
ok.suppose i am in last page in grid.then i write something in the search textbox and press enter,the search is ok.but the paging is not in correct position.i need to go to the first page in this situation...keypresss enter event is bellow

function ListSearch(keyCode, gridObj)
{
   window.CurrentList = gridObj;
   var id = '#' + $(gridObj).attr('id');
   var searchTxt = $(id + " .watermark-list-search").val();
   var searchList = $(id + " .watermark-list-search").attr('listtype');
   var filterid = $(id + " .watermark-list-search").attr('filterid');

   window.CurrentList.data("tGrid").ajaxRequest({ Name: searchTxt, Data: searchList, id: filterid });
}

i modified the code to include page in ajaxrequest like

window.CurrentList.data("tGrid").ajaxRequest({ Name: searchTxt, Data: searchList, id: filterid,page:1 });

it works i.e getting correct data from database but the current page is wrong and showing wrong status '31 to 60 out of 120 ' instead of '1 to 30 out of 20'

what is the process to make it correct?please let me know

Grid

answered on 05 Jun 2017

3 answers

235 views

dynamic change of series

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

134 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

577 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

130 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

153 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

147 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

207 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