Questions on UI for ASP.NET MVC Forum

6 answers

545 views

I am trying to put a sparkline bullet chart in one column of my grid, and I can't figure out how to pass in the data that is currently in my grid. Do you have an example of using a sparkline in a grid in this manner?

Here is what I currently have. However, 1) I had to hardcode the data as an example, since I have not yet figured out how to pass in the data, and 2) it doesn't work, as it's complaining there is a runtime error of an Invalid template

@(Html.Kendo().Grid<LabResult>(Model.LabResults)

.Name("grLabResult")

.Pageable()

.Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))

.Columns(columns => {

columns.Bound(a => a.Name);

columns.Bound(a => a.Value).ClientTemplate("#= Value # #= Unit #");

columns.Bound(a => a.Range);

columns.Bound(a => a.Unit).Visible(false);

columns.Bound(a => a.MaxValue).ClientTemplate(

Html.Kendo().Sparkline()

.Name("varSpark_#=LabResultId#")

.Type(SparklineType.Bullet)

.Series( series => series.Bullet(new double[]{70}))

.ValueAxis(axis => axis

.Numeric()

.Min(25)

.Max(75)

.PlotBands(bands =>

{

bands.Add().From(0).To(25).Color("#2890cc").Opacity(0.6);

bands.Add().From(25).To(75).Color("#2890cc").Opacity(0.8);

bands.Add().From(75).To(100).Color("#2890cc").Opacity(0.6);

})

)

.ToClientTemplate()

.ToHtmlString()

);

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(a => a.LabResultId);

})

.Events(events => events.Error("error_handler"))

.Sort(sorting => sorting.Add("Name"))

)

This was my attempt to pass in the data, which failed:

.Series( series => series.Bullet(new double[]{Double.Parse("#=Value#")}))

.ValueAxis(axis => axis

.Numeric()

.Min(Double.Parse("#=MinValue#"))

.Max(Double.Parse("#=MaxValue#"))

.PlotBands(bands =>

{

bands.Add().From(0).To(Double.Parse("#=MinValue#")).Color("#2890cc").Opacity(0.6);

bands.Add().From(Double.Parse("#=MinValue#")).To(Double.Parse("#=MaxValue#")).Color("#2890cc").Opacity(0.8);

bands.Add().From(Double.Parse("#=MaxValue#")).To(100).Color("#2890cc").Opacity(0.6);

})

)

Thanks for your help!

Grid

answered on 18 May 2015

1 answer

68 views

SplitView for MVC (not for mobile)

I am not looking for a mobile SplitView. I am looking for a mvc SplitView.

Please give me an idea how to do it? Thank you.

SplitView

answered on 18 May 2015

1 answer

268 views

Extend Agenda View to Display One Day at a Time

Is it possible to create a custom view that extends the agenda view to display only one day at time?

Scheduler

answered on 18 May 2015

1 answer

88 views

Dynamically created dynamic grids not refreshing

Hi,

I have a requirement for users to be able to select and add grids to a page without knowing the table schema beforehand.

I have a partial view to display a grid from any given data table using initial Server Binding with Ajax updates. When adding several of these grids to a view using Html.Action they work as expected.

However, when I add the above grids dynamically using an Ajax.BeginForm request the grids initially display correctly but any refreshes or page changes causes an error. The dynamically added grids are rendered differently (eg. missing data-role="grid") and they send HTTP GET requests instead of HTTP POST.

I've attached the Controller and Views I'm using for testing.

Grid

answered on 18 May 2015

1 answer

70 views

Grid Failing with Mono (GridEditMode.PopUp )

I have asked this question on Stackoverflow and got no answer. So hopefully I can get a bit more help in this forum.

When I add the following line to my Grid declaration:

.Editable(editable => editable.Mode(GridEditMode.PopUp))

I get the following error:

System.IO.FileNotFoundException

Could not load file or assembly 'System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' or one of its dependencies.

This error goes away when I do not try and edit via PopUp.

Mono does not support `System.Data.Entity`, and because of this there is no where in my solution where I register that.

There is also no reference to that library in my `web.conf` file.

Can someone please help me resolve this problem?

Grid

answered on 17 May 2015

2 answers

499 views

Icons on TreeView Node

I am using Method 2 for binding my data to a flat file as shown here:
Binding to a Flat Table

<div id="tree"></div>

<script>

