Questions on UI for ASP.NET MVC Forum

12 answers

914 views

Complex object post issues with DateTime property

Hi all,

I am having some odd issues with complex objects in my trial version of KendoUI complete for MVC.

I have a base entity class called Entity with the following 2 properties.
public Guid ObjectId { get; set; }
public DateTime CreatedOn { get; set; }

I then have 2 classes, Product and Category. Both inherit from Entity.
Product has a reference to a single category
public Category Category { get; set; }

My grid populates 100%.

The first issue I had was when displaying Category.CreatedOn. I was getting the JSON data instead of a date/time. Searching these forums found me an answer and I have it displaying correctly using the ClientTemplate method on the bound property.
When I make a change and post back the Product.CreatedOn is 100% and contains the value that it had originally in the read request. Category.CreatedOn is set back to 01/01/0001 00:00 which is invalid and causes my ModelState.IsValid check to fail.
This Category.CreatedOn value does however show in the grid correctly if I render the column after applying the ClientTemplate fix above.
If I set a new date in the grid for Category.CreatedOn, then this new value is persisted back to the server on update. The value is only lost if I don't alter it at all.

Am I making sense? Is there a fix for this?

I have been fiddling with DateTime types in the Grid since Thursday last week. Starting to feel real unproductive at the moment so some quick assistance would be appreciated.

TIA
Mike

Grid

answered on 02 Oct 2015

1 answer

73 views

Getting the editor to commit its contents to textarea without changing focus

Hi,

We are needing to be able to send the contents of the kendo editor to the server on an intermittent basis for auto-save purposes as the user types in the editor. I noticed that unless I stop typing and click away from the editor and it loses focus, the the editor's contents don't get committed to the textarea and thus don't get sent to the server.

Is there any way to programatically get the kendo editor to commit its data to the text area?

Thanks.

Editor

answered on 02 Oct 2015

1 answer

156 views

DataSourceRequest won't model bind

I'm following the Virtualization demo at http://demos.telerik.com/aspnet-mvc/combobox/virtualization and get data back initially, however I notice that my request parameter is not being populated with what's sent to the server. Mainly the Filter property is null even though it's included in the request.

Controller action:

public JsonResult GetParentResellers([DataSourceRequest]DataSourceRequest request)

{

//...

}

The only properties that have a value are PageSize, Page and Take.

I've attached an image of the ajax request that the Combobox sends to the server.

ComboBox

answered on 02 Oct 2015

1 answer

163 views

Open Child View and Pass parent model to grid

I have created two views Shipment and Shipment Lines,

The Shipment has the header info, and of course the lines is the details. How do I have an action link form the parent grid to the child view, and pass the correct order Id (the model) to the line read action?

This is the Shipment View:

@(Html.Kendo().Grid<Portal.Model.DAX.PurchaseShipment>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.CompanyId).Width(160);

columns.Bound(c => c.VendAccount).Width(120)

columns.Bound(c => c.DeliveryMode).Width(120);

columns.Bound(c => c.VendShipId).Width(120);

columns.Bound(c => c.ShipmentDate).Width(140).Format("{0:MM/dd/yy}");

columns.Bound(c => c.EstimateShipmentDate).Width(140).Format("{0:MM/dd/yy}");

columns.Bound(c => c.SourceOfData).Hidden(true).IncludeInMenu(false);

columns.Bound(c => c.RecVersion).Title("Rec Version").Hidden(true).IncludeInMenu(false);

columns.Bound(c => c.RecId).Title("RecId").Hidden(true).IncludeInMenu(false);

columns.Bound(c => c.CompanyId).ClientTemplate(@Html.ActionLink("Lines", "Lines", "Shipment", new { CompanyId = "#=CompanyId#", RecId = "#=RecId#" }, "").ToHtmlString()).Width(120);

columns.Command(command => {

command.Edit();

command.Destroy();

}).Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Create().Text("Add Shipment").HtmlAttributes(new { @title = "Add Shipment" });

