Questions on UI for ASP.NET MVC Forum

1 answer

203 views

I have an edit view for a particular model. The view contains the following Kendo autocomplete control code:

 @(Html.Kendo().AutoCompleteFor(model => model.Location).Placeholder("Please select a value")
               .Name("locationAutoComplete").BindTo((IEnumerable<LocationData>)ViewData["locationList"])
               .DataTextField("Name")) //Specifies which property of the Product to be used by the autocomplete.
               ;

The drop down auto complete is working. However, existing values on the model (Location property) are not bound to the control. When I open up an existing record in edit mode the autocomplete control is empty, even if the underlying Location property on the model has a value. How does this control handle binding?

AutoComplete

answered on 18 Feb 2013

10 answers

252 views

IE - Editor Focus (Bug)

When using IE (tested in version 7-10) you must click on the first empty line for the editor to gain focus. FireFox and Chrome do not exhibit this behavior with the Editor control.

Example: While using Firefox or Chrome you can click anywhere inside the Editor box and it will gain focus (The mouse cursor changes to an I-Beam anywhere in the Editor window). In Internet Explore you will only gain the I-Beam cursor when you are hovering over areas where text exists.

This behavior is easily replicated by dropping a default Editor control onto a page. the behavior can been seen on the demo site even: http://demos.kendoui.com/web/editor/index.html

Editor

answered on 18 Feb 2013

1 answer

589 views

Upload control with special characters in file name

Kendo UI: MVC 2012.3.1114 Commercial
OS: Windows 7 64 bit
Browser: IE 9
JQuery: 1.8.2

When uploading a file with special characters (for example "&#170.xlsx") using the Upload control with "showFileList" option turned on, the special characters are processed. What would be desirable is to have the file list show the filename as the user sees it on their machine. It would make sense to see an apostrophe, but not see special HTML codes or JavaScript processed. This can be viewed by uploading a file with the name "&#170.xlsx" using the demo Upload control at http://demos.kendoui.com/web/upload/index.html. What can be done about this? Thanks.

Upload

answered on 18 Feb 2013

0 answers

81 views

Best practice - CRM business solution

Hello, let me state that I just started to use Telerik Kendo UI.
I'm creating a simple CRM to manage customers of our companies, using ASP.NET MVC, OpenAccess ORM and Kendo UI.

It will use mainly kendo grid to access and manipulate data from a SQL db.

I wish I had some advice from you experts: it is better to use standard controller and access the data via dbContext or work with API services (ODATA3 / ASP.NET API) and bind the grid to API result?

Thanks in advance for your answers,
Luca

General Discussions

asked on 18 Feb 2013

5 answers

145 views

kendo remote virtualization scroll issue in IE 8.0

I have noticed an intermittent error with scrolling when using remote virtualization in IE 8.0.
Here are the steps to reproduce the error:

1) Sort the grid by a single column in ascending order
2) Drag the scroll bar down to the bottom of the grid as quickly as you can

In some cases the last few records are not the ones you would expect based on the sort.

This is also reproducable in your online demo. If you sort by Order ID ASC you will in some cases not see the number 11077 as the last entry in the grid.
Seems like the grid corrects itself if you scroll up from the bottom (just a tiny amount is needed).

Thanks
Tor

Grid

answered on 15 Feb 2013

7 answers

346 views

[Solved] Any plan to add Scaffolding templates to ASP.Net MVC using Kendo?

It would be great if Kendo team can add Scaffolding templates to MVC templates for CRUD operation using Kendo's controls.
Any play or thoughts on that?

Thanks!
..Ben

General Discussions

answered on 15 Feb 2013

4 answers

353 views

grid layout

Hi,
I need to customize the layout for a grid. Can you explain how can I do this, please?

THIS IS MY CODE

AnagraficaRistoratoriEspositori.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewsMasterPage.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="phdContent" runat="server">

