Questions on UI for ASP.NET MVC Forum

1 answer

100 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

204 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

196 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

227 views

[Solved] 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

402 views

[Solved] 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

883 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

196 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

96 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

202 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

7 answers

153 views

[Solved] minified CSS files with IE8

when using

we get the below mentioned exception:

Illegal characters in path.
~/Content/kendo/fonts/DejaVu/DejaVuSans-Bold.ttf) format("truetype"

System.ArgumentException was unhandled by user code
HResult=-2147024809
Message=Illegal characters in path.
Source=mscorlib
StackTrace:
at System.IO.Path.CheckInvalidPathChars(String path, Boolean checkAdditional)
at System.IO.Path.Combine(String path1, String path2)
at System.Web.Configuration.UserMapPath.GetPhysicalPathForPath(String path, VirtualDirectoryMapping mapping)
at System.Web.Configuration.UserMapPath.GetPathConfigFilename(String siteID, VirtualPath path, String& directory, String& baseName)
at System.Web.Configuration.UserMapPath.MapPath(String siteID, String path)
at System.Web.Hosting.HostingEnvironment.MapPathActual(VirtualPath virtualPath, Boolean permitNull)
at System.Web.Hosting.HostingEnvironment.MapPathInternal(VirtualPath virtualPath, Boolean permitNull)
at System.Web.CachedPathData.GetPhysicalPath(VirtualPath virtualPath)
at System.Web.CachedPathData.GetConfigPathData(String configPath)
at System.Web.CachedPathData.GetVirtualPathData(VirtualPath virtualPath, Boolean permitPathsOutsideApp)
at System.Web.HttpContext.GetFilePathData()
at System.Web.HttpContext.GetConfigurationPathData()
at System.Web.Configuration.RuntimeConfig.GetConfig(HttpContext context)
at System.Web.Configuration.HttpCapabilitiesBase.GetBrowserCapabilities(HttpRequest request)
at System.Web.HttpRequest.get_Browser()
at System.Web.HttpResponse.ApplyRedirectQueryStringIfRequired(String url)
at System.Web.HttpResponse.Redirect(String url, Boolean endResponse, Boolean permanent)
at System.Web.HttpResponse.Redirect(String url, Boolean endResponse)
at FastStart.Web.Global.Application_Error(Object sender, EventArgs e) in C:\svn\newrxrequest\FastStart\Refactor\branches\20151018\FastStart.Web\Global.asax.cs:line 105
at System.EventHandler.Invoke(Object sender, EventArgs e)
at System.Web.HttpApplication.RaiseOnError()
InnerException:

General Discussions

answered on 30 Sep 2015