I am trying to apply dynamic methods to creating a grid.
In particular, I want to dynamically create the dropdownlist function.
The stand-alone script I am using for testing this scenario is given below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script>
$(document).ready(function ()
{
var dropdownlist = [{"value":"jm34_assets","display":"jm34_assets"},{"value":"jm34_associations","display":"jm34_associations"},{"value":"jm34_banner_clients","display":"jm34_banner_clients"},{"value":"jm34_banner_tracks","display":"jm34_banner_tracks"},{"value":"jm34_banners","display":"jm34_banners"},{"value":"jm34_categories","display":"jm34_categories"},{"value":"jm34_contact_details","display":"jm34_contact_details"},{"value":"jm34_content","display":"jm34_content"},{"value":"jm34_content_frontpage","display":"jm34_content_frontpage"},{"value":"jm34_content_rating","display":"jm34_content_rating"},{"value":"jm34_content_types","display":"jm34_content_types"},{"value":"jm34_contentitem_tag_map","display":"jm34_contentitem_tag_map"},{"value":"jm34_core_log_searches","display":"jm34_core_log_searches"},{"value":"jm34_countries","display":"jm34_countries"},{"value":"jm34_customers","display":"jm34_customers"},{"value":"jm34_employees","display":"jm34_employees"},{"value":"jm34_extensions","display":"jm34_extensions"},{"value":"jm34_finder_filters","display":"jm34_finder_filters"},{"value":"jm34_finder_links","display":"jm34_finder_links"},{"value":"jm34_finder_links_terms0","display":"jm34_finder_links_terms0"},{"value":"jm34_finder_links_terms1","display":"jm34_finder_links_terms1"},{"value":"jm34_finder_links_terms2","display":"jm34_finder_links_terms2"},{"value":"jm34_finder_links_terms3","display":"jm34_finder_links_terms3"},{"value":"jm34_finder_links_terms4","display":"jm34_finder_links_terms4"},{"value":"jm34_finder_links_terms5","display":"jm34_finder_links_terms5"},{"value":"jm34_finder_links_terms6","display":"jm34_finder_links_terms6"},{"value":"jm34_finder_links_terms7","display":"jm34_finder_links_terms7"},{"value":"jm34_finder_links_terms8","display":"jm34_finder_links_terms8"},{"value":"jm34_finder_links_terms9","display":"jm34_finder_links_terms9"},{"value":"jm34_finder_links_termsa","display":"jm34_finder_links_termsa"},{"value":"jm34_finder_links_termsb","display":"jm34_finder_links_termsb"},{"value":"jm34_finder_links_termsc","display":"jm34_finder_links_termsc"},{"value":"jm34_finder_links_termsd","display":"jm34_finder_links_termsd"},{"value":"jm34_finder_links_termse","display":"jm34_finder_links_termse"},{"value":"jm34_finder_links_termsf","display":"jm34_finder_links_termsf"},{"value":"jm34_finder_taxonomy","display":"jm34_finder_taxonomy"},{"value":"jm34_finder_taxonomy_map","display":"jm34_finder_taxonomy_map"},{"value":"jm34_finder_terms","display":"jm34_finder_terms"},{"value":"jm34_finder_terms_common","display":"jm34_finder_terms_common"},{"value":"jm34_finder_tokens","display":"jm34_finder_tokens"},{"value":"jm34_finder_tokens_aggregate","display":"jm34_finder_tokens_aggregate"},{"value":"jm34_finder_types","display":"jm34_finder_types"},{"value":"jm34_helloworld","display":"jm34_helloworld"},{"value":"jm34_jacc","display":"jm34_jacc"},{"value":"jm34_jacc_modules","display":"jm34_jacc_modules"},{"value":"jm34_jacc_packages","display":"jm34_jacc_packages"},{"value":"jm34_jacc_plugins","display":"jm34_jacc_plugins"},{"value":"jm34_jacc_templates","display":"jm34_jacc_templates"},{"value":"jm34_languages","display":"jm34_languages"},{"value":"jm34_menu","display":"jm34_menu"},{"value":"jm34_menu_types","display":"jm34_menu_types"},{"value":"jm34_messages","display":"jm34_messages"},{"value":"jm34_messages_cfg","display":"jm34_messages_cfg"},{"value":"jm34_modules","display":"jm34_modules"},{"value":"jm34_modules_menu","display":"jm34_modules_menu"},{"value":"jm34_mvt_easy","display":"jm34_mvt_easy"},{"value":"jm34_mvt_jacc","display":"jm34_mvt_jacc"},{"value":"jm34_newsfeeds","display":"jm34_newsfeeds"},{"value":"jm34_orders","display":"jm34_orders"},{"value":"jm34_overrider","display":"jm34_overrider"},{"value":"jm34_postinstall_messages","display":"jm34_postinstall_messages"},{"value":"jm34_redirect_links","display":"jm34_redirect_links"},{"value":"jm34_reu_pkl_as_01","display":"jm34_reu_pkl_as_01"},{"value":"jm34_reu_pkl_de_01","display":"jm34_reu_pkl_de_01"},{"value":"jm34_reu_pkl_ma_01","display":"jm34_reu_pkl_ma_01"},{"value":"jm34_reu_pkl_pa_01","display":"jm34_reu_pkl_pa_01"},{"value":"jm34_reu_tmn_as_01","display":"jm34_reu_tmn_as_01"},{"value":"jm34_reu_tmn_as_02","display":"jm34_reu_tmn_as_02"},{"value":"jm34_reu_tmn_de_01","display":"jm34_reu_tmn_de_01"},{"value":"jm34_reu_tmn_de_02","display":"jm34_reu_tmn_de_02"},{"value":"jm34_reu_tmn_ma_01","display":"jm34_reu_tmn_ma_01"},{"value":"jm34_reu_tmn_ma_02","display":"jm34_reu_tmn_ma_02"},{"value":"jm34_reu_tmn_pa_01","display":"jm34_reu_tmn_pa_01"},{"value":"jm34_schemas","display":"jm34_schemas"},{"value":"jm34_scn_iss_as_01","display":"jm34_scn_iss_as_01"},{"value":"jm34_scn_iss_as_02","display":"jm34_scn_iss_as_02"},{"value":"jm34_scn_iss_as_03","display":"jm34_scn_iss_as_03"},{"value":"jm34_scn_iss_de_01","display":"jm34_scn_iss_de_01"},{"value":"jm34_scn_iss_de_02","display":"jm34_scn_iss_de_02"},{"value":"jm34_scn_iss_de_03","display":"jm34_scn_iss_de_03"},{"value":"jm34_scn_iss_ma_01","display":"jm34_scn_iss_ma_01"},{"value":"jm34_scn_org_ma_01","display":"jm34_scn_org_ma_01"},{"value":"jm34_scn_org_pa_01","display":"jm34_scn_org_pa_01"},{"value":"jm34_scn_ref_ma_01","display":"jm34_scn_ref_ma_01"},{"value":"jm34_session","display":"jm34_session"},{"value":"jm34_tags","display":"jm34_tags"},{"value":"jm34_template_styles","display":"jm34_template_styles"},{"value":"jm34_ucm_base","display":"jm34_ucm_base"},{"value":"jm34_ucm_content","display":"jm34_ucm_content"},{"value":"jm34_ucm_history","display":"jm34_ucm_history"},{"value":"jm34_update_sites","display":"jm34_update_sites"},{"value":"jm34_update_sites_extensions","display":"jm34_update_sites_extensions"},{"value":"jm34_updates","display":"jm34_updates"},{"value":"jm34_user_keys","display":"jm34_user_keys"},{"value":"jm34_user_notes","display":"jm34_user_notes"},{"value":"jm34_user_profiles","display":"jm34_user_profiles"},{"value":"jm34_user_usergroup_map","display":"jm34_user_usergroup_map"},{"value":"jm34_usergroups","display":"jm34_usergroups"},{"value":"jm34_users","display":"jm34_users"},{"value":"jm34_viewlevels","display":"jm34_viewlevels"}];
var params = {"height":145,"resizable":true,"sortable":true,"filterable":false,"editable":true,"groupable":false};
var columns = [{"field":"id_instance","title":"ID Instance","width":101,"editable":false},{"field":"reference","title":" Table Reference","width":200,"editable":true},{"field":"nameoftable","title":"Table Name","width":150,"editable":true},{"field":"groupnamelist","title":"Groupname List","width":100,"editable":true},{"field":"groupingselected","title":"Grouping Selected?","width":100,"editable":true}];
var rows = [
{"id_instance":"1","reference":{"value":"jm34_reu_tmn_pa_01","display":"jm34_reu_tmn_pa_01"},"nameoftable":"tablenames","groupnamelist":"Y","groupingselected":"1"},
{"id_instance":"2","reference":{"value":"jm34_reu_tmn_ma_01","display":"jm34_reu_tmn_ma_01"},"nameoftable":"columnnames","groupnamelist":"Y","groupingselected":"1"},
{"id_instance":"3","reference":{"value":"jm34_reu_tmn_de_01","display":"jm34_reu_tmn_de_01"},"nameoftable":"columndetails","groupnamelist":"","groupingselected":"1"},
{"id_instance":"4","reference":{"value":"jm34_reu_tmn_as_01","display":"jm34_reu_tmn_as_01"},"nameoftable":"composite view","groupnamelist":"","groupingselected":"1"}];
var ds = new kendo.data.DataSource({data: rows});
var dsJMTables = new kendo.data.DataSource({data: dropdownlist});
var typeDropDownEditor = function (container, options)
{
$('<input required data-text-field="display" data-value-field="value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: dsJMTables
});
}
var currentScript = '$(\'<input required data-text-field="display" data-value-field="value" data-bind="value:\' + options.field + \'"/>\').appendTo(container).kendoComboBox({autoBind: false,dataSource: dsJMTables});';
var newtypeDropDownEditor = new Function('container', 'options', currentScript);
columns[1]['editor'] = typeDropDownEditor;
columns[1]['template'] = "#=reference.value#";
$("#grid").kendoGrid({
dataSource: ds,
height: params['height'],
scrollable: true,
sortable: params['sortable'],
filterable: params['filterable'],
resizable: params['resizable'],
groupable: params['groupable'],
editable: params['editable'],
columns: columns
});
});
</script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>
If the above script is executed - the dropdown entries will show up correctly.
If I try to create the typeDropDownEditor function dynamically using the following script (for creating dynamically a function)
var currentScript = '$(\'<input required data-text-field="display" data-value-field="value" data-bind="value:\' + options.field + \'"/>\').appendTo(container).kendoComboBox({autoBind: false,dataSource: dsJMTables});';
var newtypeDropDownEditor = new Function('container', 'options', currentScript);
and then assign the new function to the column, as below:
columns[1]['editor'] = newtypeDropDownEditor;
The dropdown list no longer appears - text entry only is possible.
I have tried every means possible to try and figure out what the problem is - but to no avail.
I have looked at the contents of the created functions (i.e. using alert), and the contents of the static function and dynamic function are identical.
So - what to do?
Any help on this matter will be really appreciated!
Alastair
1 Answer, 1 is accepted
When using new Function() you cannot access local variables because the code runs in a separate scope. That is why in your case the dsJMTables variable is not available.
You can also refer to this discussion where more details how new Function are mentioned.
Regards,
Plamen
Telerik