Questions on UI for ASP.NET MVC Forum

4 answers

140 views

IE10 Paging

I have a grid setup with Ajax loading/editing, etc. Paging works fine in Chrome and Firefox but in IE10 (10.0.9200.16618) I have to turn on compatibility mode to get it to work. Without compatibility mode, paging options still show up but grid is showing all records instead of limiting to number of records set with .PageSize setting on grid. After turning on compatibility mode, the paging works but I get errors such as the attached when changing pages or opening the popup editor.

Steps to reproduce:

Paging

Change page and get the first error (attachment named PagingError.png)

Editing

Click the edit button in the grid.
First get the same error as above
Click No to debug prompt
Get second error (attachment named CouldNotContinue.png)
Click No to debug prompt
Click edit button again
Popup editor comes up but no datepicker for the date fields and date field shows "Wed Feb 13 00:00:00 CST 2013"

Any suggestions/ideas on why this is and how to correct it?

Grid

answered on 01 Jul 2013

2 answers

355 views

Hidden columns become visible after adding a row to the grid

I have a grid that I toggle the visibility of certain columns on and off in certain user situations.

Hiding the columns works fine, but when I add a row to the grid, the columns I hid become visible again as soon as I click the grid's "Add" button.

I'm not sure if this is desired or not, but I'd appreciate a workaround if it's not considered a bug. Thanks!

Script that hides the columns:

