Questions on UI for ASP.NET MVC Forum

2 answers

305 views

Problem creating multi-series line charts with local data

Using Kendo UI for ASP.NET MVC, I am creating and passing in a Model that contains a collection of objects (called ChartSeries) that has fields for Color, SeriesName, and a collection of a second class (ChartSeriesValue) which contains fields Value, Date. I am trying to create a line chart using this local data with a dynamic number of series. Using a foreach statement, I can get the different series values plotted, but am unable to get the Dates to display using CategoryAxis. Will I have to go the route of using DataSource to group the flattened data, or is it possible to accomplish this using localdata?

Here are the chart-related classes I am using:

public class ChartSeries

{

public string SeriesName { get; set; }

public string ValueType { get; set; }

public string HexColor { get; set; }

public IList<ChartSeriesValue> ChartSeriesValues { get; set; }

}

public class ChartSeriesValue

{

public decimal? Value { get; set; }

public DateTime Effective { get; set; }

}

Thus far, I have been able to get either the lines with proper values, or just the X-Axis date labels to display, but not both. Here's my current attempt that displays proper line series data without X-Axis labels:

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

.Name("myChart_" + Model.MyChart.Id)

.Title(Model.MyChart.Name)

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.ChartArea(chartArea => chartArea

.Background("transparent")

.Width(250)

.Height(250)

)

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Line().Style(ChartLineStyle.Smooth)

)

.Series(series =>

{

if (!Model.ChartSeriesList.IsNullOrEmpty())

{

foreach (var metSeries in Model.ChartSeriesList)

{

if (!metSeries.ChartSeriesValues.IsNullOrEmpty())

{

series.Line(metSeries.ChartSeriesValues)

.Field("Value")

.Name(metSeries.SeriesName)

.Color(metSeries.HexColor);

}

})

.CategoryAxis(axis => axis

.Categories(x => x.Effective.Date)

.Name("Effective Date")

//.Name("Effective")

//.MajorGridLines(lines => lines.Visible(true))

//.Date().BaseUnit(ChartAxisBaseUnit.Months)

.Labels(labels => labels.Visible(true))

.Color("Red")//.Rotation(-60))

//.Type(ChartCategoryAxisType.Date)

)

))

Please let me know if you need further clarification. Thanks!

Chart

answered on 02 Mar 2016

3 answers

823 views

Disable Mouseover Highlight For Single Grid

I have a very simple grid. For this grid only is there a way to disable the row hover highlight? I want it everwhere else, just not for this grid.

