Questions on UI for ASP.NET MVC Forum

1 answer

182 views

Menu with only Images including a SubMenu of Text Links - text links are not showing up and url is not generated in href

Hello,
I am trying to implement a menu that uses Images for the parent level and has a sub menu that contains text links. The submenu text links are not showing. My code is below - any help is greatly appreciated.

View

@(Html.Kendo().Menu()

.Name("menuImagesNoText")

.BindTo(Model, mappings =>

{

mappings.For<WebConsole.Models.MenuItem>(binding => binding

.ItemDataBound((item, category) =>

{

item.ActionName = category.Action;

item.ControllerName = category.Controller;

item.ImageUrl = String.IsNullOrEmpty(category.ImageName) ? "": Url.Content(category.ImageName);

item.Selected = category.Selected;

item.ImageHtmlAttributes.Add("class", "sidebarImage");

})

.Children(category => category.MenuItems));

mappings.For<WebConsole.Models.MenuItem>(binding => binding

.ItemDataBound((item, childcategory) =>

{

item.Text = childcategory.LinkText;

item.ActionName = childcategory.Action;

item.ControllerName = childcategory.Controller;

}));

}).Orientation(MenuOrientation.Vertical).HighlightPath(false)

)

Controller

public ActionResult Index(int selected)

{

var MainMenu = new Menu()

{

MenuItems = new List<MenuItem>()

{

new MenuItem()

{

ImageName = "~/Images/home_orange.gif",

LinkText = "DASHBOARD",

Controller = "Home",

Action = "Index",

Ordinal = 1,

Selected = true

},

new MenuItem()

{

ImageName = "~/Images/new_white.gif",

LinkText = "NEW WORK ITEM",

Controller = "Home",

Action = "Index",

Ordinal = 2,

Selected = false,

MenuItems = new List<MenuItem>()

{

new MenuItem()

{

LinkText = "NEW INCIDENT",

Controller = "Home",

Action = "Index",

Ordinal = 1,

Selected = false

},

new MenuItem()

{

LinkText = "NEW CHANGE REQUEST",

Controller = "Home",

Action = "Index",

Ordinal = 2,

Selected = false

},

new MenuItem()

{

LinkText = "NEW SERVICE REQUEST",

Controller = "Home",

Action = "Index",

Ordinal = 3,

Selected = false

}

},

new MenuItem()

{

ImageName = "~/Images/team_white.gif",

LinkText = "MY TEAM'S WORK ITEMS",

Controller = "Home",

Action = "Index",

Ordinal = 3,

Selected = false

},

new MenuItem()

{

ImageName = "~/Images/my_white.gif",

LinkText = "ALL MY WORK ITEMS",

Controller = "Home",

Action = "Index",

Ordinal = 4,

Selected = false

}

};

return PartialView(MainMenu.MenuItems);

}

Generated HTML

<ul id="menuImagesNoText" class="k-widget k-reset k-header k-menu k-menu-vertical" data-role="menu" tabindex="0" role="menubar">

<li class="k-item k-state-selected k-state-default k-first" role="menuitem">

<a class="k-link" href="/">

<img class="k-image sidebarImage" src="/Images/home_orange.gif" alt="image">

</a>

</li>

<li class="k-item k-state-default" role="menuitem">

<a class="k-link" href="/">

<img class="k-image sidebarImage" src="/Images/new_white.gif" alt="image">

<span class="k-icon k-i-arrow-e"></span>

</a>

<ul class="k-group" role="menu" aria-hidden="true">

<li class="k-item k-state-default k-first" role="menuitem">

<a class="k-link" href="/"></a>

</li>

<li class="k-item k-state-default" role="menuitem">

<a class="k-link" href="/"></a>

</li>

<li class="k-item k-state-default k-last" role="menuitem">

<a class="k-link" href="/"></a>

</li>

</ul>

</li>

</ul>

Menu

answered on 03 Sep 2013

3 answers

196 views

Updating MVC4 project to latest Kendo UI gives: The call is ambiguous

I have an MVC4 solution where the models are placed inside a different project. Only one project inside the solution uses Kendo UI and with the latest release i I wanted to update the Keno UI from Q2 2012 to the latest Q2 2013. On any page where i use the html helpers (mvc wrapper) i now get the runtime error:

The call is ambiguous between the following methods or properties:

'Kendo.Mvc.UI.HtmlHelperExtension.Kendo<Pytheas.Domain.Models.mdlSpreekuur>(System.Web.Mvc.HtmlHelper<Pytheas.Domain.Models.mdlSpreekuur>)'

and

'Kendo.Mvc.UI.HtmlHelperExtension.Kendo<Pytheas.Domain.Models.mdlSpreekuur>(System.Web.Mvc.HtmlHelper<Pytheas.Domain.Models.mdlSpreekuur>)'

Where the model name is different for every page. If i remove the control (grid, menu, etc) all is fine and the page loads. If i then add for instance the sample code for the menu wrapper:

@(Html.Kendo().Menu()

.Name("menu") //The name of the menu is mandatory. It specifies the "id" attribute of the widget.

.Items(items =>

{

items.Add().Text("Item 1"); //Add item with text "Item1")

items.Add().Text("Item 2"); //Add item with text "Item2")

})

)

I again get the mentioned error, regardless if the control uses data or not it gives me this error. I have checked all script/css files and ofcourse the referenced assembly both in the project as in the build. Creating a new MVC project and adding Kendo.UI with the wrappers works fine though, it seems to be isolated to my project specificly.

Does anyone have a clue what's going on and how i can fix this?

Edit: If i dont use the wrapper then i can use the controls without a problem.

General Discussions

answered on 03 Sep 2013

1 answer

124 views

CheckChildren(true) Issue

When you run the sample project, you will notice that even though I have item with Id="1" checked, it does not render checked in the UI.

In the View I have:
.CheckChildren(true) // If change to CheckChildren(false) the issue goes away

In the controller I have:
model.CheckedNodes = new List<TreeViewItemModel>()
{
new TreeViewItemModel()
{
HasChildren = true,
Checked = true, // SUPPORT: This is checked here, but because it has children it does not render CHECKED in UI
Id="1",
Text = "A - this does not obey Checked attribute",
Items = new List<TreeViewItemModel>(){new TreeViewItemModel(){Id = "2",Text = "B"}}
}, new TreeViewItemModel()
{
HasChildren = false,
Checked = true,
Id="3",
Text = "C",
},
};

Create a new Kendo UI MVC project named "SampleKendoUITreeViewIssue" and drop the attached directories in the root of the project.

TreeView

answered on 03 Sep 2013

1 answer

108 views

Passing additional info when changing a cell

Hello,
I've got a grid, at the cell change I need to call a store procedure based on the cell changed.... since the grid sends the whole row, is there a way server side to understand which cell has fired the event?
Thanks

@(Html.Kendo()

.Grid<DO.Admin.Utente>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(x => x.IDDipendente).Visible(false);

columns.Bound(x => x.IDUtente);

columns.Bound(x => x.Nominativo);

columns.Bound(x => x.Societa);

columns.Bound(x => x.Filiale);

columns.Bound(x => x.Ruolo);

columns.ForeignKey(x => x.IDProfilo, (System.Collections.IEnumerable)ViewData["ListaProfili"], "ID", "Descr").Title("Profilo");//.EditorTemplateName("StatoTemplate");

columns.ForeignKey(x => x.IDFunzione, (System.Collections.IEnumerable)ViewData["ListaFunzioni"], "ID", "Descr").Title("Funzioni");//.EditorTemplateName("StatoTemplate");

columns.ForeignKey(x => x.IDStato, (System.Collections.IEnumerable)ViewData["ListaStati"], "ID", "Descr").Title("Stato");//.EditorTemplateName("StatoTemplate");

columns.Bound(x => x.AccessoEureka).ClientTemplate("<input class'k-checkbox' type='checkbox' name='cb#= IDDipendente#' #= AccessoEureka ? 'checked' : '' # /> ");

})

.Selectable( selectable =>

{

selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row);

})

