Questions on UI for ASP.NET MVC Forum

1 answer

430 views

how do I make chart responsive to screen resize like grids are?

Chart

answered on 04 Nov 2013

2 answers

371 views

Validation event handler e.errors is undefined

I have a kendo grid with two sub grids. The last subgrid has inline edit. (See code below for grids)

I have the following error method. The first error message displays: "In the error handler method." The second alert says "object [Object]" and the third message says "undefined." Since its undefined the
if(e.errors) statement is not run and no errors are displayed.

I break on the controller and the ModelState.IsValid = false and I see two items that have Errors Count = 1. I have even hardcoded an error like: ModelState.AddModelError("From", "From is required");.

function error_handler(e) {

alert("In the error handler method.");

alert(e);

alert(e.errors);

if (e.errors) {

alert("Has errors.");

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

alert("Errors:" + key + value);

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

Here is the code for the grids:

@(Html.Kendo().Grid<HtramDivision>()

.Name("grid")

.Columns(columns => columns.Bound(d => d.Name).Title("Divisions"))

.ClientDetailTemplateId("templateSub")

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

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Divisions", "Division", new { projectID = Model.ProjectID }))

)

.Scrollable()

)

<script id="templateSub" type="text/kendo-tmpl">

@(Html.Kendo().Grid<HtramSubDivision>()

.Name("grid_#=DivisionID#")

.Columns(columns =>

{

columns.Bound(s => s.Name).Title("SubDivisions");

})

.ClientDetailTemplateId("templateCat")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("SubDivisions", "SubDivision", new { projectID = Model.ProjectID, divisionID = "#=DivisionID#" }))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

<script id="templateCat" type="text/kendo-tmpl">

@(Html.Kendo().Grid<HtramProjectCategoryResults>()

.Name("grid_#=SubDivisionID#")

.Columns(columns =>

{

columns.Bound(pcr => pcr.From).Width(80);

columns.Bound(pcr => pcr.To).Width(80);

columns.ForeignKey(pcr => pcr.CategoryID, (System.Collections.IEnumerable)ViewData["categories"],

"CategoryID", "Name").EditorTemplateName("CategoriesDropDownList").Width(300);

columns.ForeignKey(pcr => pcr.CategoryValueID, (System.Collections.IEnumerable)ViewData["categoryValues"],

"CategoryValueID", "Name").EditorTemplateName("CategoryValueDropDownList").Width(300);

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

})

.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Model(model =>

{

model.Id(pcr => pcr.ProjectsCategoryResultsID);

model.Field(pcr => pcr.ProjectsCategoryResultsID).Editable(false);

})

.Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))

.Create(create => create.Action("CategoryResultsCreate", "Category"))

.Update(update => update.Action("CategoryResultsUpdate", "Category"))

.Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

Grid

answered on 04 Nov 2013

1 answer

190 views

Autocomplete - Horizonal scroll bar

Is there anyway to have autocomplete has a horizonal scroll bar if the text is longer than the width of the Autocomple so it can avoid text wrap.

Thanks!

AutoComplete

answered on 01 Nov 2013

1 answer

151 views

[Solved] Display Distinct Values in Parent Node Of TreeView

Hello,

I have been having issues displaying distinct values for the parent nodes. I have attached some sample files to show you what it is doing.

Thanks

BT

TreeView

answered on 01 Nov 2013

1 answer

230 views

Automatically show centered loading image on Kendo Web ListView, as the Grid does?

Is there any setting for the ListView (Web / MVC) that would show the same loading image / spinner as the Grid does by default?

Why should it behave any differently when loading its content via ajax?

Thanks,
-Dave

ListView

answered on 01 Nov 2013

1 answer

242 views

Kendo Mobile ASP MVC Tutorial

Would anyone be able to point me in the direction of a tutorial on how to set up and configure a basic mobile website in Visual Studio using the Kendo UI? I can find examples for Kendo Mobile and examples for Kendo ASP MVC, but none that seem to combine the two. Other examples I've found relate more to how to package the apps for publishing to the app store which is not really what I'm looking for either. Even a pre-configured sample project that I could download and run in VS would be useful as a starting point.

Thanks for any help!

General Discussions

answered on 31 Oct 2013

1 answer

935 views

how to check checkeboxes based on a condition

Hello,

I've got a treeview which is bound client side and displays checkboxes.
On page load I need to check some of them based on a condition.

element.kendoTreeView({

dataSource: data,

checkboxes: {

name: "checkedData",

template: "<input type='checkbox' name='checkedData' value='#= item.text #' />"

}

});

