Manipuler un ASPxGridView côté client
Bonjour,
voila j'ai commencé à apprendre l'ASP il y a peu et je bloque sur un point.
En fait j'ai 2 ASPxGridView, la 1ère se remplie à partir d'un fichier qui est lu dans le Page_Load et je dois pouvoir transférer des lignes que j'ai sélectionnées de la 1ère grille à la 2ème grâce à un bouton. J'ai galéré pendant une semaine pour faire cette fonction mais ça y est, elle marche.
Le problème c'est qu'on me demande maintenant de faire la même chose mais l'action effectué par le bouton doit être gérée côté client et là, je suis perdu.
Voici le code-behind :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
| using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxGridView;
using System.IO;
using System.Collections;
using System.Data;
namespace maquette1
{
public partial class _Default : System.Web.UI.Page
{
public DataTable Data { get; set; }
public DataTable destData { get; set; }
public DataSet dataSet { get; set; }
public DataSet dataSetExport{ get; set; }
protected void Page_Load(object sender, EventArgs e)
{
/* if (!Page.IsPostBack)
{*/
//Fonctionne sans la condition
PrepareDataSources();
LectureFichier("C213050020.txt");
DXgrid.DataSource = this.Data;
DXgrid.DataBind();
DXgrid.KeyFieldName = "Column3";
DXGridExport.DataSource = this.destData;
DXGridExport.DataBind();
DXGridExport.KeyFieldName = "Column3";
// }
}
public void LectureFichier(string fichier)
{
// Création d'une instance de StreamReader pour permettre la lecture du fichier
StreamReader reader = new StreamReader(Server.MapPath(fichier));
// Lecture de toutes les lignes et affichage de chacune sur la page
while (!reader.EndOfStream)
{
string ligne = reader.ReadLine();
ligne = ligne.Replace((char)65533, ' '); //Remplacement du +- par un espace
var row = this.Data.NewRow(); //Création nouvelle ligne
row.ItemArray = ligne.Split(';'); //Définit les valeurs de la row avec la ligne
this.Data.Rows.Add(row); //Ajoute la row au DataTable
}
// Fermeture du StreamReader (attention très important)
reader.Close();
}
private void PrepareDataSources()
{
this.Data = new DataTable();
this.destData = new DataTable();
for (int i = 0; i < 33; i++)
{
this.Data.Columns.Add();
this.destData.Columns.Add();
}
}
protected void Button1_Click1(object sender, EventArgs e)
{
//DataRow selection = (DXgrid.GetRow(0) as DataRowView).Row;
if (DXgrid.Selection.Count != 0)
{
int nbligne = DXgrid.Selection.Count; //Nb de ligne sélectionnées
var selectRow = DXgrid.GetSelectedFieldValues("Column3"); //Renvoi la valeur de Column3 dans selectRow
DataRow selection;
int ID;
foreach (object index in selectRow) //Récupération des lignes sélectionnées dans le DataTable de la 2ème grille
{
ID = DXgrid.FindVisibleIndexByKeyValue(index);
selection = (DXgrid.GetRow(ID) as DataRowView).Row;
//Ajout à la grille de destination
var row = destData.NewRow(); //Création nouvelle ligne
row.ItemArray = selection.ItemArray; //Définit les valeurs de la row avec la ligne
destData.Rows.Add(row); //Ajoute la row au DataTable
//Data.Rows.Remove(selection);
}
foreach (object index in selectRow)
{
ID = DXgrid.FindVisibleIndexByKeyValue(index);
selection = (DXgrid.GetRow(ID) as DataRowView).Row;
//Suppression des lignes sélectionnées dans le DataTable de la 1ère grille
//Si transfert et suppression des lignes dans la même boucle => Décallage des lignes
Data.Rows.Remove(selection);
}
/*for (int i = 0; i <= nbligne-1; i+=1)
{
lbl_select.Text += DXgrid.FocusedRowIndex;
//DataRow selection = (DXgrid.GetRow(DXgrid.FocusedRowIndex)as DataRowView).Row;
//int index = (DXgrid.Get
//DataRow selection = (DXgrid.GetRow(this.)
//DataRow selection = (DXgrid.GetRow(i) as DataRowView).Row;
//Ajout à la grille de destination
var row = destData.NewRow(); //Création nouvelle ligne
//row.ItemArray = selection.ItemArray; //Définit les valeurs de la row avec la ligne
destData.Rows.Add(row); //Ajoute la row au DataTable
//Suppression de la ligne avant le transfert
//Data.Rows.Remove(selection);
}*/
//Actualisation de l'affichage
DXgrid.DataBind();
//Liaison de la grille et sa source + MaJ affichage
DXGridExport.DataSource = destData;
DXGridExport.DataBind();
}
//Ajout à la grille de destination
/*var row = destData.NewRow(); //Création nouvelle ligne
row.ItemArray = selection.ItemArray; //Définit les valeurs de la row avec la ligne
destData.Rows.Add(row); //Ajoute la row au DataTable
//Suppression de la ligne avant le transfert
Data.Rows.Remove(selection);
//Actualisation de l'affichage
DXgrid.DataBind();
//Liaison de la grille et sa source + MaJ affichage
DXGridExport.DataSource = destData;
DXGridExport.DataBind();*/
}
/* protected void DXgrid_CustomJSProperties(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e)
{
e.Properties["cpSelection"] = DXgrid.Selection;
e.Properties["cpGetRow"] = (DXgrid.GetSelectedFieldValues()).Row;
}*/
}
} |
et là le code du fichier aspx :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
| <%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="maquette1._Default" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridLookup" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Maquette 1 : Grid
</h2>
<p>
</p>
<p>
<dx:ASPxGridView ID="DXgrid" runat="server"
CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue"
>
<ClientSideEvents SelectionChanged="function(s, e) {
if (e.isSelected) {
var key = s.GetRowKey(e.visibleIndex);
alert('Last Key = ' + select);
}
}" />
<Settings ShowFilterRow="True" ShowGroupPanel="True" ShowFooter="True" />
<Images SpriteCssFilePath="~/App_Themes/Office2003Blue/{0}/sprite.css">
<LoadingPanelOnStatusBar Url="~/App_Themes/Office2003Blue/GridView/gvLoadingOnStatusBar.gif">
</LoadingPanelOnStatusBar>
<LoadingPanel Url="~/App_Themes/Office2003Blue/GridView/Loading.gif">
</LoadingPanel>
</Images>
<ImagesFilterControl>
<LoadingPanel Url="~/App_Themes/Office2003Blue/Editors/Loading.gif">
</LoadingPanel>
</ImagesFilterControl>
<Styles CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue">
<Header ImageSpacing="5px" SortingImageSpacing="5px">
</Header>
<LoadingPanel ImageSpacing="10px">
</LoadingPanel>
</Styles>
<StylesEditors>
<ProgressBar Height="25px">
</ProgressBar>
</StylesEditors>
<SettingsBehavior AllowSelectByRowClick="true" />
</dx:ASPxGridView>
<dx:ASPxGridView ID="DXGridExport" runat="server"
CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue">
</dx:ASPxGridView>
<asp:Label ID="lbl_select" runat="server" Text="Sélection : "></asp:Label>
<br /> <asp:Button ID="Button1" runat="server" Text="Move"
onclick="Button1_Click1" />
<asp:Button ID="Button2" runat="server" Text="Save" />
</p>
<script type="text/javascript">
$(document).ready(function()
{
$('Button1').click(function()
{
if (DXgrid.Selection.Count != 0)
{
int nbligne = DXgrid.Selection.Count; //Nb de ligne sélectionnées
var selectRow = DXgrid.GetSelectedFieldValues("Column3"); //Renvoi la valeur de Column3 dans selectRow
DataRow selection;
int ID;
foreach (object index in selectRow) //Récupération des lignes sélectionnées dans le DataTable de la 2ème grille
{
ID = DXgrid.FindVisibleIndexByKeyValue(index);
selection = (DXgrid.GetRow(ID) as DataRowView).Row;
//Ajout à la grille de destination
var row = destData.NewRow(); //Création nouvelle ligne
row.ItemArray = selection.ItemArray; //Définit les valeurs de la row avec la ligne
destData.Rows.Add(row); //Ajoute la row au DataTable
//Data.Rows.Remove(selection);
}
foreach (object index in selectRow)
{
ID = DXgrid.FindVisibleIndexByKeyValue(index);
selection = (DXgrid.GetRow(ID) as DataRowView).Row;
//Suppression des lignes sélectionnées dans le DataTable de la 1ère grille
//Si transfert et suppression des lignes dans la même boucle => Décallage des lignes
Data.Rows.Remove(selection);
}
/*for (int i = 0; i <= nbligne-1; i+=1)
{
lbl_select.Text += DXgrid.FocusedRowIndex;
//DataRow selection = (DXgrid.GetRow(DXgrid.FocusedRowIndex)as DataRowView).Row;
//int index = (DXgrid.Get
//DataRow selection = (DXgrid.GetRow(this.)
//DataRow selection = (DXgrid.GetRow(i) as DataRowView).Row;
//Ajout à la grille de destination
var row = destData.NewRow(); //Création nouvelle ligne
//row.ItemArray = selection.ItemArray; //Définit les valeurs de la row avec la ligne
destData.Rows.Add(row); //Ajoute la row au DataTable
//Suppression de la ligne avant le transfert
//Data.Rows.Remove(selection);
}*/
//Actualisation de l'affichage
DXgrid.DataBind();
//Liaison de la grille et sa source + MaJ affichage
DXGridExport.DataSource = destData;
DXGridExport.DataBind();
}
})
}
//function is called on changing focused row
function OnGridFocusedRowChanged() {
// Query the server for the "EmployeeID" and "Notes" fields from the focused row
// The values will be returned to the OnGetRowValues() function
grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
//Value array contains "EmployeeID" and "Notes" field values returned from the server
function OnGetRowValues(values) {
var notes = document.getElementById("detailnotes");
notes.value = values[1];
var image = document.getElementById("detailimage");
image.src = "FocusedRow.aspx?Photo=" + values[0];
}
</script>
</asp:Content> |
Désolé si le code est un peu fouillis, mais vous pouvez l'essayer normalement il marche ! :aie:
Donc tout doit se passer côté client sans postback ni callback. Pour info la sauvegarde doit se faire au clic sur un bouton "Save" à rajouter plus tard, je suppose que le postback (callback ?) se fera à ce moment-là.
Voila, si je n'ai pas été suffisamment clair n'hésitez pas à me poser les questions nécessaires.
Par avance, merci.
Avancement et clarification
Bonjour,
toujours aucune réponse, j'ai du en effrayé plus d'un ou alors je n'ai vraiment pas été clair ! :D
Bon en faisant des recherches, je suis tombé sur cette page du site DevExpress qui explique comment faire ce que je veux à peu de chose près !
Seulement voila, lorsque j'essaye d'appliquer cette méthode, j'obtiens une erreur :"Erreur d'exécution Microsoft JScript: L’objet ne gère pas la propriété ou la méthode « GetSelectedFieldValues »".
Pour info, voici mon code (épuré par rapport au premier message) :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
| <%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="maquette1._Default" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridLookup" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js"></script>
<script type="text/javascript">
function OnGetSelectedFieldValues(selectedValues) {
listBox.ClearItems();
if (selectedValues.length == 0) return;
for (i = 0; i < selectedValues.length; i++) {
s = "";
for (j = 0; j < selectedValues[i].length; j++) {
s = s + selectedValues[i][j] + " ";
}
listBox.AddItem(s);
}
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Maquette 1 : Grid
</h2>
<p>
</p>
<p>
<dx:ASPxGridView ID="DXgrid" runat="server"
CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue"
>
<ClientSideEvents SelectionChanged="function(s, e) {
if (e.isSelected) {
var key = s.GetRowKey(e.visibleIndex);
alert('Last Key = ' + key);
}
}" />
<Settings ShowFilterRow="True" ShowGroupPanel="True" ShowFooter="True" />
<Images SpriteCssFilePath="~/App_Themes/Office2003Blue/{0}/sprite.css">
<LoadingPanelOnStatusBar Url="~/App_Themes/Office2003Blue/GridView/gvLoadingOnStatusBar.gif">
</LoadingPanelOnStatusBar>
<LoadingPanel Url="~/App_Themes/Office2003Blue/GridView/Loading.gif">
</LoadingPanel>
</Images>
<ImagesFilterControl>
<LoadingPanel Url="~/App_Themes/Office2003Blue/Editors/Loading.gif">
</LoadingPanel>
</ImagesFilterControl>
<Styles CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue">
<Header ImageSpacing="5px" SortingImageSpacing="5px">
</Header>
<LoadingPanel ImageSpacing="10px">
</LoadingPanel>
</Styles>
<StylesEditors>
<ProgressBar Height="25px">
</ProgressBar>
</StylesEditors>
<SettingsBehavior AllowSelectByRowClick="true" />
</dx:ASPxGridView>
<dx:ASPxGridView ID="DXGridExport" runat="server"
CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css"
CssPostfix="Office2003Blue">
</dx:ASPxGridView>
<asp:Label ID="lbl_select" runat="server" Text="Sélection : "></asp:Label>
<br /> <asp:Button ID="Button1" runat="server" Text="Move"
onclick="Button1_Click1" />
<asp:Button ID="Button2" runat="server" Text="Save" />
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Get Values" UseSubmitBehavior="False">
<ClientSideEvents Click="function(s, e) {
MainContent_DXgrid_DXMainTable.GetSelectedFieldValues('Column1;Column2;Column3', OnGetSelectedFieldValues);
}" />
</dx:ASPxButton>
<br />
<asp:ListBox ID="ListBox" runat="server"></asp:ListBox>
</p>
</asp:Content> |
Si quelqu'un à la solution je lui serai redevable sur 13 générations ! :mrgreen:
D'avance, merci.