Questions on UI for ASP.NET MVC Forum

1 answer

221 views

Building PanelBar Children Rescursively and Binding to Model

Hello,

Is it possible to have the panelbar nesting be recursive? Let's say we are binding to a list of objects inside the model like this:

public class Activity

{

public string ActivityId { get; set; }

public string Description { get; set; }

public List<Activity> Activities { get; set; }

}

PanelBar

answered on 20 Sep 2013

2 answers

400 views

[Solved] Filter Grid using DateTimePicker - String was not recognized as a valid DateTime

I have a grid to display audits with a datetime field.

I want to have a separate datetimepicker to the grid that i can use to filter the grid results.

I am struggling to get the value of the datetimepicker in the correct format for C# when the request gets posted back.

I receive 'String was not recognized as a valid DateTime'.

The format of the date is en-gb so DD/MM/YYYY HH:mm

If I manually make the format US ie MM/DD/YYYY etc then this works, but we are english and want the format of the datetimepicker to be in en-gb.

How can i get this to work. I really need the time as well as the date.

Here is my grid

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

.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.AuditCode);
columns.Bound(p => p.AuditId).Width(60);
columns.Bound(p => p.AuditText1).Width(200);
columns.Bound(p => p.AuditText2);
columns.Bound(p => p.AuditText3);
columns.Bound(p => p.AuditValue1);
columns.Bound(p => p.AuditValue2);
columns.Bound(p => p.DateTime);
})

.Pageable(p => p.PageSizes(true))
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:355px;" })
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Audit_Read", "Support"))

)
)

Here is my date picker

<td>@(Html.Kendo().DateTimePicker().Name("datetimepicker"))</td>

This is the script for searching the grid

<script>
$(document).ready(function () {
$("#GO").click(function () {
$filter = new Array();

$fromDateTime = $("#datetimepicker").val();
$toDateTime = $("#datetimepicker2").val();

dateFromFilter = $fromDateTime;
dateToFilter = $toDateTime;

if (dateFromFilter) { $filter.push({ field: "DateTime", operator: "isgreaterthanorequalto", value: dateFromFilter }); }
if (dateToFilter) { $filter.push({ field: "DateTime", operator: "islessthanorequalto", value: dateToFilter }); }

var grid = $("#Grid").data("kendoGrid");

grid.dataSource.filter($filter);
});
});

</script>

Grid

answered on 20 Sep 2013

1 answer

599 views

Kendo UI ASP.NET MVC Html.EditorFor() with styling problem

Hi,

I use Kendo UI ASP.NET MVC with VB.NET. My question is:
How I can define the width for the @Html.EditorFor() width css?

SampleView.vbhtml
        <td class="editor-field">
            @Html.EditorFor(Function(model) model.Tel1)
            @Html.ValidationMessageFor(Function(model) model.Tel1)
        </td>

I tried to define a css style like this:

Site.css

#small-editfor
{
width:30px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}

SampleView.vbhtml
        <td class="editor-field">
            @Html.EditorFor(Function(model) model.Tel1,Nothing, "small-editfor",Nothing)
            @Html.ValidationMessageFor(Function(model) model.Tel1)
        </td>

With this solution I see the width
30px, but the value of the property Tel1 would’t be available on the server.

I tried this also without success:

SampleView.vbhtml
        <td class="editor-field">
            @Html.EditorFor(Function(model) model.Tel1 New With { .class=”small-editfor”})
            @Html.ValidationMessageFor(Function(model) model.Tel1)
        </td>

        <td class="editor-field">
            @Html.EditorFor(Function(model) model.Tel1 New With { .style=”width:30px”})
          @Html.ValidationMessageFor(Function(model) model.Tel1)
        </td>

Does anyone have an idea?

General Discussions

answered on 20 Sep 2013

1 answer

292 views

[Solved] TreeView with Remote Databinding example using Id that is a string

Hello,

I am trying to implement a TreeView using remote binding. My datasource Id property is actually a string not an integer - I am having trouble getting this working - can you advise where I am going wrong? My code is below.

Thanks,
Carrie

View

@(Html.Kendo().TreeView()

.Name("treeviewTierQueue")

.DataTextField("Text")

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetTierQueueList", "Enum"))

))

Controller

public JsonResult GetTierQueueList(string level)

{

var items = new List<NestedSelectListItem>()

{

new NestedSelectListItem {Id = "0", Text = "All Analysts"},

new NestedSelectListItem {Id = "1", Text = "All Groups"},

new NestedSelectListItem {

Id = "2",

Text = "Service Desk",

hasChildren=true,

Items = new List<NestedSelectListItem> ()

{

new NestedSelectListItem {Id = "2a", Text = "2nd Level"},

new NestedSelectListItem {Id = "2b", Text = "2nd Level B"},

new NestedSelectListItem {

Id = "2c",

Text = "2nd Level C",

hasChildren= true,

Items = new List<NestedSelectListItem> ()

{

new NestedSelectListItem {Id = "3a", Text = "3rd Level"},

new NestedSelectListItem {Id = "3b", Text = "3rd Level B"}

}

} } }

};

if (!String.IsNullOrEmpty(level))

{

var filtered = items.First(i => i.Id == level).Items;

items = filtered;

}

return Json(items.AsEnumerable(), JsonRequestBehavior.AllowGet);

}