<h2>Gestione Anagrafica Ristoratori/Organizzatori</h2>

<%: Html.Kendo().Grid<Sopra.Fmspa.BusinessLayer.ViewModels.AnagraficaViewModel>()

.Name("Grid")

.HtmlAttributes(new { Style = "height:700px; width:1200px;" })

.Columns(columns =>

{

columns.Bound(e => e.Id).Hidden();

columns.Bound(e => e.RagioneSociale)

.Filterable(filterable => filterable.UI("RagioneSocialeFilter"))

.Width(300);

columns.Bound(e => e.TipologiaAnagrafica)

.Filterable(filterable => filterable.UI("TipologiaAnagraficaFilter"))

.Width(300)

.ClientTemplate("# try {# #=TipologiaAnagrafica.Descrizione# #} catch (e) {}#");

columns.Bound(e => e.Padiglione)

.Filterable(filterable => filterable.UI("PadiglioneFilter"))

.Width(300)

.ClientTemplate("# try {# #=Padiglione.Descrizione# #} catch (e) {}#");

columns.Bound(p => p.Descrizione).Width(300);

columns.Bound(e => e.FlagEstero)

.Filterable(filterable => filterable.UI("FlagEsteroFilter"))

.Width(150);

// Batch editing

//columns.Command(command => command.Destroy()).Width(100);

// InLine editing or PopUp editing

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

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

})

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

.Reorderable(reordering => reordering.Columns(true))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Inizia per")

.IsEqualTo("Equivale a")

.IsNotEqualTo("Differisce da")

))

)

.Groupable()

// Batch editing

//.ToolBar(toolbar =>

// {

// toolbar.Create();

// toolbar.Save();

// })

// InLine editing

//.ToolBar(toolbar => toolbar.Create())

.ToolBar(toolbar => toolbar.Create())

// Batch editing

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

// InLine editing

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

// PopUp editing

//.Editable(editable => editable.Mode(GridEditMode.PopUp))

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

.Pageable()

.Sortable()

.Scrollable()

.ColumnMenu()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.PageSize(100)

.Batch(true)

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

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.FlagEstero).DefaultValue(null);

})

.Read("Anagrafiche_Read", "Anagrafica")

.Update("Anagrafiche_Update", "Anagrafica")

.Create("Anagrafiche_Create", "Anagrafica")

.Destroy("Anagrafiche_Delete", "Anagrafica")

)

%>

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

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

if ('errors' in value) {

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

message += this + "\n";

});

}

});

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

grid.one("dataBinding", function (e) {

e.preventDefault(); // cancel grid rebind if error occurs

});

alert(message);

}

function RagioneSocialeFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "<%= Url.Action("Anagrafiche_RagioneSocialeFilter") %>"

}

},

optionLabel: "--Scegliere ragione sociale--"

});

}

function TipologiaAnagraficaFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "<%= Url.Action("Anagrafiche_TipologiaAnagraficaFilter") %>"

}

},

optionLabel: "--Scegliere tipologia anagrafica--"

});

}

function PadiglioneFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "<%= Url.Action("Anagrafiche_PadiglioneFilter") %>"

}

},

optionLabel: "--Scegliere padiglione--"

});

}

function FlagEsteroFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "<%= Url.Action("Anagrafiche_FlagEsteroFilter") %>"

}

},

optionLabel: "--Espositore Estero?--"

});

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="phdHeadContent" runat="server">

</asp:Content>

AnagraficaRepository.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Data;

using System.Web;

using System.Text;

using System.Threading.Tasks;

using Sopra.Fmspa.BusinessLayer.Models;

using Sopra.Fmspa.BusinessLayer.ViewModels;

using AutoMapper.Configuration;

using AutoMapper.Mappers;

/* SINTASSI AUTOMAPPER

AutoMapper.Mapper.CreateMap<Sorgente,Destinatario>();

Destinatario dest = AutoMapper.Mapper.Map<Sorgente,Destinatario>(sorg); */

