Questions on UI for ASP.NET MVC Forum

2 answers

551 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

319 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

3 answers

96 views

Popup Editor 'Cancel' Error

Hello,

I've encountered a rather peculiar issue with regards to using the Edit grid action command. As illustrated through the attached images: (1.png) displays a grid with 2 entries, I click the Edit command button which leads me right to an edit popup window and I proceed to make the necessary changes (2.png); I then click the Update button and the grid displays the changes accordingly (3.png); I repeat the process of clicking the Edit command button but instead of clicking Update and changing any values, I click the 'X' button and the values revert back to how it was in (1.png) before the update was done.

A video of the recreation can be found here: bit.ly/OEvZUc
(The video is in .wmv format, I placed it in an bitmark just to keep track of the clicks so don't worry)

The process involved here is that I store the values in a List<> which I keep updated through its constant reassignment a session variable. I am currently using version 2012.2.913 and jQuery1.8.2. Thanks in advance for the help!

Grid

answered on 26 Jun 2013

1 answer

164 views

Cascading Dropdown, within TabStrip and Grid with Editor Template, popup...

I am having a problem with a cascading dropdown child list will not populate

I am trying to implement a cascading dropdown, having problems with the Javascript to get the key value from selected parent...

Here is the code:
<script>

$(document).ready(function () {
var Region = $("#Region").data("kendoDropDownList")
});

function filtercountry()
{
return {
categories: $("#categories").val()
};
</script>

<div class="editor-field">
@(Html.Kendo().DropDownList()
.Name("Country")
.DataTextField("CountryName")
.DataValueField("CountryCode")
.HtmlAttributes(new { style = "width: 250px" })
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetCountries", "Location").Data("filtercountry");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("Region")
)
</div>
I had a similar issue with Combox box and found the solution required a deeper layer of reference to control..., listed below
function DonAdditionalData()
{
var DM = $("#DManage").data("kendoComboBox");
DM2 = DM.input.val();
return
{
text:DM2
};
}

DropDownList

answered on 25 Jun 2013

14 answers

301 views

DataReader must be closed first

I'm following the 'Basic Usage' example and did the following:

@model IEnumerable<DigiBob.Model.Governance.RolesResponsibilities.RoleName>

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

.Name("Grid")

.Columns(columns =>

{

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

})

.Pageable()

.Sortable()

.Scrollable(scr=>scr.Height(430))

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.ServerOperation(false)

)

And:

RoleNameRepository _roleNameRepository = new RoleNameRepository(new DigiBobContext());

public ActionResult Index()

{

return View(_roleNameRepository.GetAll());

}

I'm getting this error:
There is already an open DataReader associated with this Command which must be closed first.There is already an open DataReader associated with this Command which must be closed first.

I added .ToList() to the last command and am now getting this error:
A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.RoleName_9130BF9423DB97238B259DFD54766A3850EC298A017442C28EED589A812C582A'

How can I get this simplest of grid examples to show the results of my query?

Grid

answered on 25 Jun 2013

2 answers

472 views

Razor syntax help in Client Detail Template for Grid

I have a grid in which I am using the client detail template and I need a little help with the syntax. I am trying to do a fairly simple conditional against an item in the parent grid data. When I start typing the syntax as I think it should be, I get "Preprocessor directives must appear as the first non-whitespace character on a line". Here is what I am typing:

Minutes Early/Late: @if(#: PODInfo.MinutesEarlyLate # > 0){ #: PODInfo.MinutesEarlyLate # Late } else { On Time }

I am fairly new to Razor, and maybe here I need Javascript instead. I have actually tried both, but it is the # syntax with which I think I am having trouble.

Thank you in advance for any help!

Donna

In case - here's the grid

@(Html.Kendo().Grid<GMCRepository.Models.DataServices.ShipmentInformation>().Name("ShipmentList")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("ShipmentInfoList", "DataInquiry"))

)

.Columns(columns =>

{

columns.Bound(shipment => shipment.TrackingNumber);

columns.Bound(shipment => shipment.ShipDate);

columns.Bound(shipment => shipment.ShipperInformation.Address.City);

columns.Bound(shipment => shipment.ShipperInformation.Address.StateProvince);

columns.Bound(shipment => shipment.RecipientInformation.Address.City);

columns.Bound(shipment => shipment.RecipientInformation.Address.StateProvince);

columns.Bound(shipment => shipment.AmountDue);

columns.Bound(shipment => shipment.BillingInfo.BillToAccount);

columns.Bound(shipment => shipment.CustomerReference);

})

.ClientDetailTemplateId("shipmentDetail-template")

)

