Questions on UI for ASP.NET MVC Forum

1 answer

126 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

62 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

151 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

114 views

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

5 answers

376 views

populate the upload control after a post with a false ModelState.IsValue

I have a kendo upload control that gets posted with a form that has a variety of other fields. This works great when the user fills everything out correctly, the problem comes when there is an error with the post that causes ModelState.IsValid to be false. Normally I would repopulate the model and the form would have all of the entered values.

I cannot find a way to populate the kendo upload control so the old HttpPostedFileBase gets reposted on the next form post. Is this possible?

Thanks,
Logan

Upload

answered on 30 Sep 2015

1 answer

142 views

Error from Edit button for ListView in edit mode, cannot Update either

I am getting the following error when I am pressing the Edit button for the ListView. I am not sure why. The Data from the model appears and I can edit the input fields but it does not call the Update method on the controller.

Uncaught SyntaxError: Unexpected identifier

vt.getter @ kendo.all.min.js:9

ut.extend.get @ kendo.all.min.js:11

S.extend.get @ kendo.all.min.js:12

E.widget.value.v.extend.init @ kendo.all.min.js:12

b.extend.applyBinding @ kendo.all.min.js:13

I.extend.bind @ kendo.all.min.js:13

a @ kendo.all.min.js:12

s @ kendo.all.min.js:12

c.extend.refresh @ kendo.all.min.js:26

c.extend.init @ kendo.all.min.js:26

(anonymous function) @ kendo.all.min.js:10

b.extend.each @ jquery.min.js:3

b.fn.b.each @ jquery.min.js:3

vt.plugin.e.fn.(anonymous function) @ kendo.all.min.js:10

n.ui.DataBoundWidget.extend.edit @ kendo.all.min.js:33

(anonymous function) @ kendo.all.min.js:33

b.event.dispatch @ jquery.min.js:3

b.event.add.v.handle @ jquery.min.js:3

MVC Code for the ListView

@(Html.Kendo().ListView<RPMS.Models.ActualsHoursViewModel>(Model)

.Name("ListView")

.TagName("div")

.ClientTemplateId("ActualsHoursTemplate")

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id(m=>m.ActualsHoursModelsId);

model.Field(m => m.ProjectId);

model.Field(m => m.HoursAllocated);

model.Field(m => m.Activities);

}

)

.ServerOperation(true)

.Batch(true)

.Create(create => create.Action("kendo_Create", "ActualsHours"))

.Read(read => read.Action("kendo_Read", "ActualsHours", new { date = "" }))

.Update(update => update.Action("kendo_Update", "ActualsHours"))

.Destroy(destroy => destroy.Action("kendo_Destroy", "ActualsHours"))

.Events(events => events.Error("error_handler"))

)

.Editable()

.Events(ev => {

ev.DataBound("initDropDownLists");

}

)

.Selectable()

// .Events(events => events.Error("error_handler"))

)

ListView

answered on 30 Sep 2015

3 answers

121 views

Virtualization results in strange display behavior

Correct data is returned from the server, and it seems to be paging correctly, but I get a big empty dropdown list. What am I doing wrong? As far as I can tell, this code matches the code from the demo. Using v.2015.2.805.545.

Controller:

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request) {

var customers = Context.Customers.Where(c => c.DateDeleted == null);

var results = customers.ToDataSourceResult(request, ModelState, c => new CustomerSelectListItem(c));

return Json(results, JsonRequestBehavior.AllowGet);

}

public ActionResult CustomersValueMapper(int[] values) {

//this method exists to get a concrete "row number" for the value(s) in question.

//

//to fulfill this requirement, we're using List's FindIndex method over a collection of all customers stored in the Session

//

var indices = new List<int>();

var customers = GetAllCustomers();

if (values != null) {

//add all customers with indices >= 0

indices.AddRange(values.Select(value => customers.FindIndex(c => c.Id == value))

.Where(index => index >= 0));

}

return Json(indices, JsonRequestBehavior.AllowGet);

}

private List<Customer> GetAllCustomers() {

if (Session["allCustomers"] == null) {

Session["allCustomers"] = Context.Customers.Where(e => e.DateDeleted == null).ToList();

}

return (List<Customer>)Session["allCustomers"];

}

Javascript:

function valueMapper(options) {

console.log("valueMapper: options.value = " + options.value);

$.ajax({

url: "@Url.Action("CustomersValueMapper", "Equipment", new {area="Dispatch"})",

data: convertValues(options.value),

success: function (data) {

options.success(data);

}

});

}