toolbar.Excel();

})

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.CompanyId))

.Read(read => read.Action("Read", "Shipment").Type(HttpVerbs.Post))

.Create(create => create.Action("Create", "Shipment").Type(HttpVerbs.Post))

.Update(update => update.Action("Update", "Shipment").Type(HttpVerbs.Post))

.Destroy(destroy => destroy.Action("Destroy", "Shipment"))

)

And the Lines View: (I know the model has the PurchaseShipment data, I had textboxes populating it for testing)

@using Portal.Model.DAX

@model PurchaseShipment

@(Html.Kendo().Grid<Portal.Models.ShipmentLinesViewModel>()

.Name("grid")

.Columns(columns =>

{

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

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

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

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

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

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

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

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

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

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

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

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

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

columns.Command(command => { command.Edit(); }).Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Excel();

})

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

.Pageable()

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.MultipleColumn);

})

.Filterable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.CompanyId))

.Read(read => read.Action("Lines_Read", "Shipment"))

.Update(update => update.Action("Lines_Update", "Shipment"))

)

So the issue is that when the read for the lines happens it doesn't have the Shipment Model available so I can grab the correct line data. How do I pass from one view to the next, and pass the model to the read action?

Grid

answered on 02 Oct 2015

5 answers

188 views

UI for ASP.NET MVC with MVC 5.2.2

Question: Is it possible to use UI for ASP.NET MVC with MVC 5.2.2?

Or has the Kendo.MVC project to be re-compiled with MVC 5.2.2 and the related packages?

General Discussions

answered on 02 Oct 2015

14 answers

340 views

Filter Multi Checkboxes - Server operations being "cached"

I'm using the new "Filter Multi Checkboxes" and am liking the new functionality.

I've hooked it up to my MVC Controller with the following code which works fine apart from the fact that the controller is only called once, the first time I click to display the filter.

columns

.Bound(p => p.Category1)

