Questions on UI for ASP.NET MVC Forum

1 answer

100 views

I am using a grid that is inside a content pane for a single page application website. My problem is that once I put the grid inside the Dojo ExpandoPane with splitter:true for resizing capability, I lose the sticky column headers when I scroll down.

Here's the HTML I'm using for the grid inside the ExpandoPane... (grid-container is inside a BorderContainer)

And the css...

#grid-container {
padding: 0;
height: 40%;
}

#grid {
height: auto;
width: 100%;
display: inline-table;
}

And populating the grid...

$("#grid").kendoGrid({
columns: columns,
navigatable: true,
dataSource: results
});

I can get a grid that works as intended if I fix the grid height to 100% as shown below, but I lose the nice resize capability of the ExpandoPane, plus you have to scroll all the way to the right of the grid for the vertical scrollbar.

#grid {
height: 100%;
width: 100%;
display: inline-table;
}

So is there any way I can have the resize functionality while retaining the sticky column headers?

Grid

answered on 18 May 2015

3 answers

96 views

Send more data with the ImageBrowser read/thumbnail...

Hi,

I'm trying to implement an imagebrowser and I want to have one controller for several editors with imageBrowser. but I want to use different root in each one.

how can I make the "path" send a prefix with the file name?

or how can I send more data with the read request (or any other request the imageBrowser allow)?

Thanks

Editor

answered on 18 May 2015

6 answers

557 views

Sparkline chart in a grid column

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

73 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

275 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

92 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

74 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

507 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

160 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