.ToolBar(toolBar =>

{

toolBar.Save();

})

.Pageable()

.Scrollable()

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

.Sortable()

.Filterable()

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

.Events(events =>

{

events.Change("onRowChange");

//events.Edit("testEdit");

events.Save("testSave");

//events.SaveChanges("testSaveChanges");

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(model =>

{

model.Id(x => x.IDDipendente);

model.Field(x => x.IDUtente).Editable(false);

model.Field(x => x.Nominativo).Editable(false);

model.Field(x => x.Societa).Editable(false);

model.Field(x => x.Filiale).Editable(false);

//model.Field(x => x.Ruolo);

//model.Field(x => x.Profilo);

//model.Field(x => x.Funzioni);

//model.Field(x => x.Stato);

//model.Field(x => x.AccessoEureka);

})

.Read(read => read.Action("GetListaUtenti", "GestioneUtenti"))

.Update( "UpdateStato", "GestioneUtenti")

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

)

Controller

public ActionResult UpdateStato([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<IDEA20.DO.Admin.Utente> utenti)

{

if (utenti != null && ModelState.IsValid)

{

//foreach (var utente in utenti)

//{

// //product.Category = GetCategory(product.CategoryID);

// //SessionClientProductRepository.Update(product);

//}

}

return Json(utenti.ToDataSourceResult(request, ModelState));

}

Thanks

Grid

answered on 03 Sep 2013

1 answer

1.4K+ views

Editor show html tags after postback (use Encode(true) and decode by HttpUtility.HtmlDecode in server)

I have a view, use editor:
@using (Html.BeginForm("Index", "Home"))
{
@Html.Kendo().EditorFor(m=> m.MyHtml).Encode(true)

<input type="submit" value="Save" />
}

and in controller:
public ActionResult Index()
{
var viewModel = new ViewModel { MyHtml = "test <strong>html</strong>" };
return View(viewModel);
}

[HttpPost]
public ActionResult Index(ViewModel model)
{
model.MyHtml = Server.HtmlDecode(model.MyHtml);
//model.MyHtml == "test <strong>html</strong>" at here
return View(model);
}

the view in Get request is correct. Without any editing, click Save and after Post request, the view is showed html tags.

Does it is bug or not? How to show correct html after postback without Encode(fase) + [AllowHtml] in model?

Editor

answered on 02 Sep 2013

1 answer

143 views

Disable combo box after ajax load

Hi,

I use asp.net mvc helper to define combo boxes. I have 3 of them and the are all cascading. What I need is a way to disable them after their datasources are loaded (this is some edit functionality).
I try to use databound event handler but enable is not working, even more, it seems that control is automatically enabled after databound event is fired.
Can you please suggest some workaround?

Regards,
Vladica

ComboBox

answered on 30 Aug 2013

3 answers

154 views

ListView editable not working with complex objects

EditorTemplate:



<

div class="k-widget">

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

<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>

<dl>

<dt>

@Html.LabelFor(model => model.SharedWith)

</dt>

<dd>

@(Html.Kendo().MultiSelectFor(model => model.SharedWith)

.DataValueField("Id")

.DataTextField("Name")

.Placeholder("Type user's name...")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Users", "User");

});

})