.Filterable(ftb => ftb

.Multi(true)

.DataSource(ds => ds

.Read(r => r

.Action("Category1_Read", "Products")

)

);

I would like it to call the controller every time the filter is displayed, how do I achieve this? I've tried the following as I thought it was being cached but this did not fix it.

columns

.Bound(p => p.Category1)

.Filterable(ftb => ftb

.Multi(true)

.DataSource(ds => ds

.Read(r => r

.Action("Category1_Read", "Products")

.Type(HttpVerbs.Post)

)

);

Thanks

Grid

answered on 01 Oct 2015

2 answers

805 views

How to Conditionally format the text in a cell to red in grid

Situation

I would like to conditionally format the text in a cell in a grid to red depending on its value.

Example:

If the value is less than 0 then display the text in red.

Value

123.8 - no change to text font

0 - no change to text font

-123.8 change text font to red.

I would like to use the ClientTemplate on a bound column

Here is a sample of the grid's code:

columns.Bound(c => c.Adjusted_Appreciation).Title("Adjusted_Appreciation").Format("{0:c}").Width(150).ClientTemplate("# if (Adjusted_Appreciation > 0) {}; #");

columns.Bound(c => c.Adjusted_Appreciation).Title("Adjusted_Appreciation").Format("{0:c}").Width(150).ClientTemplate("# if (Adjusted_Appreciation > 0) {}; #");

What do i put in the {}?

Thanks

Corey

Grid

answered on 01 Oct 2015

1 answer

136 views

Missing JQuery

I am new to the MVC world of programming so I hope this problem is not something really simple.

Using Visual Studio 2015, and .NET 4.5, I created a new project using the "empty" telerik project. By the looks of things all the required scripts and layout looks like it was copied into my project. As long as I stick with non Kendo things, everything works. I have several views that render without issue. Being I love Telerik products I figured I would try a more daring view which will entail a couple of grids as well as a tree view or two. Structurally I have a single layout template and several partial views. If the displayed data is not relevant, the .RAZOR logic skips the display of the relevant KENDO grids. That all works without issue.

My problem seems to be related to the registration of the Kendo/Telerik scripts. Using IE 11, I get a "Jquery is undefined" error. Chrome and Firefox display the grids however they look like they are rendering with partial success. For example, none of the row selection is occurring. Sorting of the grids is taking place without issue.

How can I confirm I have my project configured correctly? I have seen references to having to run a "register scripts" several places however my project contains no such instructions currently. (Which of course could be my problem) I do have the default "bundles" logic in my "App_Start" folder. I do see a j-query bundle reference there. I am able to type / edit the markup and the Kendo libraries seem to be recognized.

As I am new to MVC 5 programming I have no background to fall back upon. Hopefully you can point out my errors and where to start my search for the "fix".

Thanks in advance.

General Discussions

answered on 01 Oct 2015

0 answers

66 views

Q3 2015 [2015.3.930]: IE 8 Compatibility problems

Symptoms

Loading kendo.all.min.js file in IE 8 results in multiple JavaScript errors.

Typically the error message will be "Object doesn't support this property or method" and will be caused by a call to map, forEach or bind.

Root Cause

The errors are due to the inclusion of the Kendo UI Spreadsheet which requires IE9 and later.

It was nevertheless bundled in kendo.all without the necessary run-time checks.

Mitigation

Use a custom bundle that does not include the Spreadsheet widget
Load an ES5 Polyfill, for example es5-shim, before kendo.all.min.js:

Solution

A permanent fix will be included in the next internal build, version 2015.3.1002, due for release on 2 Oct 2015.

Future Service Packs and official releases will be free of this defect as well.

Apologies for the caused inconvenience.

General Discussions

asked on 01 Oct 2015

1 answer

156 views

Grid Custom template popup Save issue

I have create a custom popup template (First time doing this) And I have 6 fields first three are drop down list and the other two are a text box and two date pickers.

The Text box and date pickers record the data back to the model. But the drop down list data is coming back as null.

So when the Data source calls the Create action, the model that is passed has null values for the drop down list but has the values of the other fields

Here is my View

@(Html.Kendo().Grid<Portal.Model.DAX.PurchaseShipment>()

.Name("Shipment")

.Columns(columns =>

{

columns.Bound(c => c.CompanyId).Width(120);

columns.Bound(c => c.VendAccount).Width(120);

columns.Bound(c => c.VendShipId).Width(120);

columns.Bound(c => c.DeliveryMode).Width(120);

columns.Bound(c => c.ShipmentDate).Width(140).Format("{0:MM/dd/yy}");

columns.Bound(c => c.EstimateShipmentDate).Width(140).Format("{0:MM/dd/yy}");

columns.Bound(c => c.SourceOfData).Hidden(true).IncludeInMenu(false);

columns.Bound(c => c.RecVersion).Title("Rec Version").Hidden(true).IncludeInMenu(false);

columns.Bound(c => c.RecId).Title("RecId").Hidden(true).IncludeInMenu(false);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Excel();

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ShipmentEditor"))

.Pageable(p => p.PageSizes(true).PageSizes(new int[] { 20, 50, 100, 1000 }))

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.MultipleColumn);

})

.Filterable()

.Scrollable(scrollable =>

{

scrollable.Enabled(true);

scrollable.Height(450);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.CompanyId))

.Read(read => read.Action("PurchaseShipments_Read", "Shipment"))

.Create(create => create.Action("PurchaseShipments_Create", "Shipment"))

.Update(update => update.Action("PurchaseShipments_Update", "Shipment"))

.Destroy(destroy => destroy.Action("PurchaseShipments_Destroy", "Shipment"))

)

And Here is my Shipment Editor:

@model Portal.Model.DAX.PurchaseShipment

<style>

.cont {

padding-right: 5%;

padding-left: 5%;

margin-right: auto;

margin-left: auto;

padding-bottom: 5px;

}

.editor label {

float: left;

width: 100px;

text-align: right;

}

.editor input[type=text] {

width: 300px;

margin: 0 0 0 10px;

}

</style>

<script>

function filterByCompany() {

return {

companies: $("#companyDropDownList").val()

};

}

</script>

<div class="cont">

@Html.AntiForgeryToken()

<div class="form-horizontal">

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.HiddenFor(model => model.ShipId)

@Html.HiddenFor(model => model.RecVersion)

@Html.HiddenFor(model => model.RecId)

@Html.HiddenFor(model => model.SourceOfData)

<div class="editor form-group">

@Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = "control-label col-md-2" })

