Girovagando qua e là per internet, sono incappato in questa libreria che definire bella è troppo poco:
http://extjs.com/
A dire il vero il link è stato suggerito da ajaxtoolkit presente in codeplex, mentre cercavo un modo per filtrare i dati in una griglia senza effettuare il postback… Ebbene, vista la libreria ho accantonato il filtro della griglia e… mi sono imbattuto in una nuova avventura, integrare la libreria con asp.net.
In aiuto m’è venuto un progetto presente in codeplex, http://www.codeplex.com/GridExtender
Importo quindi la dll in un mio progetto esistente (quello del filtro per l’appunto) e inserisco in due secondi la griglia alla mia pagina… E qui il primo dubbio, come si fa a passare i dati alla griglia in questione?
In aiuto ci vengono gli handler, come spiegato tra l’altro dal progetto stesso, solo che lo modifico un po’.
Non voglio usare i datareader, bensì i DataTable, quindi il mio handler diventa:
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/xml"
Try
'creates the sql connection
Dim dtClassifica As DataTable = DBSupport.GetDataTableBySQL("select giocatore, sum(punti) as punti from fleet where flotta='flotta' group by giocatore order by sum(punti) desc")
dtClassifica.Columns.Add("posizione", GetType(Integer))
dtClassifica.TableName = "ROWS"
For i As Integer = 1 To dtClassifica.Rows.Count
dtClassifica.Rows(i - 1)("posizione") = i
Next
Dim sw As New System.IO.StringWriter()
dtClassifica.WriteXml(sw)
context.Response.Write("")
context.Response.Write("" & dtClassifica.Rows.Count & "")
context.Response.Write(sw.ToString().Replace("", "").Replace("", ""))
context.Response.Write("")
Catch ex As Exception
context.Response.Write(ex.ToString())
End Try
End Sub
Da notare l’eliminazione del tag DocumentElement…
A questo punto vediamo il lato client:
<cc1:YuiGrid ID="YuiGrid1" runat="server" Fields="posizione, giocatore, punti"
ProcessingPage="DataGridClassificaHandler.ashx"
TagId="posizione"
TagRepeated="ROWS"
totalTag="TotalCount"
EnableRowSorting="true"
EnablePaging="false" >
<Columns>
<cc1:ColModel header="Pos." sortable="true" width="50" type="int" />
<cc1:ColModel header="Giocatore" sortable="true" width="120" type="string" />
<cc1:ColModel header="Punti" sortable="true" width="50" type="double" />
SPAN lang=EN-GB style="COLOR: #a31515; FONT-FAMILY: 'Courier New'; mso-bidi-font-weight: normal; mso-ansi-language: EN-GB; mso-no-proof: yes">Columns>
SPAN lang=EN-GB style="COLOR: #a31515; FONT-FAMILY: 'Courier New'; mso-bidi-font-weight: normal; mso-ansi-language: EN-GB; mso-no-proof: yes">cc1:YuiGrid>
Da notare che alla griglia è stato associato l’handler per il passaggio dei dati, con il TagRepeated viene specificato il Tag della riga, con totalTag vieni indicato il tag del numero delle righe.
A questo punto il passaggio dei dati dal lato server e il client è stato effettuato (certo se abbiamo tanti dati sorge il problema della dimensione della pagina, facilmente risolvibile comunque abilitando il paging).
Non contento, volevo far si che, selezionando una riga della griglia mi facesse un update di un updatepanel.
Risolto, inserendo un hiddentext, dopodichè è stato associato un AsyncPostBackTrigger al valuechanged del controllo appena inserito.
Il body della mia pagina è diventato il seguente:
<body onload="AddEvents()">
Quindi un po’ ci codice JavaScript :
function AddEvents()
{
//get the controls
var ctlClassifica= $find('YuiGrid1_GridProperties');
if(ctlClassifica ==null ){
window.setTimeout("AddEvents()",200);
return;
}
grdClassifica=ctlClassifica.get_Grid();
grdClassifica.on('rowclick', rowClickGrid);
}
function rowClickGrid(grd, rowIndex, e)
{
var nomeGiocatore = grd.getDataSource().data.itemAt(rowIndex).get(" giocatore");
var hiddenField = document.getElementById("<%=txtNomeGiocatore.ClientID %><%=txtNomeGiocatore.ClientID %>");
hiddenField.value = nomeGiocatore;
__doPostBack('<%=txtNomeGiocatore.ClientID %>','');
}
Da notare la chiamata __doPostBack che effettuerà il postback proprio dell’hidden field.
A questo punto sul lato server è bastato fare :
Protected Sub txtNomeGiocatore_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtNomeGiocatore.ValueChanged
UpdateDettaglio(Me.txtNomeGiocatore.Value)
End Sub
Spero d’esservi stato d’aiuto.