TreeView

answered on 19 Sep 2013

1 answer

132 views

Combo box doesnt call the read function each time the page is loaded in IE

in IE 8,9,10 (haven't tested anything lower) the read function only gets called once even if navigate back and then reopen the page.

My data is partners are made up of properties. so in the property edit page i have a combobox that is filled with active partners(its a bit field) i have the read saying only grab active partners to fill the combobox. the first time you enter the property edit page for property 1 it calls the read and populates the combobox with partners 1, 2, 3. Now if you navigate away from that page and mark partner 1 as not active then go back to any property edit page property 1,2,3,4,5 the combobox still shows the now inactive partner 1. in chrome this works fine and it calls read again on page load and the dropdown only has 2,3 but in ie it never calls it again unless you hit refresh on the page. and even calling datasource.read in script doesnt call the read function again.

This is an issue with ie caching things and not pulling from the server (if you open f12 developer tools in ie and select 'Cache' and then 'Always refresh from server' it works just like chrome does) but even when i turn on server filtering it never tries to repull. i have no idea how to fix this issue. I cant tell people visiting my site that they have to go into ie options and turn off caching.

ComboBox

answered on 19 Sep 2013

1 answer

283 views

[Solved] ListView with editor template for foreign key type

Hello, I am having an issue where I have not been able to associate a selected item from a DropDownList to the submitted values of an editor template from my ListView.

Partial view that renders the ListView:

@(Html.Kendo().ListView<CorrectiveActionItemModel>()

.Name("corrective-action-items-listview")

.TagName("div")

.ClientTemplateId("corrective-action-item-view-template")

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("CorrectiveActionItemID");

model.Field(f => f.CorrectiveActionPlanID).DefaultValue(this.Model.CorrectiveActionPlanID);

model.Field(f => f.CorrectiveActionItemType);

})

.PageSize(1)

.Create(create => create.Action("Item_Create", "CorrectiveActionItem", new { this.Model.CorrectiveActionPlanID }))

.Read(read => read.Action("Items_Read", "CorrectiveActionItem", new { this.Model.CorrectiveActionPlanID }))

.Update(update => update.Action("Item_Update", "CorrectiveActionItem"))

.Destroy(destroy => destroy.Action("Item_Destroy", "CorrectiveActionItem"))

)

.Pageable()

.Editable())

Editor Template for CorrectiveActionItemModel:

@using Steton.Web.MVC.Model

@model CorrectiveActionItemModel

<div class="corrective-action-item-display">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

@Html.HiddenFor(m => m.CorrectiveActionItemID)

@Html.HiddenFor(m => m.CorrectiveActionPlanID)

<div class="action-section">

@Html.LabelFor(m => m.DirectiveText)

@Html.TextAreaFor(m => m.DirectiveText)

</div>

<div class="action-section">

@Html.LabelFor(m => m.ActionTakenText)

@Html.TextAreaFor(m => m.ActionTakenText)

</div>

<div class="action-section">

<div style="clear:both">

<div class="action-sub-edit-section">

<div>

@Html.LabelFor(m => m.DueDate)

@(Html.Kendo().DatePicker()

.Name("DueDate")

.Value("12/31/2013"))

</div>

<div>

@Html.LabelFor(m => m.IsCompleted)

@Html.CheckBoxFor(m => m.IsCompleted)

</div>

<div class="action-sub-edit-section">

<div>

@Html.LabelFor(m => m.CorrectiveActionItemType)

@Html.EditorFor(m => m.CorrectiveActionItemType)

</div>

Editor template for CorrectiveActionItemType:

@using System.Collections

@(Html.Kendo().DropDownList()

.Name("CorrectiveActionItemType")

.DataTextField("TypeName")

.DataValueField("CorrectiveActionItemTypeID")

.DataSource(read => read.Read("Types","CorrectiveActionItem", new { correctiveActionPlanID = "#=CorrectiveActionPlanID#" })))

Now, when the CorrectiveActionItemModel is submitted I do not get any item in the POST for CorrectiveActionItemType. I suspect that there is some binding or setup that needs to occur in order to get the DropDownList's value to be associated to the model of CorrectiveActionItemModel.

I have tried following the pattern at Editor template documentation, but I could not get the .BindTo((IEnumerable)ViewData["CorrectiveActionType"])) even though I added it the controller that renders the ListView.

Any thoughts or ideas would be appreciated, thanks.

ListView

answered on 19 Sep 2013

1 answer

108 views

Hi

Using ajax my data source is configured as follow:

.Read(read => read.Action("Containers_Read", "ContainerAdmin"))

.Create(update => update.Action("Containers_Create", "ContainerAdmin"))

.Update(update => update.Action("Containers_Update", "ContainerAdmin"))

.Destroy(update => update.Action("Containers_Delete", "ContainerAdmin"))