@( Html.Kendo().DropDownListFor(model => model.CompanyId)

.Name("companyDropDownList")

.DataTextField("Name")

.DataValueField("Id")

.OptionLabel("Select ship to company...")

.DataSource(s =>

{

s.Read(read =>

{

read.Action("Companies_Read", "Shipment");

});

})

.HtmlAttributes(new { style = "width: 240px"})

)

@Html.ValidationMessageFor(model => model.CompanyId, "", new { @class = "text-danger" })

</div>

<div class="editor form-group">

@Html.LabelFor(model => model.VendAccount, htmlAttributes: new { @class = "control-label col-md-2" })

@( Html.Kendo().DropDownListFor(model => model.VendAccount)

.OptionLabel("Select ship from company...")

.Name("Vendor")

.DataTextField("Name")

.DataValueField("VendId")

.DataSource(s =>

{

s.Read(read =>

{

read.Action("Vendors_Read", "Shipment")

.Data("filterByCompany");

});

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("companyDropDownList")

.HtmlAttributes(new { style = "width: 240px"})

)

@Html.ValidationMessageFor(model => model.VendAccount, "", new { @class = "text-danger" })

</div>

<div class="editor form-group">

@Html.LabelFor(model => model.DeliveryMode, htmlAttributes: new { @class = "control-label col-md-2" })

@(Html.Kendo().DropDownListFor(model => model.DeliveryMode)

.Name("deliveryMode")

.HtmlAttributes(new { style = "width:240px" })

.OptionLabel("Select Carrier...")

.DataTextField("Name")

.DataValueField("Id")

.DataSource(source => {

source.Read(read =>

{

read.Action("DeliveryMode_Read", "Shipment")

.Data("filterByCompany");

});

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("companyDropDownList")

)

@Html.ValidationMessageFor(model => model.DeliveryMode, "", new { @class = "text-danger" })

</div>

<div class="editor form-group">

@Html.LabelFor(model => model.VendShipId, htmlAttributes: new { @class = "control-label col-md-2" })

@(Html.Kendo().TextBoxFor(model => model.VendShipId)

.Name("VendShipId")

.HtmlAttributes(new { style = "width: 240px" })

)

@Html.ValidationMessageFor(model => model.VendShipId, "", new { @class = "text-danger" })

</div>

<div class="editor form-group">

@Html.LabelFor(model => model.ShipmentDate, htmlAttributes: new { @class = "control-label col-md-2" })

@(Html.Kendo().DatePickerFor(model => model.ShipmentDate)

.Name("ShipmentDate")

.HtmlAttributes(new { style = "width:240px" })

)

@Html.ValidationMessageFor(model => model.ShipmentDate, "", new { @class = "text-danger" })

</div>

<div class="editor form-group">

@Html.LabelFor(model => model.EstimateShipmentDate, htmlAttributes: new { @class = "control-label col-md-2" })

@(Html.Kendo().DatePickerFor(model => model.EstimateShipmentDate)

.Name("EstimateShipmentDate")

.HtmlAttributes(new { style = "width:240px" })

)

@Html.ValidationMessageFor(model => model.EstimateShipmentDate, "", new { @class = "text-danger" })

</div>

Grid

answered on 01 Oct 2015