Questions on UI for ASP.NET MVC Forum

1 answer

219 views

I have a treeview that is being used to display active and inactive data. By default the tree only shows active parents and their children but I have a check box on form that I am am wanting to use to force the update of the tree view with the reflected JSON data. I have verified that the JSON is updating the results buy reviewing my FIDDLER trace but for some reason the grid is not updating to reflect the change. I have search throughout the forum as well as the internet and can't seem to find an example close to what I am attempting to do. Any help would be appreciated.

I have included a sample of my code below:

getHierarchy()
{

testHierarchy = getData();

 $("#TestHierarchy").kendoTreeView({
                        dataSource: new kendo.data.HierarchicalDataSource({
	                data: testHierarchy
                        })
});


  $("#includeInActive").live('click', function () {
            testHierarchy = [];
            alert(testHierarchy.length);
            $("#testHierarchy").removeClass('k-treeview');
            $("#testHierarchy").empty();
            getHierarchy();
                      
        }

TreeView

answered on 13 Feb 2013

3 answers

350 views

grid with popup editing and dropdownlist

Hi,
I created a grid with a dropdownlist for two fields, and I have set InLine editing as the edit mode.
I want to use the popup editing method, but when I change my code to do this something goes wrong. The two fields I mentioned before, the ones with the dropdown list, are virtual attributes for a class. Each of these contain two fields: Id and Description. I want to show, in my grid, only the description. I have no problems with InLine editing, but I can't do this with popup editing: all fields are showed in my grid, and also the dropdownlist disappears.
I have another question: what are the dropdownlist and the combobox fundamental differences? Which is the better to use in a grid?

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());