Questions on UI for ASP.NET MVC Forum

1 answer

158 views

Hi

We are using the grid getOptions/setOptions to persist the users filters, column settings etc to a cookie

An issue we now have is it seems to persist everything including the datasource urls for read/update. This is an issue for us as we use custom MVC routes which look something like this: /jobs/1234/deliverable so the id is embedded into the url. When this is persisted the grid ends up querying data for a previously used Id.

What is the best way to prevent persisting the datasource url information and always use the URL as defined in the html page?

We have managed to get it working by doing this:

function loadGridState(grid, sessionKey) {

var options = localStorage[sessionKey];

if (options) {

var parsedOptions = JSON.parse(options);

parsedOptions.dataSource.transport.read = grid.dataSource.transport.options.read; //dont persist datasource urls

grid.setOptions(parsedOptions);

}

Is there a better way to do this and is there anything else we should be preventing (e.g. update, delete) if this were to be a generic function for the entire project?

One other strange we noticed is the object stored from getOptions is a slightly different structure to that directly on the grid.

E.g. the Grid has dataSource.transport.options.read but the getOptions stores dataSource.transport.read

Thanks

Andy

Grid

answered on 24 Apr 2015

1 answer

322 views

Limit displayed Multiselect items

I would like to limit the number of items I show in the multiselect control. Anyone have any examples of this? Perhaps with an ellipse or an expander of some sort.

MultiSelect

answered on 23 Apr 2015

2 answers

185 views

Edit Read Only columns with javascript

Hi,

I have a few columns defined that I don't want the user to change.

When they click a button, it calls a service which returns data. I want to update the columns with this data.

The problem is, if they're set to read-only, I can't change them, and the databound event never fires

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

.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.SnapshotDefinitionID);
//model.Field(p => p.NextSnapshotQueueID).Editable(false);
//model.Field(p => p.NextSnapshotQueueTime).Editable(false);
model.Field(p => p.LastSnapshotQueueID).Editable(false);
model.Field(p => p.LastSnapshotQueueTime).Editable(false);

model.Field(p => p.NextScheduleID).Editable(false);
model.Field(p => p.NextScheduleTime).Editable(false);
model.Field(p => p.LastScheduleID).Editable(false);
model.Field(p => p.LastScheduleTime).Editable(false);

model.Field(p => p.SnapshotQueueCount).Editable(false);
model.Field(p => p.ScheduleCount).Editable(false);

//model.Field(p => p.Client).DefaultValue(
// ViewData["defaultClient"] as DropDownListViewModel);
})
.Create(update => update.Action("BulkCreate", "SnapshotDefinition"))
.Read(read => read.Action("BulkRead", "SnapshotDefinition", new { clientId = @Request["ClientID"], snapshotDefinitionID = @Request["SnapshotDefinitionID"] }))
.Update(update => update.Action("BulkUpdate", "SnapshotDefinition"))
.Destroy(update => update.Action("BulkDestroy", "SnapshotDefinition"))

Grid

answered on 23 Apr 2015

2 answers

197 views

Redirect to strongly typed view based on grid selection

When a user selects a row in my grid, I can get the dataItem from a button click as follows:

$("#viewApplicationBtn").on("click", function () {
var grid = $("#Grid").data("kendoGrid");
var gridData = grid.dataItem(grid.select());

What I would like to do from this point is post this back to my controller, let the MVC model binder map to my ViewModel, and then redirect to another view which is of that model type.

The roadblock I'm facing is that an ajax post won't accomplish this and I can't pass the properties in a Url.Action helper because there are too many

here is my ajax:

$.ajax({
type: "POST",
url: "@Url.Action("ValidateModel")",
datatype: "json",
contentType: "application/json",
data: JSON.stringify(gridData),
success: function(data) {
window.location.href = @Url.Action("Details", "GridController");
},
error: function(data) {
console.log("post failed");
}
});

So how can I use my grid selection to post to another view with a Model?

Grid

answered on 23 Apr 2015

6 answers

471 views

Possible IE Bug - Multi-Select drop-down Flicker

We have incorporated the MultiSelect control into our project and are experiencing strange behavior with the control. I wonder if others have complained of the same problem.

In IE, the drop-down list upon a mouse-click flickers real fast , as if the drop-down window is opening and closing almost instantly, basically forcing the user to click inside the container twice to display the list of items. Again this only appears to happen in IE, Firefox and Crrome seem to be working fine.

Is this a known issue or am I the first to report this?

MultiSelect

answered on 23 Apr 2015

14 answers

221 views

Bug with AppendTo

Hi all,

I'd like to report what I believe is a bug with the Window. When including the AppendTo method in a Window declaration, the Window will not resize properly if the element that is appended to is absolutely positioned with a top/bottom/left/right position.

Example case (untested, but taken from code where the bug was occurring):
View (Razor):

<div id="myDiv"></div>

@(Html.Kendo().Window()

.Draggable(true)

.Resizable()

.Width(300)

.Name("myWindow")

.AppendTo("myDiv")

.Content("some content here")

.Visible(false))

<button id="myBtn" onclick="showWindow();">Show</button>

CSS:

<style>

#myDiv {

position: absolute;

top: 200px;

right: 200px;

}

</style>

Javascript:

<script>

function showWindow() {

var window = $("#myWindow").data("kendoWindow");

window.open();

}

</script>

Thanks,
Jeff

Window

answered on 23 Apr 2015

3 answers

522 views

Leaving Grid in EDIT MODE when Using Custom errors and ModelState

I followed the example for Ajax custom errors and server side modelstate errors, however, the grid (inline editing) goes out of Edit Mode after my javascript error event is called.

We would like to leave the grid in error mode.

Not using .cancelChanges();

// javascript

function grid_error(e) {
var grid = $("#CPRProductLineGrid").data("kendoGrid");
var knotify = $("#popupNotification").data("kendoNotification");

if (e.errors) {
var message = "";

$.each(e.errors, function(key, value) {
if ('errors' in value) {
$.each(value.errors, function() {
message += this + "<br />";
});
}
});

knotify.show({
title: "Validation Error",
message: message
}, "error");

//grid.cancelChanges();

}
}

// controller

foreach (var item in validator.GetValidationErrors())
{
ModelState.AddModelError("GroupCode1", item);
}

return Json(ModelState.ToDataSourceResult());

Grid

answered on 23 Apr 2015

7 answers

493 views

Doubleclick and navigate to another view

We are using the paid version with the razor engine.

I am looking for an example of being able to doubleclick a gridrow, get the ID from a nonvisible column and pass that value to the controller.

Might I suggest that you add filtering (paid version/razor/html) to the forum. For beginners in MVC it is difficult to locate a relevane example/response.

Grid

answered on 23 Apr 2015

2 answers

257 views

Render Command Buttons on a Single Line

How do I prevent the command buttons from wrapping in the command column on each of the grid rows? I want them to render in a straight, horizontal line even if they extend past the edge of the grid.

like this:

+ ---------------------------------------------------------+

| column 1 | ... | column n | [btn1] [btn2] [btn3] [btn4] |

+ ---------------------------------------------------------+

instead of:

+ -------------------------------------------+

| column 1 | ... | column n | [btn1] [btn2] |

| | | | [btn3] [btn4] |

+ -------------------------------------------+

Grid