function SetItemGridView(isManual) {

var itemGrid = $("#ItemGrid").data("kendoGrid");

if (isManual) {

itemGrid.showColumn("MyTestCol");

} else {

itemGrid.hideColumn("MyTestCol");

}

Grid Databound function that calls SetItemGridView:

function ConfigureItemGrid(e) {

SetItemGridView($("#IsManual").length > 0 ? $("#IsManual").is(":checked") : true);

}

Grid code (simplified for brevity):

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

.Name("ItemGrid")

.Columns(columns =>

{

columns.Bound(i => i.MyTestCol).Width(100);

columns.Command(command =>

{

command.Destroy();

}).Width(60);

})

.Events(e =>

{

e.DataBound("ConfigureItemGrid");

e.Edit("onItemGridEdit");

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Editable(editable =>

{

editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom);

})

.Navigatable(navigatable => navigatable.Enabled(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(model =>

{

model.Id(i => i.ItemModelID);

})

.Create(create => create.Action("CreateProducts", "ItemGrid"))

.Read(read => read.Action("GetProducts", "ItemGrid"))

.Update(update => update.Action("UpdateProducts", "ItemGrid"))

.Destroy(destroy => destroy.Action("DeleteProducts", "ItemGrid"))

)

Grid

answered on 01 Jul 2013

1 answer

139 views

Adding form fields dynamically via ajax using popup editor

My popup editor contains a dropdown list which fires an onchange event which populates the form with additional custom fields specific to the dropdown value. When the form is submitted, these custom fields do not show up in the FormCollection.

I am guessing the problem lies in the fact that these dynamically added fields are somehow not initialized properly?

Grid

answered on 01 Jul 2013

1 answer

270 views

[Solved] Grid pager arrows are not showing

Hi,

We are using the Grid with sever binding and this works fine on our development environment with both IE8 and IE9.

However, on the corporate network the laptops must have different security settings because the Pager arrows are not displaying.

We have tracked this down to css file refering to a domain called cloudforce.net

Turns out this file was produced by the Theme builder.

The documentation on kendoui.com must be wrong as it says "Just copy the CSS output to a .css file and include it in your page." and has no mention of references to cloudforce.net?

Grid

answered on 01 Jul 2013

1 answer

296 views

Hierarchical data source with same model at each level

Hi:

I am attempting to create a multi-level menu structure that is embodied in a treeview. I have the same model at each level. A simple example with two levels is not working. (See below)

Controller:

public JsonResult JsonIndex()

{

var menus = _db.GetMenus( 0, 1, 1, 0 );

var allMenus = from m in menus

where m.MenuId == 1

select new

{

Name = m.MenuName,

ImageUrl = m.MenuImageUrl,

NavUrl = m.MenuNavUrl,

hasChildren = true,

children = from m2 in menus

where m2.ParentMenuId == m.MenuId

select new

{

Name = m2.MenuName,

ImageUrl = m2.MenuImageUrl,

NavUrl = m2.MenuNavUrl,

hasChildren = false,

}

};

JsonResult json = Json( allMenus, JsonRequestBehavior.AllowGet );

return ( json );

}

cshtml:

<script>

$(document).ready(function () {

function populateTreeView() {

var remoteDataSource = new kendo.data.HierarchicalDataSource({

type: "json",

transport: {

read: "Home/JsonIndex"

},

schema: {

model: {

text: "Name",

ImageUrl: "ImageUrl",

expanded: true,

children: "children",

hasChildren: "hasChildren",

NavUrl: "NavUrl"

}

});

$("#tv").kendoTreeView({

id: "tree123",

Name: "tree123",

dataSource: remoteDataSource,

dataTextField: "Name",

dataImageUrlField: "ImageUrl",

select: onTreeViewSelect

});

}

$(document).ready(function () {

populateTreeView();

});

</script>

The actual menu is more than two levels, but I can't even get this simple case to work. What am I doing wrong?

Thanks,

Terry

TreeView

answered on 01 Jul 2013

2 answers

162 views

Custom editor sizing

I successfully changed the width of the editor window using:

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PowerEditor")
.Window(w=> w.Title("Edit Power Details"))
.Window(w=>w.Width(700))
.Window(w => w.Height(400))

However I'm finding that there is a div inside the window where my template is hosted with a class of k-edit-form-container . In kendo.common.min.css this is setup with a width of 400. Without having to change the css file what would be the correct way to alter the width of that div element similar to what I have already done for the window element?

Grid

answered on 28 Jun 2013

2 answers

149 views

[Solved] Grid Item Details Won't Load

Hi,

I am trying to get a grid with hierarchical data working, where the item detail is another grid. So, I have a grid of "Carriers", and those Carriers all have a list of Comments. My carrier grid loads fine, however the details do no load. The sub-grid itself renders, but the Action never gets hit to load the data.

The project is an MVC 4 project created in Visual Studio 2012 using the Kendo UI for MVC template.

My Controller (The "facade" is simply a class that accesses my data layer and gets my objects, suffice to say, it returns an IList<Carrier> and IList<CarrierComment>)...

public class HomeController : Controller

{

//

// GET: /Home/

[HttpGet]

public ActionResult Index()

{

return View();

}

// Carrier Actions

//

// POST: /ReadCarriers/

[HttpPost]

public ActionResult CarrierRead([DataSourceRequest] DataSourceRequest request)

{

try

{

var facade = new CarrierFacade();

IList<Carrier> carriers = facade.GetAllCarriers();

return Json(carriers.ToDataSourceResult(request));

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

// Comment Actions

//

// POST: /CommentRead/

[HttpPost]

public ActionResult CommentRead([DataSourceRequest] DataSourceRequest request, int carrierId)

{

try

{

var facade = new CarrierFacade();

IList<CarrierComment> comments = facade.GetAllComments(carrierId);

return Json(comments.ToDataSourceResult(request));

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

My View....

@using HappyHolidays.WebPortal.BusinessObjects

@{

ViewBag.Title = "Carrier Directory";

}

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Name).Groupable(false);

columns.Bound(p => p.Phone1).Groupable(false).Title("Primary Phone");

columns.Bound(p => p.Phone2).Groupable(false).Title("Secondary Phone");

columns.Bound(p => p.Fax).Groupable(false);

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(toolbar => toolbar.Create())

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

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Selectable()

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

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

.ClientDetailTemplateId("carrier-detail")

.DataSource(

dataSource => dataSource

.Ajax()

.PageSize(50)

.Model(model =>

{

model.Id(p => p.CarrierId);

model.Field(p => p.CarrierId).Editable(false);

})

.Create(update => update.Action("CarrierCreate", "Home"))

.Update(update => update.Action("CarrierUpdate", "Home"))

.Destroy(update => update.Action("CarrierDelete", "Home"))

.Read(read => read.Action("CarrierRead", "Home"))))

<script id="carrier-detail" type="text/x-kendo-template">

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

.Name("commentsGrid#=CarrierId#")

.Columns(columns =>

{

columns.Bound(o => o.Comment);

columns.Bound(o => o.AddedBy);

columns.Bound(o => o.TimeStamp);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("CommentRead", "Home", new { carrierID = "#=CarrierId#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

My layout page...

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.metro.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.dataviz.metro.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js")"> </script>

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.all.min.js")"> </script>

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"> </script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"> </script>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

As I said, the carriers grid loads fine, however when I expand a row, the comments grid is empty. If I place a break point at CommentsRead() in the controller, it never gets called. I am clearly missing a piece of the puzzle, but I can't figure it out and I've been at it for a day and a half.

Thanks,
Andy

Grid

answered on 28 Jun 2013

2 answers

346 views

[Solved] Iterating over object within grid data in the client detail template

Well, I'm back. Now I am having trouble displaying an object from the grid data in the client detail template. This object is returned from the database as a Dictionary in the Controller. This dictionary is just one data element in the Json being returned. The dictionary could have one or more key value pairs. I am using javascript to display this data and something fairly strange is happening.
First off, here is the client detail template code:

<script id="shipmentDetail-template" type="text/x-kendo-template">

--- lots of template code removed for brevity ---

# var myVal; var cr = data.CustomerReference; for (var key in cr) { if (cr.hasOwnProperty(key)) { myVal = cr[key]; # #= myVal # , # } } #

</script>

This is what is rendered:
object Object] , This is customer reference 1 , 0c7c9553-c7ba-4d6e-8f8a-11b060ad5db6 , function (){return i} ,
If I just display the key, here's what I get:
_events , ref1 , uid , parent ,

So I am getting other keys and values that I am not expecting.

There is only one element in the dictionary (data.CustomerReference) at this time. This is what the Json data looks like when it is sent to the view:
"CustomerReference":{"ref1":"This is customer reference 1"}

Remember this is just a small part of the Json data - here is a larger portion of it:

{"Data":[{"ReturnCode":1,"ReturnMessage":"","ShipmentKey":1,"OriginalABFlag":"A","TrackingNumber":"TrackingNumber1","IsGroundTrackingNumber":false,"GroundTrackingNumber":"GroundTrackingNumber1","Carrier":"Carrier1","DomIntlFlag":"A","DutyorTaxInfo":"DutyorTaxInfo1","ShipDate":"\/Date(1372136400000)\/","OpenClosedFlag":"OpenClosedFlag1","ClosedDate":"\/Date(1372136400000)\/","PostCCReports":"PostCCReports1","InvoiceInfo":{"InvoiceKey":1,"InvoiceNumber":"InvoiceNumber1","InvoiceDate":"\/Date(1372136400000)\/"},"ShipperInformation":{"Name":"Name1","Company":"Company1","Address":{"AddressType":"AddressType1","AddressLine1":"AddressLine11","AddressLine2":"AddressLine21","City":"City1","StateProvince":"StateProvince1","PostalCode":"PostalCode1","CountryCode":"CountryCode1"}},"RecipientInformation":{"Name":"Name1","Company":"Company1","Address":{"AddressType":"AddressType1","AddressLine1":"AddressLine11","AddressLine2":"AddressLine21","City":"City1","StateProvince":"StateProvince1","PostalCode":"PostalCode1","CountryCode":"CountryCode1"}},"OriginalInformation":{"Name":"Name1","Company":"Company1","Address":{"AddressType":"AddressType1","AddressLine1":"AddressLine11","AddressLine2":"AddressLine21","City":"City1","StateProvince":"StateProvince1","PostalCode":"PostalCode1","CountryCode":"CountryCode1"}},"PackageInfo":{"Service":"Service1","PackageDescription":"PackageDescription1","Pieces":1,"ActualWeight":{"WeightType":"X","Weight":1,"WeightUnit":""},"BilledWeight":{"WeightType":"X","Weight":1,"WeightUnit":""},"dimensions":{"DimUOM":"DimUOM1","DimLength":"DimLength1","DimWidth":"DimWidth1","DimHeight":"DimHeight1","DimWeight":1,"DimDivisor":"DimDivisor1"}},"PODInfo":{"PODDate":"\/Date(1372136400000)\/","PODSignature":"PODSignature1","MinutesEarlyLate":1},"ChargesInformationList":[],"OriginalAmount":1,"Credits":1,"Refunds":1,"AmountDue":1,"BillingInfo":{"PaymentMethod":"PaymentMethod1","BillToAccount":"BillToAccount1","CarrierZone":"CarrierZone1","ScanImagePage":1,"BundleNumber":"BundleNumber1","PaymentReference":"PaymentReference1","PaymentRefFileName":"PaymentRefFileName1","CostCenter":"CostCenter1","CostCenterMatchType":"CostCenterMatchType1"},"CustomerReference":{"ref1":"This is customer reference 1"},"ShipCarrierReference":{"carrierref1":"This is Carrier Reference 1"},"GMCInfo":{"GMCFee":0,"CostCenterKey":0,"GroupName":null,"InvoiceGroupName":null,"ExpectedDeliveryDate":null,"DisasterExceptionCode":null,"DimDivisor":null,"DocumentType":null}}
----removed for brevity----
],"Total":3,"AggregateResults":null,"Errors":null}

Any help in this matter is very much appreciated!
Thanks,
Donna

Grid

answered on 27 Jun 2013

1 answer

478 views

Reduce height of Calender Image In Datepicker

Hi
I want to reduce height of Date-picker icon How can i reduce height of Date-picker?

Thank you
Amitkumar

DatePicker

answered on 27 Jun 2013

2 answers

651 views

[Solved] Grid selection is not triggering Change event

I am using Kendo UI 2013.1.514.340 in combination with JQuery 2.0.0. I have configured a Grid with the Selectable option and configured a Change handler to pick up events. The handler is correctly picking up events when the Grid is created, refreshed, sorted, filtered, etc. However, selecting a row does not seem to fire an event as desired.

I saw several other posts asking whether or not there was a JQuery incompatibility. Some of those posts are older, and none were answered to confirm this.

I'd like to know if this is a known issue before I go to the trouble of ripping out 2.0.0 for some other version, presumably 1.8.2.

Help, please!

Grid

answered on 27 Jun 2013