data is created like this :
data.push({
text: item.someName, checked : checked
});

I can't add a "checked='#= item.checked#'" in the template because this will check everything regardless of what I have in item.checked - it's an html thing.
So how can I achieve this ?

TreeView

answered on 31 Oct 2013

3 answers

290 views

Kendo Menu - Theme Builder - on hover, child menu transparent

What CSS property am I missing or do I need to add so that my child menu will show up when I hover over the parent item in IE?

Currently, when I hover over the parent item that has a child menu, you can see the border around the child menu, but the menu itself is transparent in IE. Only after I hover over an item in the child menu does the background-color and text show up using IE. Firefox and chrome both work as expected. I did use the theme builder based on the silver theme, but only changed the gradient of the widget and the gradient of the widget states. In order to get the gradients to show up correctly in IE, I had to add these lines of code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3695b3, endColorstr=#00536e, GradientType=0);

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3695b3, endColorstr=#00536e, GradientType=0);

Is there a better way to get the gradient working in IE and is this related to the child menu not showing?

An image is attached to show what I see. Any ideas?

Menu

answered on 31 Oct 2013

1 answer

216 views

Missing Examples

I'm trying to find the Examples that according to multiple posts should be at C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2013\wrappers\aspnetmvc\Examples.

My version was recently updated by the Telerik Control Panel and I don't have the Examples folder. (I do have Binaries, EditorTemplates, LegacyThemes.)

Have they been moved or removed? Hard to follow the demos without the Example model code.

Thanks,
Jeff Trotman

Installer and VS Extensions

answered on 31 Oct 2013

2 answers

130 views

Kendo GRID different behavior on column template between local debug and deployed site

Hi all

I'm running into an annoying problem with the grid colum template.

I have a ASP.NET MVC 4 app that use a kendo grid to render a set of dynamic column.

The razor code of the view is something like this

<div>

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

.Name("GridReportCommerciale")

.Columns(columns =>

{

columns.Bound(p => p.Workcentre)

.Template(@<div onclick="openVincoli('@item.Workcentre')" class="contentCell" style="font-weight:bold;font-size:11px" >@item.Workcentre</div>)

.Title("WC").Width(60);

foreach (var sett in Model.SettimaneVisibili)

{

columns.Template(@<text>

@if (item[sett.Clone()] != null && item[sett.Clone()].Diametro > 0)

{

if (item[sett].Stato == "R")

{

<div onclick="openCampaign('@item[sett.Clone()].RiferimentoCampagna')" class="contentCell" style="background-color:#FF8C00;">

<div>@string.Format("{0:0.00}", item[sett.Clone()].Diametro)</div>

<div>@string.Format("({0:#,##0})", item[sett.Clone()].Quantita)</div>

</div>

}

else

{

<div onclick="openCampaign('@item[sett.Clone()].RiferimentoCampagna')" class="contentCell" style="background-color:#FFFFE0;">

<div>@string.Format("{0:0.00}", item[sett.Clone()].Diametro)</div>

<div>@string.Format("({0:#,##0})", item[sett.Clone()].Quantita)</div>

</div>

}

else

{

<div class="contentCell" >

<div> </div>

</div>

}

</text>)

.HeaderTemplate(

@<div>

<div>@string.Format("{0:00}-{1:0000}", sett.Clone().NumeroSettimana, sett.Clone().Anno)</div>

<div>@string.Format("{0}", sett.Clone().GetDayRange())</div>

</div>)

.Width(70);

}

})

.Scrollable()

.ToolBar(t=>{

t.Template(@<div class="k-toolbar k-grid-toolbar k-grid-top">

<a class="k-button k-button-icontext " href="/ReportCommerciali?pos=-1">

<span></span>

Indietro

</a>

<a class="k-button k-button-icontext " href="/ReportCommerciali?pos=1">

<span></span>

Avanti</a>

<span>@Model.VisibleRangeDescription</span>

</div>);

})

//.Resizable(resize => resize.Columns(true))

//.Reorderable(reorder => reorder.Columns(false))

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

)

</div>

The problem is that in debug mode this snippet work properly and produce the expected result.
Once deployed (on a Windows Server 2008 R2, IIS 7.5) the snippet render the right number of column but in all of them show data of the last item
of the collection Model.SettimaneVisibili on which i'm iterating.

I've attached two images that show the good (expected) result, and the wrong one.

Any Idea?

Grid

answered on 31 Oct 2013