namespace Sopra.Fmspa.BusinessLayer.DAL

{

public class AnagraficaRepository : IAnagraficaRepository, IDisposable

{

private ODLModelContainer context;

/* TO DO:

* - vedere AnagraficaViewModel.cs

* - sistemare il codice in modo tale che questo mapper funzioni senza l'opzione ignore per il campo manifestazione

*/

//public AnagraficaRepository(ODLModelContainer context)

//{

// this.context = context;

// AutoMapper.Mapper.CreateMap<TipologiaAnagrafica,TipologiaAnagraficaViewModel>();

// AutoMapper.Mapper.CreateMap<Padiglione,PadiglioneViewModel>();

// AutoMapper.Mapper.CreateMap<Manifestazione,ManifestazioneViewModel>();

// AutoMapper.Mapper.CreateMap<TipologiaAnagraficaViewModel,TipologiaAnagrafica>();

// AutoMapper.Mapper.CreateMap<PadiglioneViewModel,Padiglione>();

// AutoMapper.Mapper.CreateMap<ManifestazioneViewModel,Manifestazione>();

// AutoMapper.Mapper.CreateMap<Anagrafica,AnagraficaViewModel>()

// .ForMember(dest => dest.TipologiaAnagrafica, opt => opt.MapFrom(src => src.TipologiaAnagrafica))

// .ForMember(dest => dest.Padiglione, opt => opt.MapFrom(src => src.Padiglione))

// .ForMember(dest => dest.Manifestazione, opt => opt.MapFrom(src => src.Manifestazione));

// AutoMapper.Mapper.CreateMap<AnagraficaViewModel,Anagrafica>()

// .ForMember(dest => dest.TipologiaAnagrafica, opt => opt.MapFrom(src => src.TipologiaAnagrafica))

// .ForMember(dest => dest.Padiglione, opt => opt.MapFrom(src => src.Padiglione))

// .ForMember(dest => dest.Manifestazione, opt => opt.MapFrom(src => src.Manifestazione));

//}

public AnagraficaRepository(ODLModelContainer context)

{

this.context = context;

AutoMapper.Mapper.CreateMap<TipologiaAnagrafica,TipologiaAnagraficaViewModel>();

AutoMapper.Mapper.CreateMap<Padiglione,PadiglioneViewModel>();

//AutoMapper.Mapper.CreateMap<Manifestazione, ManifestazioneViewModel>();

AutoMapper.Mapper.CreateMap<TipologiaAnagraficaViewModel,TipologiaAnagrafica>();

AutoMapper.Mapper.CreateMap<PadiglioneViewModel,Padiglione>();

//AutoMapper.Mapper.CreateMap<ManifestazioneViewModel, Manifestazione>();

AutoMapper.Mapper.CreateMap<Anagrafica,AnagraficaViewModel>()

.ForMember(dest => dest.TipologiaAnagrafica, opt => opt.MapFrom(src => src.TipologiaAnagrafica))

.ForMember(dest => dest.Padiglione, opt => opt.MapFrom(src => src.Padiglione));

//.ForMember(dest => dest.Manifestazione, opt => opt.MapFrom(src => src.Manifestazione));

AutoMapper.Mapper.CreateMap<AnagraficaViewModel,Anagrafica>()

.ForMember(dest => dest.TipologiaAnagrafica, opt => opt.Ignore())

.ForMember(dest => dest.Padiglione, opt => opt.Ignore())

.ForMember(dest => dest.Manifestazione, opt => opt.Ignore());

}

//public AnagraficaRepository(ODLModelContainer context)

//{

// this.context = context;

//}

// ---------------------------------------------------------------------------------------------- //

public IEnumerable<Anagrafica> GetAnagrafica()

{

return context.odl_Anagrafica.ToList();

}

public IList<AnagraficaViewModel> GetAnagraficaList()

{

List<Anagrafica> anag = context.odl_Anagrafica.ToList();

List<AnagraficaViewModel> anagview = AutoMapper.Mapper.Map<List<Anagrafica>,List<AnagraficaViewModel>>(anag);

return anagview;

}

// ---------------------------------------------------------------------------------------------- //

//public static IList<AnagraficaViewModel> All()

//{

// IList<AnagraficaViewModel> result = (IList<AnagraficaViewModel>)HttpContext.Current.Session["Anagrafica"];

// if (result == null)

// {

// HttpContext.Current.Session["Anagrafica"] = result =

// (from anag in new ODLModelContainer().odl_Anagrafica

// select new AnagraficaViewModel

// {

// Id = anag.Id,

// AccountNumber = anag.AccountNumber,

// RagioneSociale = anag.RagioneSociale,

// TipologiaAnagraficaId = anag.TipologiaAnagraficaId,

// Descrizione = anag.Descrizione,

// ManifestazioneId = anag.ManifestazioneId,

// PadiglioneId = anag.PadiglioneId,

// Stand = anag.Stand,

// FlagSolvenza = anag.FlagSolvenza,

// FlagEstero = anag.FlagEstero,

// TipologiaAnagrafica = anag.TipologiaAnagrafica,

// Padiglione = anag.Padiglione

// }).ToList();

// }

// return result;

//}

// ---------------------------------------------------------------------------------------------- //

//public static AnagraficaViewModel One(Func<AnagraficaViewModel, bool> predicate)

//{

// return All().Where(predicate).FirstOrDefault();

//}

// ---------------------------------------------------------------------------------------------- //

//public void Insert(AnagraficaViewModel anagview)

//{

// if (anagview != null)

// {

// Anagrafica anag = AutoMapper.Mapper.Map<AnagraficaViewModel, Anagrafica>(anagview);

// context.odl_Anagrafica.Add(anag);

// }

//}

public void Insert(AnagraficaViewModel anagview)

{

if (anagview != null)

{

Anagrafica anag = AutoMapper.Mapper.Map<AnagraficaViewModel, Anagrafica>(anagview);

// valore forzato

anag.ManifestazioneId = anagview.ManifestazioneId;

context.odl_Anagrafica.Add(anag);

}

//public void Insert(AnagraficaViewModel anagview)

//{

// Anagrafica anag = new Anagrafica();

// anag.Id = anagview.Id;

// anag.AccountNumber = anagview.AccountNumber;

// anag.RagioneSociale = anagview.RagioneSociale;

// anag.TipologiaAnagraficaId = anagview.TipologiaAnagraficaId;

// anag.Descrizione = anagview.Descrizione;

// anag.ManifestazioneId = anagview.ManifestazioneId;

// anag.PadiglioneId = anagview.PadiglioneId;

// anag.Stand = anagview.Stand;

// anag.FlagSolvenza = anagview.FlagSolvenza;

// anag.FlagEstero = anagview.FlagEstero;

// anag.TipologiaAnagrafica = anagview.TipologiaAnagrafica;

// anag.Padiglione = anagview.Padiglione;

// context.odl_Anagrafica.Add(anag);

//}

//public static void Insert(AnagraficaViewModel anag)

//{

// anag.Id = All().OrderByDescending(p => p.Id).First().Id + 1;

// All().Insert(0, anag);

//}

// ---------------------------------------------------------------------------------------------- //

public void Update(AnagraficaViewModel anagview)

{

if (anagview != null)

{

Anagrafica anag = AutoMapper.Mapper.Map<AnagraficaViewModel,Anagrafica>(anagview);

context.odl_Anagrafica.Attach(anag);

context.Entry(anag).State = EntityState.Modified;

}

//public void Update(AnagraficaViewModel anagview)

//{

// Anagrafica anag = context.odl_Anagrafica.Find(anagview.Id);

// if (anag != null)

// {

// anag.Id = anagview.Id;

// anag.AccountNumber = anagview.AccountNumber;

// anag.RagioneSociale = anagview.RagioneSociale;

// anag.TipologiaAnagraficaId = anagview.TipologiaAnagraficaId;

// anag.Descrizione = anagview.Descrizione;

// anag.ManifestazioneId = anagview.ManifestazioneId;

// anag.PadiglioneId = anagview.PadiglioneId;

// anag.Stand = anagview.Stand;

// anag.FlagSolvenza = anagview.FlagSolvenza;

// anag.FlagEstero = anagview.FlagEstero;

// anag.TipologiaAnagrafica = anagview.TipologiaAnagrafica;

// anag.Padiglione = anagview.Padiglione;

// context.Entry(anag).State = EntityState.Modified;

// }

//}

//public static void Update(AnagraficaViewModel anag)

//{

// AnagraficaViewModel target = One(p => p.Id == anag.Id);

// if (target != null)

// {

// target.AccountNumber = anag.AccountNumber;

// target.RagioneSociale = anag.RagioneSociale;

// target.TipologiaAnagraficaId = anag.TipologiaAnagraficaId;

// target.Descrizione = anag.Descrizione;

// target.ManifestazioneId = anag.ManifestazioneId;

// target.PadiglioneId = anag.PadiglioneId;

// target.Stand = anag.Stand;

// target.FlagSolvenza = anag.FlagSolvenza;

// target.FlagEstero = anag.FlagEstero;

// target.TipologiaAnagrafica = anag.TipologiaAnagrafica;

// target.Padiglione = anag.Padiglione;

// }

//}

// ---------------------------------------------------------------------------------------------- //

public void Delete(AnagraficaViewModel anagview)

{

Anagrafica anag = context.odl_Anagrafica.Find(anagview.Id);

if (anag != null)

{

context.odl_Anagrafica.Remove(anag);

}

//public static void Delete(AnagraficaViewModel anag)

//{

// AnagraficaViewModel target = One(p => p.Id == anag.Id);

// if (target != null)

// {

// All().Remove(target);

// }

//}

// ---------------------------------------------------------------------------------------------- //

public void Save()

{

context.SaveChanges();

}

private bool disposed = false;

protected virtual void Dispose(bool disposing)

{

if (!this.disposed)

{

if (disposing)

{

// dispose della classe context <--- dispose della classe ODLModelContainer

context.Dispose();

}

this.disposed = true;

}

public void Dispose()

{

// dispose della classe IDisposable ---> GC ---> liberazione della memoria

Dispose(true);

GC.SuppressFinalize(this);

}

/* TO DO:

* - aggiungere la possibilità di scegliere, per ogni record della grid, una manifestazione

* - collegamento tra la pagina manifestazioni e questa pagina (anagrafica in bianco)

* - migliorare l'interfaccia grafica, in particolare l'aspetto della grid

* - controllo ad inserimento per la ragione sociale: stabilire se una voce è già stata inserita nel database

*/

AnagraficaController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using Sopra.Fmspa.BusinessLayer.Models;

using Sopra.Fmspa.BusinessLayer.DAL;

using Sopra.Fmspa.BusinessLayer.ViewModels;

using System.Data.Entity.Validation;

using System.Diagnostics;

using AutoMapper.Configuration;

using AutoMapper.Mappers;

/* SINTASSI AUTOMAPPER

AutoMapper.Mapper.CreateMap<Sorgente,Destinatario>();

Destinatario dest = AutoMapper.Mapper.Map<Sorgente,Destinatario>(sorg); */

namespace Sopra.Fmspa.BusinessLayer.Controllers

{

public class AnagraficaController : Controller

{

ODLModelContainer db = new ODLModelContainer();

private IAnagraficaRepository anagraficaRepository;

//public AnagraficaController()

//{

// this.anagraficaRepository = new AnagraficaRepository(new ODLModelContainer());