Questions on UI for ASP.NET MVC Forum

1 answer

212 views

Index Out Of Range Exception in GridBuilder

Hi ,
I've developed a few lines of code with ASP.NET MVC wrappers of Telerik
A Customer Entity with ID , Name , Rate
Entity Framework Code First Context
A Controller with this code :

public ActionResult Index()

{

return View();

}

public ActionResult Customers([DataSourceRequest] DataSourceRequest request)

{

var customers = Context.Customers.ToDataSourceResult(request);

return Json(customers);

}

and a view with this code

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

.Name("CustomersGrid")

.Columns(columns =>

{

columns.Bound(c => c.ID).Groupable(false);

columns.Bound(c => c.FName);

columns.Bound(c => c.LName);

columns.Bound(c => c.Rate);

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Customers", "Customer"))

)

when render of view finishes at the end of @HTML.Kendo
I give this exception

Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Line 19:         .Scrollable()
Line 20:         .Filterable()
Line 21:         .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Customers", "Customer"))
Line 22:     )
Line 23: )

[ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index]
   System.ThrowHelper.ThrowArgumentOutOfRangeException() +72
   System.Collections.ObjectModel.Collection`1.set_Item(Int32 index, T value) +10419142
   System.Web.Mvc.ControllerContext.get_RequestContext() +25
   Kendo.Mvc.UI.NavigatableExtensions.GenerateUrl(INavigatable navigatable, ViewContext viewContext, IUrlGenerator urlGenerator) +52
   Kendo.Mvc.UI.Fluent.CrudOperationBuilder.SetUrl() +81
   Kendo.Mvc.UI.Fluent.CrudOperationBuilder.Action(String actionName, String controllerName, Object routeValues) +66
   Kendo.Mvc.UI.Fluent.CrudOperationBuilder.Action(String actionName, String controllerName) +47
   ASP._Page_Views_Customer_Index_cshtml.<Execute>b__1(CrudOperationBuilder read) in c:\Users\a.rezaei\Desktop\MVCWebApp\MVCWebApp\Views\Customer\Index.cshtml:21
   Kendo.Mvc.UI.Fluent.AjaxDataSourceBuilderBase`2.Read(Action`1 configurator) +131
   ASP._Page_Views_Customer_Index_cshtml.<Execute>b__0(DataSourceBuilder`1 dataSource) in c:\Users\a.rezaei\Desktop\MVCWebApp\MVCWebApp\Views\Customer\Index.cshtml:21
   Kendo.Mvc.UI.Fluent.GridBuilder`1.DataSource(Action`1 configurator) +212
   ASP._Page_Views_Customer_Index_cshtml.Execute() in c:\Users\a.rezaei\Desktop\MVCWebApp\MVCWebApp\Views\Customer\Index.cshtml:7

Extra Info

Windows : 8 , Visual Studio Development Server , Visual Studio 2012 , .NET 4.5 , MVC 4 , Kendo UI MVC Wrappers v2012.2.710

thanks for your support

Grid

answered on 02 Oct 2012

1 answer

177 views

Entity with associations; grid not displaying.

Hello,

I have an entity with regular properties as well as navigation properties.

The grid fails to load anything If any item in the whole DataSourceResult has any of navigation properties populated (if any entity has has any other entity associated with it).

I do not want to use any of the data from the navigation properties in the grid, I want to only use the regular properties.

Controller:

public ActionResult GetPeopleData([DataSourceRequest] DataSourceRequest request)

{

return Json(db.People.ToDataSourceResult(request));

}

View:

@(Html.Kendo().Grid<Models.Person>()

.Name("PeopleGrid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Groupable(false).Visible(true);

columns.Bound(p => p.LastName);

columns.Bound(p => p.FirstName);

})

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetPeopleData", "People"))

)

.Events(events => events.Change("PeopleGrid_RowSelected"))

)

If I clear all the associated tables and just have the people table populated the grid works fine.

Anyone have any ideas?

Grid

answered on 01 Oct 2012

1 answer

250 views