var flatData = [

{ id: 1, parent: null, text: "Item 1" },

{ id: 2, parent: null, text: "Item 2" },

{ id: 3, parent: null, text: "Item 3" },

{ id: 4, parent: null, text: "Item 4" },

{ id: 5, parent: 1, text: "Item 1.1" },

{ id: 6, parent: 1, text: "Item 1.2" },

{ id: 7, parent: 1, text: "Item 1.3" },

{ id: 8, parent: 3, text: "Item 3.1" },

{ id: 9, parent: 3, text: "Item 3.2" },

{ id: 10, parent: 5, text: "Item 1.1.1" },

{ id: 11, parent: 5, text: "Item 1.1.2" },

{ id: 12, parent: 5, text: "Item 1.1.3" }

];

// tree for visualizing data

$("#tree").kendoTreeView({

dataSource: {

transport: {

read: function(options) {

var id = options.data.id || null;

options.success($.grep(flatData, function(x) {

return x.parent == id;

}));

}

},

schema: {

model: {

id: "id",

hasChildren: function(x) {

var id = x.id;

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

if (flatData[i].parent == id) {

return true;

}

return false;

}

})

</script>

Now, however, I need to add some icons to differentiate the kind of file (Folder, excel, PDF, etc)

I have found a series of icons that I think would work would work at:
jQuery icons styling example
I just am not sure how to add the desired icons (or their references) into the JSON or set the TreeView up to show them.

What I have found only shows how to hard code the data and the associated images. I need to get this all into the JSON for my app.

I have tried adding another JSON field called "image", but that does not seem to work.

So, how would I set it up and show it?

TIA,
Bob Mathis

TreeView

answered on 15 May 2015

1 answer

155 views

Combo box -Loading 4000 records

Currently we are using the kendo combo control to load values in one of the screen in the application. The problem is that the combo takes time to load the
values are there are around 4000 records to load.

1. Is it a problem to load 4000 records in the combo control?
2. Given this scenario, we would like to have pagination as part of combo where we would able to load say 50 records per page and then navigate between pages to fetch the subsequent records.

Let us know if it would be possible to build such a custom template.

Appreciate your help.

ComboBox

answered on 15 May 2015

1 answer

166 views

Adding alternate backgorund color

Hi Support,

Is it possible to add an alternate background color to a DropDownList control?

Thank you.

DropDownList

answered on 15 May 2015

3 answers

444 views

Kendo Grid Hyperlink is not working

Hello,

Please let me know what I am doing wrong. Thank you.

I go the error from hyperlink:

Unhandled exception at line 526, column 66 in Function code

0x800a1391 - JavaScript runtime error: 'PersonId' is undefined

If there is a handler for this exception, the program may be safely continued.

Grid

answered on 15 May 2015

4 answers

533 views

ColumnMenu how to show applied filter

How can I highlight that a filter has been applied to a column after I enable the option to choose columns using .ColumnMenu()

Refer to the attached screen shots No ColumnMenu Filter.png and No ColumnMenu Filter Applied.png when I don't have the .ColumnMenu() applied a user can visually see that a filter has been applied.

Below is the MVC Helper config for completeness:

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(f => f.FluidID).Width(50).Title("ID").Hidden();

columns.Bound(f => f.Name).Width(150).Title("Name");

columns.Bound(f => f.Code).Width(150).Title("Code");

columns.Bound(f => f.Grade).Width(150).Title("Grade");

columns.Bound(f => f.Manufacturer).Width(150).Title("Manufacturer");

})

.Deferred()

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Groupable()

.Pageable()

.Sortable()

//.ColumnMenu() <-- Once enabled, there is no visual cues to highlight that a filter is applied

.Scrollable(s => s.Height("auto"))

.Navigatable()

.Filterable()

.Events(e => e

.DataBound("grid_dataBound")

)

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.Read(read => read.Action("GetJsonData", "FluidKendo"))

)

Once I enable .ColumnMenu() the filtering options are contained in a submenu item and the user is unable to visually see if a column filter has been applied. Refer to ColumnMenu.png and ColumnMenu Filter Applied.png.

I want users to be able to choose columns and highlight when filtering is applied to columns. Is there any way I can achieve this?

Is there any other way I can enable grid column selection without enabling .ColumnMenu(). I have tried: http://stackoverflow.com/questions/13637475/how-to-show-kendo-grids-columnmenu-using-script but the grid .ColumnMenu() option needs to be enabled for this to work which defeats the purpose.

Maybe there is an options to show as text, what filter options have been applied, hook into an event?

Thanks,
Beau

Grid

answered on 15 May 2015