This is a migrated thread and some comments may be shown as answers.

Grid DropDownList dynamic assignment

1 Answer 439 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alastair
Top achievements
Rank 1
Alastair asked on 03 Dec 2015, 08:03 AM

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

Sort by
0
Plamen
Telerik team
answered on 04 Dec 2015, 07:38 AM
Hello,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Alastair
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or