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.
