Hello,
we want to use the multiselect in this context:
For instance, when the grid data reads either
or
The multiselect always remains empty in editing mode, no data binding seems to happen between the grid & the multiselect.
But when the grid data reads:
Binding between grid & multiselect works.
Could it be that there's something wrong in our datasource or multiselect definition or is there something wrong with the multiselect data binding ?
Here's the code we use:
And the data samples:
we want to use the multiselect in this context:
- Grid bound to an XML datasource
- Multiselect bound to an XML datasource
- Data binding between Grid & multiselect for popup or inline editing
For instance, when the grid data reads either
<
record
number
=
"3"
>
<
nid
>3</
nid
>
<
column1
>row3col1</
column1
>
<
column2
>BBBtxt,CCCtxt</
column2
>
<
mval
>BBBval,CCCval</
mval
>
</
record
>
or
<
record
number
=
"4"
>
<
nid
>4</
nid
>
<
column1
>row4col1</
column1
>
<
column2
>BBBtxt,CCCtxt</
column2
>
<
mval
>BBBval</
mval
>
<
mval
>CCCval</
mval
>
</
record
>
The multiselect always remains empty in editing mode, no data binding seems to happen between the grid & the multiselect.
But when the grid data reads:
<
record
number
=
"2"
>
<
nid
>2</
nid
>
<
column1
>row2col1</
column1
>
<
column2
>AAAtxt</
column2
>
<
mval
>AAAval</
mval
>
</
record
>
Could it be that there's something wrong in our datasource or multiselect definition or is there something wrong with the multiselect data binding ?
Here's the code we use:
// JavaScript Document
jQuery(document).ready(
function
() {
// grid
jQuery(
"#grid"
).kendoGrid({
dataSource: gridDataSource,
columns: [
{
field:
"column1"
,
title:
"Column 1"
,
width:
"300px"
},
{
field:
"column2"
,
title:
"Column 2"
,
editor: multiselect_editor,
width:
"300px"
},
{
command: [
{name:
"edit"
,text:{update:
"Edit"
,cancel:
"Cancel"
}},
],
width:
"10%"
}
],
toolbar: [{name:
"create"
,text:
"New"
}],
editable: {mode:
"popup"
},
sortable:
true
,
pageable:
true
,
resizable:
true
});
})
//grid datasource
var
gridDataSource =
new
kendo.data.DataSource({
type:
"xml"
,
transport: {
read:
function
(options) {
jQuery.ajax( {
url:
"data/griddata.asp"
,
type:
"POST"
,
cache:
false
,
success:
function
(result) { options.success(result); },
error:
function
(e) { alert(e.responseText); },
data: {
startrow: ((options.data.pageSize*(options.data.page-1))+1),
maxrows: 50
}
});
},
update:
function
(options) {
alert(
"updated"
);
},
create:
function
(options) {
alert(
"created"
);
}
},
schema: {
type:
"xml"
,
data:
"/root/resultset/record/"
,
model: {
id:
"nid"
,
fields: {
nid:
"nid/text()"
,
column1:
"column1/text()"
,
mval:
"mval/text()"
,
column2:
"column2/text()"
}
},
total:
"/root/resultset/@size"
},
error:
function
(e) {
alert(e.xhr.responseText);
},
serverFiltering:
true
,
serverPaging:
true
,
serverSorting:
true
,
pageSize: 50
})
// multiselect for popup editor
function
multiselect_editor (container, options) {
jQuery(
'<select multiple="multiple" id="multiselect_editor" data-text-field="textnode" data-value-field="valuenode" data-bind="value:mval"/>'
)
.appendTo(container)
.kendoMultiSelect ({
placeholder:
"Select..."
,
autoBind:
true
,
dataTextField:
"textnode"
,
dataValueField:
"valuenode"
,
dataSource: {
type:
"xml"
,
serverFiltering:
true
,
sort: { field:
"textnode"
, dir:
"asc"
},
transport: {
read: { type:
"POST"
, cache:
false
, url:
"data/multiselectdata.asp"
},
},
schema: {
type:
"xml"
,
data:
"/root/resultset/record"
,
model: {
fields: {
textnode:
"textnode/text()"
,
valuenode:
"valuenode/text()"
}
}
}
,error:
function
(e) {
alert(e.xhr.responseText);
}
}
});
}
And the data samples:
- Grid data
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
root
>
<
resultset
date
=
"03/09/2013"
size
=
"3"
time
=
"10:13:50"
>
<
record
number
=
"1"
>
<
nid
>1</
nid
>
<
column1
>row1col1</
column1
>
<
column2
></
column2
>
<
mval
></
mval
>
</
record
>
<
record
number
=
"2"
>
<
nid
>2</
nid
>
<
column1
>row2col1</
column1
>
<
column2
>AAAtxt</
column2
>
<
mval
>AAAval</
mval
>
<!-- Works for multi select data binding (to set 1 selected item in the multiselect in the editor) -->
</
record
>
<
record
number
=
"3"
>
<
nid
>3</
nid
>
<
column1
>row3col1</
column1
>
<
column2
>BBBtxt,CCCtxt</
column2
>
<
mval
>BBBval,CCCval</
mval
>
<!-- Does not work for multiselect data binding (to set 2 selected items in the multiselect in the editor) -->
</
record
>
<
record
number
=
"4"
>
<
nid
>4</
nid
>
<
column1
>row4col1</
column1
>
<
column2
>BBBtxt,CCCtxt</
column2
>
<
mval
>BBBval</
mval
>
<!-- Does not work for multiselect data binding (to set 2 selected items in the multiselect in the editor) -->
<
mval
>CCCval</
mval
>
</
record
>
</
resultset
>
</
root
>
- Multiselect data
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
root
>
<
resultset
date
=
"03/09/2013"
size
=
"5"
time
=
"10:13:50"
>
<
record
number
=
"1"
>
<
nid
>1</
nid
>
<
valuenode
>AAAval</
valuenode
>
<
textnode
>AAAtxt</
textnode
>
</
record
>
<
record
number
=
"2"
>
<
nid
>2</
nid
>
<
valuenode
>BBBval</
valuenode
>
<
textnode
>BBBtxt</
textnode
>
</
record
>
<
record
number
=
"3"
>
<
nid
>3</
nid
>
<
valuenode
>CCCval</
valuenode
>
<
textnode
>CCCtxt</
textnode
>
</
record
>
<
record
number
=
"4"
>
<
nid
>4</
nid
>
<
valuenode
>DDDval</
valuenode
>
<
textnode
>DDDtxt</
textnode
>
</
record
>
</
resultset
>
</
root
>