Salve a tutti,
ho un progetto in cui utilizzo un datalist per presentare i dati e che utilizza il Foundation Framework per variare le impostazioni di visualizzazione in base alla risoluzione del browser.
Mi ritrovo nella necessità di modificare il numero di colonne del DataList in base alle dimensioni dello schermo in quanto per la versione mobile le 3 colonne normalmente ripetute non c'entrano, per cui per il mobile vorrei mostrarne 1 soltanto.
Con foundation framework sarebbe tutto facile, basterebbe normalmente fare due DIV diversi, uno da mostrare per la versione mobile ed uno per tutte le altre con all'interno le corrette impostazioni ma trattandosi di un controllo Server non posso mettere due volte lo stesso perchè dovrei cambiare necessariamente l'ID del controllo e questo non va bene.
Ho allora pensato di utilizzare Jquery per catturare la dimensione in pixel del browser per poi passarla ad un controllo server HIDDEN scrivendo la dimensione nella proprietà VALUE....pensando poi di poter utilizzare questo valore per fare le varie valutazioni....se la dimensione è x allora RepeatColumns= N, altrimenti RepeatColumns= N2.
Ecco il codice JQuery:
$(document).ready(function () {
$("#ScreenWidth").val(width);
alert($("#ScreenWidth").val());
});
Ecco il tag server HIDDEN:
<input type="hidden" runat="server" id="ScreenWidth" clientidmode="Static" value=""/>
Purtroppo, sebbene al caricamento della pagina mi ritrovi il valore della dimensione del browser nel controllo HIDDEN, non riesco poi a lavorarlo...nel senso che, tentando di acquisire il valore di ScreenWidth.Value nell'evento DataList_PreRender non viene fuori e non posso quindi modificare il valore di RepeatColumns in base al valore di ScreenWidth.Value .
Ho anche provato ad utilizzare la proprietà RepeatLayout=Flow ma in questo caso mostra sempre una sola colonna per tutta la larghezza disponibile...
Qualcuno può darmi una dritta per risolvere questo problema per favore ? Mi sta facendo uscire pazzo.