How to initialize and load values for MultiSelect / Numeric / FileUpload within a KendoUI Custom Popup Editor? - popup

Question

I'm trying out KendoUI Web and I'm trying to get the multiselect, numeric, and fileupload widgets to display and function correctly in my custom popup editor. When clicking the Edit button the popup does not display multiselect, numeric, and fileupload correct and I cannot load the default value from the grid row into the multiselect widget (for example '1,2' in the sample data. When i click the Save button within the popup editor all the fields should populate into my text box (which seem to be working ok). I would like to stick to the HTML method of initializing widgets rather than using MVC.
If someone could please help with my issues.
I am unsure how to initialize the widgets (multiselect, numeric, and fileupload) because if i put the javascript initialization in the template, I get errors.
I cannot load default values from the grid row into my multiselect dropdown.
Does anyone know what needs to be done to get this to work correctly?
Here is my current code at http://jsfiddle.net/Xwtq3/
<h2>")
Users</h2>")
")
<div id=""example"" class=""k-content"">")
")
<input name=""txtAdvancedSearchString"" type=""text"" onchange=""javascript:setTimeout('__doPostBack")
")
(\'txtAdvancedSearchString\',\'\')', 0)"" onkeypress=""if (WebForm_TextBoxKeyHandler(event) == false) return false;"" ")
")
id=""txtAdvancedSearchString"" />")
<script>")
var mydata = [{")
guid: ""D007DD39-540B-4bc3-9900-39A8B931EB19"",")
fullname: ""Jeff"",")
email: ""jeffkent#testemail.com"",")
groups: ""1,2"",")
administrator: ""1"",")
url: ""jeff.jpg""")
}, {")
guid: ""E8CFD49A-3B85-4093-AE52-F55C73E12A7B"",")
fullname: ""Frank"",")
email: ""testemail#email.com"",")
groups: ""3,4"",")
administrator: ""1"",")
url: ""todd.jpg""")
}];")
</script>")
<div id=""grid""></div>")
<div id=""details""></div>")
<script>")
var wnd,")
detailsTemplate;")
")
$(document).ready(function() {")
")
")
var grid = $(""#grid"").kendoGrid({")
dataSource: {")
pageSize: 20,")
data: mydata")
},")
pageable: true,")
groupable: true,")
selectable: ""row"",")
reorderable: true,")
sortable: true,")
filterable: true,")
columnMenu: true,")
height: 430,")
columns: [{")
field: ""fullname"",")
title: ""Full Name""")
}, {")
field: ""email"",")
title: ""Email""")
}, {")
field: ""groups"",")
title: ""Groups""")
}, {")
field: ""administrator"",")
title: ""User Role""")
}, {")
field: ""url"",")
title: ""File URL""")
}, {")
command: {")
text: ""Edit"",")
click: showDetails")
},")
title: "" "",")
width: ""140px""")
}]")
}).data(""kendoGrid"");")
")
wnd = $(""#details"")")
.kendoWindow({")
title: ""Download"",")
modal: true,")
visible: false,")
resizable: false,")
width: 300")
}).data(""kendoWindow"");")
")
detailsTemplate = kendo.template($(""#template"").html());")
});")
")
function showDetails(e) {")
e.preventDefault();")
")
")
var dataItem = this.dataItem($(e.currentTarget).closest(""tr""));")
wnd.content(detailsTemplate(dataItem));")
wnd.center().open();")
}")
</script>")
<script type=""text/x-kendo-template"" id=""template"">")
<div id = ""details-container"" > <h2 > View / Edit User </h2>")
<table cellspacing=""6"" cellpadding=""3"">")
<tr>")
<td><label ID=""lblID"" for=""txtID"">ID:</label > <br /> <input type = ""text""")
id = ""txtID""")
class = ""k-textbox""")
placeholder = """"")
value = ""#= guid #"" > </input></td > </tr>")
<td><label ID=""lblFirstName"" for=""txtFirstName"">First Name:</label > <br /> <input type = ""text""")
id = ""txtFirstName""")
class = ""k-textbox""")
placeholder = """"")
value = ""#= fullname #"" > </input></td > </tr>")
<tr>")
<td>")
<!--MultiSelect Dropdown-->")
")
<select name=""groups"" id=""groups"" class=""k-item"" multiple=""multiple"" data-role=""dropdownlist"">")
<option value=""1"">HR</option > < option value = ""2"" > 1099 < /option>")
<option value=""3"">Insurance Form</option > < option value = ""4"" > Claim Form < /option>")
<option value=""4"">Timeoff Requests</option >")
")
</select>")
")
<!--MultiSelect Dropdown end--></td >")
")
</tr>")
<tr><td> ")
<input id=""txtMaxAdmins"" type=""number"" value=""#=administrator#"" min=""0"" max=""100"" />")
")
")
")
</td></tr >")
")
")
<tr> <td> <label")
for = ""upload"" > Document Types: </label>")
Choose a transparent .png for best results<br /> <input id = ""upload""")
type = ""file"" value=""#=url#"" />")
")
")
</td></tr> <tr > <td colspan = ""2"" > <button ID = ""btnSave""")
class = ""k-button""")
onclick = ""CallServer()"" > Save </button></td> </tr>")
</table> </div>")
</script>")
<script>")
function CallServer() {")
var userinput = ($(""#txtID"").val()) + '|' + ($(""#txtFirstName"").val()) + '|' + ($(""#groups"").val());")
document.getElementById(""txtAdvancedSearchString"").value = userinput;")
")
//alert(userinput);")
__doPostBack('__Page', 'e');")
}")
</script>")
</div>")

Answer 1

You need to tell KendoUI to use the html elements as kendo controls.