Questions on UI for ASP.NET MVC Forum

1 answer

179 views

Kendo Grid is not showing properly during Visual Studio debugging.

Hi,

I am using the Kendo Grid with the datasource but for some reason the grid doesn't render properly during Visual Studio's Debugging option.

However, when I go and publish it to an IIS server, it will load up everything just fine.

I noticed that during the localhost instance, I am getting an "Uncaught ReferenceError: Kendo is not defined.

Is there somethign I am missing that is causing this as published, the grid works fine, but using the localhost instance through Visual Studio, the grid is showing up with errors?

General Discussions

answered on 24 Apr 2015

1 answer

321 views

Grid In-Line edit with AutoComplete results in [object Object]

I've got a Grid with a cell that has an editor template that contains an auto complete object.

When the edit for this cell is complete, the grid displays the data as "[object Object]".

If the user goes back and uses the auto complete to select a field, the correct string is passed back to the Grid from the Editor template, however the auto complete functionality becomes buggy. (no javascript errors are thrown)

Grid Code:

@(Html.Kendo().Grid<PendingBatchListingInput>()

.Name("PendingBatchListingInputGrid")

.Columns(c=>

{

c.Bound(a => a.InputDebtorName).Title("Debtor").EditorTemplateName("InputDebtorName") //Shows valued of [object Object] the first time it is edited, shows correct value if user goes back to edit cell again

})

.DataSource(ds => ds.Ajax()

.Model(m =>

{

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

})

.Create(create => create.Action("PendingBatchListingInputCreate", "PendingBatchListing"))

.Update(update => update.Action("PendingBatchListingInputUpdate", "PendingBatchListing"))

.Read(r => r.Action("PendingBatchListingInputRead", "PendingBatchListing")

.Data("getData")

.Type(HttpVerbs.Post))

.ServerOperation(false)

)

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

)

Editor Template Code:

@model object

<script>

function onAdditionalDataDebtorSearch() {

$('#InputDebtorName').data("kendoAutoComplete").list.width(500);

return {

debtorName: $("#InputDebtorName").val(),

clientId: null

};

}

</script>

@(Html.Kendo().AutoCompleteFor(m=>m)

.HighlightFirst(true)

.Filter(FilterType.StartsWith)

.Height(500)

.Placeholder("Select Debtor")

.DataTextField("Name")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("ReadDebtorSearch", "PendingBatchListing")

.Data("onAdditionalDataDebtorSearch");

})

.ServerFiltering(true);

})

.MinLength(5)

.Template(

"<span>" +

"#=data.Name# | #=data.City#, #=data.State#" +

"</span>"

)

Grid

answered on 24 Apr 2015

1 answer

125 views

Persist state - data source urls

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

292 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

157 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

168 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

401 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

170 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

464 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

435 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