Questions on UI for ASP.NET MVC Forum

2 answers

135 views

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

118 views

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

312 views

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

433 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

Date/Time Pickers

answered on 27 Jun 2013

2 answers

556 views

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

1 answer

310 views

Add New Row to Kendo Grid on TAB key press

Hi,

My kendo Grid has a text field and a checkbox in two columns of a row. While cursor is in last column of the last row when i press TAB key i should add a new row to the grid.

I would be very helpful if you can provide a sample code for my requirement.

Thanks.

Grid

answered on 27 Jun 2013

1 answer

860 views

Serializing grid data to json string

Hi,

I'm trying to implement grid serialization example:
http://stackoverflow.com/questions/10324565/how-to-get-the-displayed-data-of-kendogrid-in-json-format

$.ajax({

type: 'post',

data: kendo.stringify($("#Grid").data("kendoGrid").dataSource.view()),

dataType: "json",

contentType: "application/json; charset=utf-8",

url: '@Url.Action("CreateExcelFile","Helper")',

success: function (response) {

},

error: function (request, status, errorThrown) {

}

});

On server side I get, Request.Form.Count = 0...

Any help would be appreciated...

Thanks
Shabtai

Grid

answered on 27 Jun 2013

1 answer

81 views

Can the Kendoui upload have a spinner?

Can the Kendoui upload have a spinner? After selecting the file, the wait is consistently
long. And the users do not know what is happening.

Upload

answered on 27 Jun 2013

2 answers

539 views

Ajax Grid Serialization Bug: Big Data

Hello,

I have a simple Ajax Kendo Grid which looks the following:

@(Html.Kendo().Grid(m)

.Name(gridName)

.BindTo(m)

.ToolBar(commands => commands.Create().Text(newButtonText))

.Events(e => e.Edit("onGridCellEdit" + gridName))

.DataSource(dataSource => dataSource.Ajax().Events(ev => ev.Change("onDataSourceChange" + gridName))

.Model(model =>

{

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

model.Field(p => p.Function).DefaultValue((KeyValueObjectViewModel)ViewData[SAPController.GRID_DDL_PROPERTY_FUNCTION + "_Default"]);

model.Field(p => p.SAPClientEmpty).DefaultValue((KeyValueObjectViewModel)ViewData[SAPController.GRID_DDL_PROPERTY_SAP_CLIENT_EMPTY + "_Default"]);

model.Field(p => p.Person).DefaultValue(new ResultEntryViewModel(true, false));

}).ServerOperation(false)

)

.Columns(columns =>

{

columns.Bound(p => p.Function).ClientTemplate("#=Function.Name#").Width(200).Title(Strings.ColumnFunction);

columns.Bound(p => p.SAPClientEmpty).ClientTemplate("#=SAPClientEmpty.Name#").Width(200).Title(Strings.ColumnSAPClient);

columns.Bound(p => p.Person).ClientTemplate("#=Person.Name#").Title(Strings.ColumnPerson);

columns.Template(@<text></text>).Width(20).ClientTemplate(TemplateConstants.GRID_CLIENTTEMPLATE_DELETE_COLUMN);

})

.Editable(editing => editing.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

)

The grid renders fine without any problems when the amount of data is low.

Now if I have a lot of data in the grid (the table in the database has a few thousand rows), I get an error from Kendo when serializing the grid data:

InvalidOperationException: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

It seems that the JavaScriptSerializer that Kendo uses does not use the maximum valid json length and instead uses the default length. I have set the following entries in my web.config, which does not make any differences:

<system.web.extensions>

<scripting>

<webServices>

<jsonSerialization maxJsonLength="2147483647"/>

</webServices>

</scripting>

</system.web.extensions>

So I assume the JavaScriptSerializer you use for the Kendo Grid simply ignores this setting. What about setting the MaxJsonLength property for the JavaScriptSerializer hardcoded to its maximum value:

JavaScriptSerializer ser = new JavaScriptSerializer();

ser.MaxJsonLength = Int32.MaxValue;

// TODO: Do the Kendo Grid serialization ...

Would that be possible for you do set that property to its max value?
Any other ideas how I can use the grid with big data?
I know, I could use paging, but the customer does not want a paged grid ...

Please help, thanks!
Greets

PS: I have attached an image of the exact error message including the full callstack.

Grid

answered on 26 Jun 2013

2 answers

304 views

Enable both client and server-side filtering in Kendo UI

I have stumbled upon a problem using Kendo UI with ASP.NET MVC Wrappers. I am applying intial filters in a extension method on GridBuilder like this:

public static GridBuilder<T> Test<T>(this GridBuilder<T> builder)
where T : class
{
var filters = new List<IFilterDescriptor>();
filters.Add(//adding my filters)

return builder.DataSource(s => s.Server().Filter(f => f.AddRange(filters)));
}

The problem appears when I for example sort a specific column and Kendo creates its query string:

?Grid-sort=FName-desc&Grid-page=1&Grid-pageSize=10&Grid-group=&Grid-filter=

What happens is that Grid-filter= overrides my intial filters causing them to not be applied anymore. The exception is when i apply one of my own filters before Kendo creates its query string, then my filter gets added to the query string and everything is fine and dandy.

Is there a way to prevent Kendo from overriding my intial filters?

Thanks in advance.

Grid

answered on 26 Jun 2013