function convertValues(value) {

var data = {};

value = $.isArray(value) ? value : [value];

for (var idx = 0; idx < value.length; idx++) {

data["values[" + idx + "]"] = value[idx];

}

return data;

}

View:

@(Html.Kendo().DropDownList()

.Name("customerId")

.DataValueField("Value")

.DataTextField("Text")

.DataSource(ds => ds.Custom()

.ServerPaging(true)

.PageSize(80)

.Type("aspnetmvc-ajax") //uses DataSourceRequest

.Transport(transport => transport.Read("GetCustomers", "Equipment", new { area = "Dispatch" }))

.Schema(schema => schema

.Data("Data")

.Total("Total"))

).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))

)

DropDownList

answered on 29 Sep 2015

2 answers

286 views

custom pop up editor for grid - dropdown list

Hello everyone.

I am doing a proof of concept with telerik mvc grid controls and am in the following situation.

1. Using the Kendo Grid i am trying to do the following..

a Popup Edit screen with a Custom template with a dropdown list that calls the controller for additional info.

Here is the code i have so far

columns.ForeignKey(p => p.CASH_ISIN_CHR, (System.Collections.IEnumerable)ViewData["cashisnnames"], "ISIN_CHR", "Name_CHR").Title("CASH ISIN").EditorTemplateName("CashISINEditor");

columns.ForeignKey(p => p.CURRENCY_ISIN_CHR, (System.Collections.IEnumerable)ViewData["currencyisnnames"], "ISIN_CHR", "Name_CHR").Title("CURRENCY ISIN").EditorTemplateName("CurrencyISINEditor");

columns.Bound(c => c.Units_INT).Title("UNITS");

columns.Bound(c => c.Local_Amount_DEC).Title("Local Amt");

columns.Bound(c => c.Trade_DATE).Format("{0:d}").Title("Trade Date");

columns.Bound(c => c.Settlement_DATE).Format("{0:d}").Title("Settle Date");

columns.Bound(c => c.Custodian_Reference_Num_CHR).Title("Cust. Ref #");

columns.Bound(c => c.Entered_DNT).Format("{0:d}").Title("Entered Date");

columns.Bound(c => c.FX_Rate_DEC).Title("FX Rate");

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

})

.ClientDetailTemplateId("template")

.ToolBar(toolbar =>

{

toolbar.Excel();

toolbar.Pdf();

})

.Excel(excel => excel.FileName("Transaction Master Export.xlsx").AllPages(true)

)

.Pdf(pdf => pdf.AllPages())

.ColumnMenu()

.HtmlAttributes(new { style = "height:750px;" })

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

.Pageable()

I have an editor template called CustomTransactionMasterEditor and the code in it looks like this:

@model BetaSMTRApp.Models.Transaction_Master

<h3>Custom Transaction Master</h3>

@Html.TextBoxFor(model => model.FUND_INT).ToString()

@Html.TextBoxFor(model => model.TYPE_CHR)

@(Html.Kendo().DropDownListFor(m => m)

.Name("cashisndd")

.DataValueField("ISIN_CHR")

.DataTextField("Value")

.DataSource(ds => ds

.Read(read => read.Action("GetCASHISIN", "TransactionMaster", new { FundInt = 223, TypeChr = "Expense" })

))

In the TextBoxFor fields i am getting fund int and type chr... both of which i need to pass in the .Read on the data source line. When i try to use Model it is null.

How can i get the textbox for value into the new section of the .Read?

Thanks,

Corey

Grid

answered on 29 Sep 2015

2 answers

58 views

Non self-referencing On Demand Sample

I am looking for an example that loads a treeview from data that is not self-referencing (no ParentID field) but with specific category levels. If my data looks like:
ID   Lastname    Firstname City       State
1     Davolio        Nancy          Seattle WA
2     Fuller           Andrew        Tacoma WA
3     Washington George          Dallas     TX
4    Leverling      Janet            Kirkland WA
5     Peacock      Margaret      Seattle    WA
6     Doe              Jane             Austin     TX
7     Doe              John             Dallas     TX

… I want it to come out like this:
TX
└ Austin
          └ Jane Doe
└ Dallas
          └ George Washington
          └ John Doe
WA
  └ Kirkland
            └ Janet Leverling
└ Seattle
            └ Nancy Davolio
            └ Margaret Peacock
   └ Tacoma
            └ Andrew Fuller

I also would like it to load on demand (JsonResult) as each state and city gets expanded.
Is there an example on how to build the tree like this?

TreeView