@(Html.Kendo().Grid<SalesRepSummaryItem>()
.Name("grid")
.NoRecords()
.Sortable()
.Columns(columns =>
{
columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesRep", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))

Grid

answered on 01 Mar 2016

3 answers

85 views

Customize the TimeLine Series Bar

I am evaluating the Scheduler Components, specifically the TimeLine mode.

Does this component allow me to create an event that is comprised of smaller events? For example, I have a Process comprised of Steps. The Steps also have a Start/Stop Time.

I was wondering if TimeLine would allow me to customize the Series Bar so that I could display the Steps Inside of the Process?

Does that make sense?

Chuck

Scheduler

answered on 01 Mar 2016

4 answers

143 views

Custom column not working

I'm trying to fill a column of the my grid with images from the Content/images folder of the project, but for some reason the column doesn't display any content.

Since maybe I wrote the path in a wrong way, I tried to follow an example of the web with only some text, without any luck.

This is my custom column:

columns.Template(@<text>
custom content here, which is not related to the data
</text>).Title("Column Title");

I'm using Ajax binding, and because of that columns.ClienteTemplate is not an option (I need to use aggregates, which is not possible when Server binding.

This is my data source (abreviatted):

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
)

Any help will be really appreciated.

Grid

answered on 29 Feb 2016

3 answers

133 views

Hierarchical grid row expansion and row selection?

With a hierarchical grid and row selection. Can I preserve the row selection when expanding a hierarchical grid row?

Example:

There is a grid with five rows in it. One or more rows contain hierarchical grids present (rows 2 and 5). The user has selected rows one or more rows (1 and 3). If the user clicks the hierarchical grid row expansion icon of row 2 the selection of rows 1 and 3 are lost.

Is there a way to prevent this default behavior?

Grid

answered on 29 Feb 2016

2 answers

477 views

Error Handling in DetailsTemplate Grid

I have a sub-grid in a details template, that allows records to be inserted and deleted. I can put an error handler on the datasource, which will show an error message if the action fails, however as the grid name is dynamically generated, I can't see a way to call preventdefault(), to stop the failed inserts / deletes being displayed in the grid.

How can I get the grid name to call the preventDefault method?

Grid:-

<script id="subdetailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<EVASLogicLibrary.UserDirectorateMap>()

.Name("MapGrid_#=ID#")

.Columns(columns =>

{

columns.Bound(o => o.ID).Title("ID");

columns.ForeignKey(p => p.DirectorateID, (System.Collections.IEnumerable)ViewData["directorates"], "ID", "DirectorateName").Title("Directorate").Width(200);

//columns.Bound(o => o.UserID).Title("User");

columns.Command(command => { command.Destroy(); command.Edit(); });

})

.Events(e=>e.DataBound("gridBind"))

.ToolBar(tb => tb.Create())

.Editable(e=>e.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Events(e=>e.Error("Suberror"))

.Model(m=>{

m.Id(p => p.ID);

m.Field(p => p.ID).Editable(false);

})

.Read(read => read.Action("RD_Maps", "Users", new { UserId = "#= ID #" }))

.Create(u=>u.Action("InsertMap", "Users", new { UId = "#= ID #" }))

.Update(u => u.Action("InsertMap", "Users"))

.Destroy(u => u.Action("DeleteMap", "Users"))

)

.Pageable(p => p.Refresh(true))

.ToClientTemplate()

)

</script>

Error handler:-

function Suberror(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

And the main grid error handler (that I want to replicate the functionality of:-

function error(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

var grid = $("#Grid").data("kendoGrid");

grid.one("dataBinding", function (e) {

e.preventDefault(); // cancel grid rebind if error occurs

});

alert(message);

}

Thanks

Grid

answered on 29 Feb 2016

1 answer

140 views

limitation?

Hi,

We are currently using our own calculations by using JavaScript and Kendo Grid. Since it is written by us with a lot of validations, it hurts the performance and creates bugs. I found Kendo has Spreadsheet control and I like to give it a try, I have already found some answers but I still have a lot of questions which I cannot find. I wonder if you can help me with those answers.

1. Can we move worksheet bar to the top?

2. Can we set a default worksheet to open up with?

2. Can we lock all features but only open "add row" to the user?

3. Can we add a drop-down list to one column of cells?

4. can it handle different date/time format based on the user culture?

5. can we lock columns so users cannot modify those columns?

6. can we pre-define the formula and users cannot change it?

7. can we change the column header name instead of "A" "B" "C" ...

thanks a lot!

Spreadsheet

answered on 29 Feb 2016

3 answers

73 views

TabStrip Name does not get replaced

In the attached picture, the id is equal to "tabStrip_#=Name#", but the #=Name# portion should be replaced with the name from the ViewModel.

<div class="row " style="max-width: 98%">
<div class="columns">
<div class="full-width">
@(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>
()
.Name("grid")
.HtmlAttributes(new {style = "table-layout: fixed, height: 550px;"})
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(1000);
columns.Bound(c => c.Name).Width(2000);
columns.Bound(c => c.Email).Width(5000);
columns.Bound(c => c.Ap).Width(5000);
columns.Bound(c => c.Bp).Width(5000);
columns.Bound(c => c.Cp).Width(5000);
columns.Bound(c => c.Dp).Width(5000);
columns.Bound(c => c.Ep).Width(5000);
columns.Bound(c => c.Fp).Width(200);
})
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("T_Read", "Test"))
)
//.Groupable()
.Sortable()
)
</div>
</div>
</div>

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Name#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>{
items.Add().Text("Contact Person").Content("Jeremy");
}
).ToClientTemplate())
</script>

TabStrip

answered on 29 Feb 2016

1 answer

347 views

DataSourceResult Help

Hello,

I was wondering if there was any way to add conditions to a datasourcereulst like "Where" and"Union"? Here is my controller code.

public ActionResult tbl_vessels_Read([DataSourceRequest]DataSourceRequest request, decimal[] param_bhp, decimal[] param_deck)

{

IEnumerable<tbl_vessels> tbl_vessels = db.tbl_vessels;

DataSourceResult result = tbl_vessels.ToDataSourceResult(request,

c => new tbl_vessels

{

vessel_idx = c.vessel_idx,

vessel_name = c.vessel_name,

spotlist_dp = c.spotlist_dp,

spotlist_bhp = c.spotlist_bhp,

spotlist_deck = c.spotlist_deck,

spotlist_bp = c.spotlist_bp,

spotlist_oilrec = c.spotlist_oilrec,

spotlist_fifi = c.spotlist_fifi,

spotlist_rov = c.spotlist_rov,

charterer_info = c.charterer_info

});

JsonResult data;

if (param_bhp == null && param_deck == null)

{

data = Json(tbl_vessels);

}

else

{

data = Json(tbl_vessels.Where(

w => w.spotlist_bhp > param_bhp[0] &&

w.spotlist_bhp < param_bhp[1] &&

w.spotlist_deck > param_deck[0] &&

w.spotlist_deck < param_deck[1]

).ToDataSourceResult(request));

}

return data;

}

As you can see I also have sliders which means that my dataresults need to be enumerable, IQueryable isn't allowed on array. So how can I add some conditions to the DataSourseResult like "Where" etc??

Thanks

Grid

answered on 29 Feb 2016

3 answers

92 views

TreeView intellisense not shown

Hi,

I'm using Telerik Grid with MVC6 and Razor and It works great. However, when I tried to use TreeView, it is not available in intellisence. Same thing for DropDownList. Do you know if I missed something?

Thank you

TreeView

answered on 26 Feb 2016