Error: Object doesn't support property or method 'kendoGrid'

Delete me please, I figured it out.

Grid

answered on 01 Oct 2012

0 answers

278 views

how do I display status response next to file list?

I have an Upload control that works fine, except I want to show the user if their file was accepted or not. I've followed the Documentation example to show the alert message, but I don't want an alert popup - I want to display the message next to the file in the same way that the Cancel/Uploading buttons appear in the example, and the check mark appears. However, I'm extremely new to jQuery and don't understand how to go about that. It also doesn't make sense to me that no matter what I send, it is regarded as a success...
View:

@model Datamart.Models.FileSpec

@{

ViewBag.Title = "Upload Datamart File";

}

<h2>Upload Excel File</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

File must be less than 16MB and must be an Excel spreadsheet<br />

@(Html.Kendo().Upload()

.Name("files")

.ShowFileList(true)

.Multiple(true)

.Messages(msg => msg

.StatusUploaded("Response Status Goes Here?")

.StatusFailed("statusFAiled")

.StatusUploading("Uploading")

.Async(a => a

.AutoUpload(true)

.Save("Save","FileUpload")

)

.Events(e => e

.Success("onSuccess")

)

<div>

@Html.ActionLink("Back to List", "Index")

</div>

<script type="text/javascript">

function onSuccess(e) {

alert("Status: " + e.response.status);

}

</script>

Controller:

public ActionResult Save(IEnumerable<HttpPostedFileBase> files)

{

foreach (var file in files)

{

string UPLOADSDIRECTORY = Server.MapPath("~/App_Data/uploads");

// Verify that the user selected a file

if (file != null && file.ContentLength > 0)

{

// extract only the filename

var fileName = Path.GetFileName(file.FileName);

/* check the first three letters of the extension for xls - there are far too many endings for Excel to check all of them */

if (Path.GetExtension(file.FileName).Substring(1, 3) == "xls")

{

// store the file inside ~/App_Data/uploads folder

var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);

FileInfo fInfo = new FileInfo(path);

if (!(fInfo.Exists))

{

file.SaveAs(path);

var dataFile = new FileSpec { FileName = fileName };

db.FileSpec.Add(dataFile);

db.SaveChanges();

// if successful, then redirect to the Edit page so the user can fill in the tab name while it's still fresh in their mind

return Json(new { status = "OK" }, "text/plain");

}

// TODO: redirect to error message because the file already exists

return Json(new { status = "Overwritten" }, "text/plain");

}

// TODO: redirect to error message because the file was not an Excel file (as determined by extension)

return Json(new { status = "Rejected" }, "text/plain");

}

// default to Default status

return Json(new { status = "Default" }, "text/plain");

}

Upload

asked on 28 Sep 2012

0 answers

150 views

GridEditMode.PopUp jquery

my jquery is only working for the 1st editor, but is not recognized after this 1st editor is closed. Ideas? Thank you

Grid

asked on 28 Sep 2012

4 answers

138 views

Direction not implemented?

I don't see the dirction property on the MVC wrapped menu, do we lose functionality by using the MVC wrappers? If not, how do I specify the direction the menu will open?

Thanks!

Menu

answered on 28 Sep 2012

2 answers

201 views

Delete confirmation is shown although it is deactivated

Hello,

I think I found a new bug. We deactivated the delete confirmation with the DisplayDeleteConfirmation-property. Works perfectly for the delete-button in the grid. Only problem: When I delete a row manually the confirmation is still shown.

Here my code:

function myFunction()

{

var gridChoosenValues = $('#MyGrid').data("kendoGrid");

var choosenItems = gridChoosenValues.items();

for (var i = 0; i < choosenItems.length; i++) //delete every row

{

grid.removeRow(choosenItems[i]); //this triggers delete confirmation :(

}

hope this will be fixed soon. And a method for deleting all rows of a grid would also be very nice :)

Best regards,
Mathias

Grid

answered on 28 Sep 2012

2 answers

258 views

Batch Editing with Kendo Grid

I am hoping you can help me with this problem.

I have been trying to get Batch Editing to work on a grid for line items to an order for a couple of days now. At first I just went with samples I found from the demos online here and got it kind of close but not quite working. So I followed the sample that came with the product to a the letter I thought, and am having issues. Zip file attached. I created a SessionLineItemRepository and a LineItemViewModel as seemed necessary from the sample. My problems are:

1. Now when I add an item it updates the grid but does not insert into the database. You will see in my controller that I took care of that, but I don't think it is suppose to work that way.

2. I cannot get _Update to work because when I edit any records, for some reason it calls the _Create method and inserts every record in the list into the table again when I click Save.

3. _Delete is never fired. At one point I had it deleting from the grid but not from the database.

4. the tab key no longer tabs from field to field when I have .Batch(true) set for the grid. So when in add new record mode you have to click in each field to edit rather than enter data hit tab and enter data. The sample online seems to work that way.

I am not sure if I am suppose to have a separate controller for the grid or have the code in my LineItemController as I do now. But it surely is not close to working and I have tried all that I can think of. My plan now is to abondon the SessionLineitem and LineitemVeiwModel because I was a whole lot closer before I did that.

I am very new to Kendo and your help is appreciated. Sorry if I am a little slow on this stuff.

Thank you,

Paul

Grid

answered on 28 Sep 2012

0 answers

144 views

How Hide/Show expand sign.

Hi. I'm using Kendo Grid with Hierarchy.
And in some cases I need to show expand sign(if there is any info for this row) and in some not.
Or even I can always show this sign, but I need to show different ClientDetailTemplates depending on conditions.
How can I manage this?

Here's code fragment:
@(Html.Kendo().Grid<AreaModel>()
                                        .Name("AreaModels")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(o => o.AreaName).Width(101);
                                            columns.Bound(o => o.NumberOfActiveItems).Width(101);

                                        })
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Read(read => read.Action("HierarchyBinding_Areas", "Home"))
                                        )
                                        .ClientDetailTemplateId("projectsTemplate")
                                        //.Sortable()
                                        //.ToClientTemplate()

                                        )