Here's the client detail template:

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

<div class="shipment-grid-detail">

<div class="row-fluid">

<div class="span4 shipment-div">

<h4>Shipper Information</h4>

#: ShipperInformation.Name # <br />

#: ShipperInformation.Company # <br />

#: ShipperInformation.Address.AddressLine1 # <br />

#: ShipperInformation.Address.AddressLine2 # <br />

#: ShipperInformation.Address.City #, #: ShipperInformation.Address.State #  #: ShipperInformation.Address.PostalCode #, #: ShipperInformation.CountryCode #

</div>

<div class="span4 shipment-div">

<h4>Recipient Information</h4>

#: RecipientInformation.Name # <br />

#: RecipientInformation.Company # <br />

#: RecipientInformation.Address.AddressLine1 # <br />

#: RecipientInformation.Address.AddressLine2 # <br />

#: RecipientInformation.Address.City #, #: RecipientInformation.Address.State #  #: RecipientInformation.Address.PostalCode #, #: RecipientInformation.CountryCode #

</div>

<div class="span4 shipment-div">

<h4>Shipment Information</h4>

Ship Date: #: ShipDate # <br />

Service: #: PackageInfo.Service # <br />

Packaging: #: PackageInfo.PackageDescription # <br />

Actual Weight: #: PackageInfo.ActualWeight.Weight # #: PackageInfo.ActualWeight.WeightUnit # <br />

Billed Weight: #: PackageInfo.BilledWeight.Weight # #: PackageInfo.BilledWeight.WeightUnit # <br />

Dimensions: #: PackageInfo.dimensions.DimLength # x #: PackageInfo.dimensions.DimWidth # x #: PackageInfo.dimensions.DimHeight # #: PackageInfo.dimensions.DimUOM # <

br />

Pieces: #: PackageInfo.Pieces #

</div>

<div class="row-fluid">

<div class="span4 shipment-div">

<h4>Delivery Information</h4>

POD Date: #: PODInfo.PODDate # <br />

POD Name: #: PODInfo.PODSignature # <br />

Minutes Early/Late: @if(#: PODInfo.MinutesEarlyLate # > 0){ #: PODInfo.MinutesEarlyLate # Late } else { On Time }

</div>

<div class="span4 shipment-div">

<h4>Billing Information</h4>

Payment Option: #: BillingInfo.PaymentOption # <br />

Zone: #: BillingInfo.CarrierZone # <br />

Bill To Account: #: BillingInfo.BillToAccount # <br />

Payment File Ref: #: BillingInfo.PaymentReference # <br />

Closing Run: #: BillingInfo.PaymentRefFileName # <br />

Bundle Number: #: BillingInfo.BundleNumber #

</div>

<div class="span4 shipment-div">

<h4>Charge Information</h4>

<div class="row-fluid">

<div class="span6">

Original Amount: <br />

Credits: <br />

Refunds: <br />

Amount Due:

</div>

<div class="span6">

#: OriginalAmount # <br />

#: Credits # <br />

#: Refunds # <br />

#: AmountDue #

</div>

<div class="row-fluid">

@(Html.Kendo().Grid<GMCRepository.Models.DataServices.ChargesInformation>().Name("ShipmentCharges")

.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("ChargesList", "DataInquiry"))

)