.TagTemplate("<div class=""tag-image""><img src=""#: Picture #"" height=""32"" /></div>")

.ItemTemplate("<div class=""item-image""><img src=""#: Picture #"" height=""32"" /></div>"))

</dd>

</dl>

</div>

The list view display mode works fine, but as soon as I click edit, and it switches to the EditorTemplate, I get an error saying that Picture is undefined, even though the model that is being passed into the ListView constructor definitely has a fully populated SharedWith model.

ListView

answered on 30 Aug 2013

2 answers

119 views

Problem after having set the dropdown value

Hello,
I've a kendo UI grid that has a column with editortemplate....
He're the grid

@(Html.Kendo()

.Grid<DO.Admin.Utente>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(x => x.IDDipendente).Visible(false);

columns.Bound(x => x.IDUtente);

columns.Bound(x => x.Nominativo);

columns.Bound(x => x.Societa);

columns.Bound(x => x.Filiale);

columns.Bound(x => x.Ruolo);

columns.Bound(x => x.Profilo);

columns.Bound(x => x.Funzioni);

columns.Bound(x => x.Stato).EditorTemplateName("StatoTemplate");//ClientTemplate("#=stati.statiName#");

columns.Bound(x => x.AccessoEureka);

})

.Pageable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(x => x.IDDipendente);

model.Field(x => x.IDUtente).Editable(false);

model.Field(x => x.Nominativo).Editable(false);

model.Field(x => x.Societa).Editable(false);

model.Field(x => x.Filiale);

model.Field(x => x.Ruolo);

model.Field(x => x.Profilo);

model.Field(x => x.Funzioni);

model.Field(x => x.Stato);

model.Field(x => x.AccessoEureka);

})

.Read(read => read.Action("GetListaUtenti", "GestioneUtenti"))

)

And here's the editor template

@{

Layout = null;

}

@(Html.Kendo().DropDownList()

.Name("Stato")

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

.DataTextField("Descr")

.DataValueField("ID")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetListaStati", "Common", new { Area = string.Empty });

}).ServerFiltering(false);

})

)

Consider the List of Stato items
as

0 | Active
1 | Disactive

when I show the grid in read I've my columns that shows Active/Disactive based on a field called Stato that's string....
After I change the dropdown I got 0/1 instead.... how do I fix this?

Second question, in my model I also have a IdStato that's 0/1 and its used when updating the model.... should I put this as an Hidden column? how do I update that field as well?
Thank in advance
Paolo

Grid

answered on 30 Aug 2013

1 answer

115 views

Is it possible to have a Vertical Menu with Vertical children ?

Hello,

I would like to implement a vertical menu and for the child or sub menus have them pull down like an accordion style rather than flyout.

Is this possible or does anyone have an example I can look at?

Thanks.

Menu

answered on 30 Aug 2013

4 answers

66 views

Editor window self closes in IE10

When I double click on a event to edit it in IE 10, the edit window opens and closes by itself, if I open it a second time it stays open.
If I click on the event wait a second and then double click the edit window opens and stays open as it should.
But as explained above, the first double click on a event causes the windows to open and close.
Thanks

Scheduler

answered on 30 Aug 2013