<script id="projectsTemplate" type="text/kendo-tmpl">
@(if("Some condition goes here"))
{
@Html.Label("111")
}
else
{
@Html.Label("2222")
}

</script>

Grid

asked on 28 Sep 2012

1 answer

153 views

Problem with paging

I have a grid that is not paging correctly. When I click on next page nothing happens.

Here is my code.

_layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/Site.css")

@Styles.Render("~/Content/kendo/2012.2.710/kendo.common.min.css")
@Styles.Render("~/Content/kendo/2012.2.710/kendo.default.min.css")

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
@Scripts.Render("~/Scripts/kendo/2012.2.710/kendo.web.min.js")
@Scripts.Render("~/Scripts/kendo/kendo.aspnetmvc.min.js")

</head>
<body>
<h2>Benchmarks</h2>
<header>
<div id="logindisplay">
Hello, @User.Identity.Name!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</nav>
</header>
<div id="body">

<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>

</body>
</html>

======================================================

index.cshtml

@model IEnumerable<Benchmarks.Models.Benchmark>

<script src="~/Scripts/kendo/2012.2.710/kendo.pager.min.js"></script>

@(Html.Kendo().Grid(Model) //The grid will be bound to the Model which is the Products table
.Name("productGrid") //The name of the grid is mandatory. It specifies the "id" attribute of the widget.
.Columns(columns =>
{
columns.Bound(p => p.HydrantNumber);
columns.Bound(p => p.Street1);
columns.Bound(p => p.Street2);
columns.Bound(p => p.Location);
columns.Bound(p => p.Quadrant);
columns.Bound(p => p.Description);
columns.Bound(p => p.Elevation);
columns.Bound(p => p.OrderNumber);
columns.Bound(p => p.RevisionMonth);
columns.Bound(p => p.RevisionYear);
columns.Bound(p => p.Remark);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);



})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable.PageSizes(true).PageSizes(new int[] {15,20,25}))
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))

)
)

Grid