.Columns(columns =>

{

columns.Bound(charge => charge.ChargeDescription);

columns.Bound(charge => charge.ChargeAmount);

})

.ToClientTemplate())

</div>

<div class="row-fluid">

<div class="span4 shipment-div">

<h4>Cost Center Information</h4>

Cost Center: #: BillingInfo.CostCenter # <br />

Match Type: #: BillingInfo.CostCenterMatchType # <br />

</div>

<div class="span4 shipment-div">

<h4>References</h4>

</div>

</script>

Grid

answered on 24 Jun 2013

5 answers

248 views

Upgrade Wizard fails to update dll

Trying to update to the 2013.1.319 version of Kendo.Mvc.dll but it gives a warning. It says that the most common cause is that there's a conflict of the local and GAC versions. I don't have it in the GAC.

Just need a way to get the most recent dll file. Which, according to this post below, is the way to toggle the readonly property of a Kendo dropdown.

http://www.kendoui.com/forums/mvc/dropdownlist/dropdownlist-readonly()-not-recognized.aspx

Installer and VS Extensions

answered on 24 Jun 2013

7 answers

479 views

TabStrip focus using keyboad navigation

If I open the demo at http://demos.kendoui.com/web/tabstrip/index.html and hit Tab to navigate using the keybard, I can see a blue margin highlighting that the TabStrip has focus.

If I open the theme editor with the default theme, there is no indication that the TabStrip has focus. How can I get my TabStrib to provide feedback to the user that it has focus as the demo page does?

Thank you

TabStrip

answered on 24 Jun 2013

2 answers

420 views

AntiForgeryToken gets lost in editing custom editor

Hi!

I'm new to MVC4 and thus built some little demo including a Kendo UI Grid and a partial view which serves as a custom editor. Everything works perfect except that the AntiForgeryToken gets lost on the way.

This is my definition of the grid:

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

.Name("grdProducts")

.Columns(columns =>

{

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

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

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

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

columns.Command(command => command.Edit()).Width(160);

})

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

.Editable(editable => editable

.Mode(GridEditMode.PopUp)

.DisplayDeleteConfirmation(true)

.TemplateName("ProductEditor")

.Window(w => w

.Width(700)

.Title("Edit Product")))

.Pageable(pa => pa.Numeric(false).PageSizes(new [] {5,10,20}))

.Scrollable(scr => scr.Height(430).Virtual(false))

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

.DataSource(dataSource => dataSource

.Ajax()

.AutoSync(false)

.Batch(false)

.PageSize(20)

.ServerOperation(false)

.Model(model =>

{

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

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

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

model.Field(p => p.ProductType).DefaultValue((int)ProductTypeEnum.Cameras);

})

.Create(create => create.Action("EditingCreate", "Product"))

.Read(read => read.Action("EditingRead", "Product"))

.Update(update => update.Action("EditingUpdate", "Product"))

)

And this is the start of my partial view named "ProductEditor.cshtml" saved in subdir "EditorTemplates":

@model _ProductStore.Infrastructure.Models.Products.Product



@{

    ViewBag.Title = "Edit";

}



@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<fieldset>

... all labels and fields...

</fieldset>

}

The popup opens as it should and everything works fine except that the hidden input for AntiForgeryToken looks like this:

<input name="__RequestVerificationToken" type="hidden" data-bind="value:__RequestVerificationToken" value=""/>

In other words: the value is empty. Placing the AntiForgeryToken helper somewhere else in my views it is working perfectly.

What am I doing wrong?

Regards
Neils

Grid

answered on 24 Jun 2013

1 answer

163 views

Keno control difference between HTML and Asp.net MVC

Hi,
In below url you have two example HTML and Asp.net MVC.

http://demos.kendoui.com/web/autocomplete/index.html

Can you tell me what is difference between this two.(HTML and Asp.net MVC)

Thank you
Amitkumar

General Discussions

answered on 24 Jun 2013