Template d'affichage et d'édition avec RadGrid
Salut!
Je suis debutant dans le developpement ASP.Net MVC et Telerik. J'ai un soucis avec mon rad grid, 4 de mes colonnes sont des objets, je voudrait que à l'affichage s'affichent un de leurs champs et à l'edition quil s'affichent un dropdownlist avec la liste des objets à selectionner. Je suis arrivé à appliquer le template d'edition sans problème, mais seulement quand j'applique en même temps le template d'affichage je ne sais plus ajouter des lignes dans mon radgrid.
Ma vue se présente comme suite :
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
|
@{
ViewBag.Title = "Home Page";
}
<style >
.k-grid .k-grid-toolbar .k-grid-add,
.k-grid tbody .k-grid-edit,
.k-grid tbody .k-grid-update,
.k-grid tbody .k-grid-cancel,
.k-grid tbody .k-grid-delete {
min-width: 0;
}
.k-grid .k-grid-toolbar .k-grid-add .k-icon,
.k-grid tbody .k-grid-edit .k-icon,
.k-grid tbody .k-grid-update .k-icon,
.k-grid tbody .k-grid-cancel .k-icon,
.k-grid tbody .k-grid-delete .k-icon {
margin: 0;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<Materials>()
.Name("grid")
.Columns(columns =>
{
columns.Command(command =>
{
command.Destroy().Text(" ");
command.Edit().Text(" ").CancelText(" ").UpdateText(" ");
}).Title("Action").Width(145);
columns.Bound(p => p.Id).Width(40);
columns.Bound(p => p.Model);
columns.Bound(p => p.Note);
columns.Bound(p => p.Quantity).Width(70);
columns.Bound(p => p.CreateDate).Width(130);
columns.Bound(p => p.Status).ClientTemplate("#=Status.Value#").Width(70);
columns.Bound(p => p.Type).Width(130);
columns.Bound(p => p.Etablishment).Width(130);
columns.Bound(p => p.User).Width(100);
})
.ToolBar(toolbar => toolbar.Create().Text(" "))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:450px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Materials_Read", "Grid"))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
</div>
</div>
</div>
<script type="text/javascript">
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
productnamevalidation: function (input, params) {
if (input.is("[name='Modele']") && input.val() != "") {
input.attr("data-modelevalidation-msg", "Ce champs ne peut pas être vide.");
return /^[A-Z]/.test(input.val());
}
return true;
}
},
messages: { //custom rules messages
productnamevalidation: function (input) {
// return the message text
return input.attr("data-val-modelevalidation");
}
}
});
})(jQuery, kendo);
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";
});
}
});
alert(message);
}
}
</script> |
Mon template d'édition (ListeStatus)
Code:
1
2
3
4
5
6
7
8
|
@model Status
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("Id")
.DataTextField("Value")
.BindTo((Status[])ViewData["status"])
) |
Classe Materials :
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
|
public partial class Materials {
private int idField;
private string modelField;
private string noteField;
private double quantityField;
private System.DateTime createDateField;
private Users userField;
private TypeMaterial typeField;
private Status statusField;
private Etablishment etablishmentField;
/// <remarks/>
[ScaffoldColumn(false)]
public int Id {
get {
return this.idField;
}
set {
this.idField = value;
}
}
/// <remarks/>
///
[Required]
[DisplayName("Modèle")]
public string Model {
get {
return this.modelField;
}
set {
this.modelField = value;
}
}
/// <remarks/>
///
[DisplayName("Note")]
public string Note {
get {
return this.noteField;
}
set {
this.noteField = value;
}
}
/// <remarks/>
///
[DisplayName("Qty")]
[DataType("Double")]
[Range(0, int.MaxValue)]
public double Quantity {
get {
return this.quantityField;
}
set {
this.quantityField = value;
}
}
/// <remarks/>
///
[DisplayName("Create date")]
[DataType(DataType.Date)]
public System.DateTime CreateDate {
get {
return this.createDateField;
}
set {
this.createDateField = value;
}
}
/// <remarks/>
///
[UIHint("ListeUser")]
public Users User {
get {
return this.userField;
}
set {
this.userField = value;
}
}
/// <remarks/>
///
[UIHint("ListeTypeMaterial")]
public TypeMaterial Type {
get {
return this.typeField;
}
set {
this.typeField = value;
}
}
/// <remarks/>
///
[UIHint("ListeStatus")]
public Status Status {
get {
return this.statusField;
}
set {
this.statusField = value;
}
}
/// <remarks/>
///
[UIHint("ListeEtablishment")]
public Etablishment Etablishment {
get {
return this.etablishmentField;
}
set {
this.etablishmentField = value;
}
}
} |
classe Status
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
|
public partial class Status : Bdd {
private int idField;
private string valueField;
/// <remarks/>
public int Id {
get {
return this.idField;
}
set {
this.idField = value;
}
}
/// <remarks/>
public string Value {
get {
return this.valueField;
}
set {
this.valueField = value;
}
}
} |
Aidez moi please