When my grid first loads all the related entities with data comes through from the repository just fine:

public ActionResult Containers_Read([DataSourceRequest] DataSourceRequest request)

{

return Json(_repository.GetAllAssetTakeOnContainers().ToDataSourceResult(request));

}

public List<AssetTakeOnContainer> GetAllAssetTakeOnContainers()

{

using (var context = new AssetTakeOnContext())

{

context.Configuration.LazyLoadingEnabled = false;

return context.AssetTakeOnContainers.Include("TakeOns").Include("LocationLevel1").Include("LocationLevel2").Include("LocationLevel3").Include("CostCntrLevel1").Include("CostCntrLevel2").Include("CostCntrLevel3").Include("Contact").Include("RoomType").Where(c => c.IsDeleted == false).ToList();

}

But as soon as I do an update my related entities seems to be populated but all properties set to null:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Containers_Update([DataSourceRequest] DataSourceRequest request, AssetTakeOnContainer container)

{

_repository.UpdateAssetTakeOnContainer(container);

return Json(ModelState.ToDataSourceResult());

}

Please see attached file for a screenshot from VS.

Can someone please tell me why this is and what I'm doing wrong here?

Thanks

Grid

answered on 19 Sep 2013

1 answer

163 views

Kendo UI 2013.2.918 zip file corrupted?

Hi,

I try to download the following file "kendoui.aspnetmvc.2013.2.918.commercial.zip", the website said it is 16mb but after downloaded it only has 10mb, open the zip displayed error message. Thanks.

Installer and VS Extensions

answered on 19 Sep 2013

9 answers

168 views

Paging issue after upgrade to v2013.2.716

I seem to have hit an issue with paging after upgrading to the latest version of kendo.

It happens with ajax and server binding. It appears that the filter data for the data source passes undefined values, which results in a 500 error on the server when it tries to bind to the filter values. If I apply a filter, paging starts to work again.

(server binding example)

Grid Code
@(Html.Kendo()
.Grid(Model.Items)
.Name("operatorList")
.DataSource(ds => ds.Server())
.Columns(columns =>
{
columns.Bound(c => c.Name);
})
.Filterable()
.Pageable())

Action
public ActionResult Index()
{
var vm = new LookUpIndexViewModel<T>();
vm.Recent = GetRecentlyActive();
vm.Items = All();
return View(vm);
}

Url Requested (when paging)
http://localhost/browse/operator?operatorList-sort=&operatorList-page=2&operatorList-pageSize=15&operatorList-group=&operatorList-filter=undefined~undefined~undefined

Scripts Included (in this order)
<script src="/scripts/kendo.all.js"></script>
<script src="/scripts/kendo.aspnetmvc.js"></script>
doulbe checked versions also both say: v2013.2.716

Stack Trace
[NullReferenceException: Object reference not set to an instance of an object.]
Kendo.Mvc.Infrastructure.Implementation.FilterNodeVisitor.Visit(PropertyNode propertyNode) +60
Kendo.Mvc.UI.DataSourceRequestModelBinder.BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) +465
Kendo.Mvc.UI.Grid`1.ProcessDataSource() +395
Kendo.Mvc.UI.Grid`1.WriteHtml(HtmlTextWriter writer) +1145
Kendo.Mvc.UI.WidgetBase.ToHtmlString() +105
Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.ToHtmlString() +19
System.Web.WebPages.WebPageExecutingBase.WriteTo(TextWriter writer, Object content) +57
CtrlDev.Wdb.Web.Areas.Browse.Views.Operator.Index.Execute() in f:\Projects\CtrlDev.WDB\CtrlDev.Wdb.Web\Areas\Browse\areas\browse\views\operator\Index.cshtml:26
System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +279
System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +124
System.Web.WebPages.StartPage.ExecutePageHierarchy() +142
System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +103
RazorGenerator.Mvc.PrecompiledMvcView.Render(ViewContext viewContext, TextWriter writer) +951
System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +377
System.Web.Mvc.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() +32
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +263
System.Web.Mvc.Async.<>c__DisplayClass25.<BeginInvokeAction>b__22(IAsyncResult asyncResult) +236
System.Web.Mvc.<>c__DisplayClass1d.<BeginExecuteCore>b__18(IAsyncResult asyncResult) +28
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15
System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +42
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15
System.Web.Mvc.<>c__DisplayClass8.<BeginProcessRequest>b__3(IAsyncResult asyncResult) +42
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +1725
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +560

Found this question on SO, not sure if it is related, but it sounds like it.

Any help would be greatly appreciated!

Thanks!
Josh

Grid

answered on 19 Sep 2013

1 answer

316 views

Paging gives 404 error when using .DataSource

I am having trouble getting Paging to work while using the DataSource option on a Kendo UI Grid, using MVC wrappers.

When I comment out the DataSource code, paging works just fine.
When I use the DataSource option, it gives me a 404 "not found" error when I try to move to another page.

See the attached screenshots for my code. One screenshot is the .cshtml file. The other is the Controller.

Can anyone please help?

Grid

answered on 18 Sep 2013