Questions on Kendo UI for jQuery Forum

1 answer

624 views

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

Grid

answered on 04 Dec 2015

4 answers

882 views

Adding kendo tooltip to kendo combo box

How can I use the kendo tooltip with the kendo combo box? I can successfully show a tooltip on a plain <input> element, but once I turn the input element into a kendo combo box, the tooltip will not work anymore. Here's a code sample: http://dojo.telerik.com/uMafI. If you replace the <input> line with the commented out line, then you will see the tooltip.

It looks like the tooltip is being applied to the original element and not the element that is created by the kendo-combobox directive. If you go into the developer tools and remove the "display: none" on the original element, then you will see the tooltip when you hover over the previously hidden original element.

Thanks,

Michelle

ComboBox

answered on 03 Dec 2015

1 answer

319 views

Extending click event for Command button

Hi All,

I used getOptions and setOptions in our project with no issue, except for one. I re-applied the click event back to the command button after using grid.setOption with the following script

var sourceClickEvent = columnClickEvent; //columnClickEvent calls myfunction ()
$.extend(myTarget.dataSource.options.fields[j].command[k], { click: sourceClickEvent });

and I can see the click event for the command button, but every time I click on the button the click event does not fired. Could anyone tell me what I did wrong?

TIA

Grid

answered on 03 Dec 2015

2 answers

214 views

[Solved] Stock Chart with multiple series

Hi,

I am trying to add a line chart to the candle stock chart.

For example, in this demo basic stock chart, http://demos.telerik.com/kendo-ui/financial/index , I need to add a line chart inside the chart area. I tried adding another series and specified the chart type as "line". But line chart is not showing up.

Please check the attached file. The red line is the one I have to add using Kendo. If it's possible to do, please give me any examples or demo.

Thanks,

Kyaw

Charts

answered on 03 Dec 2015

6 answers

200 views

[Solved] Does not open in Cordova

Hi,

i have a problem in my cordova/angularJS application with all dropdown elements like "kendo-drop-down-list", "kendo-combo-box", "kendo-date-picker", "kendo-time-picker" or "kendo-date-time-picker". On click on the "open"-button on the right side nothing happens. Only if I change the window size off the cordova application (Windows 10) the boxes drops down. Every time i have to click on the "open"-button and then to resize the application window to se the options. I have to do it for every box every time i want see the dropdown options.

With best regards

Johann

DropDownList

answered on 03 Dec 2015

1 answer

222 views

Css not work properly

I have applied page level css and change kendo ui class according to my need, it works fine in chrome but in firefox it behaves differently. How to achieve same view in different browser. I have attached file which shows different views in different browser.

Diagram

answered on 03 Dec 2015

1 answer

81 views

Error with a kendoGrid into a kendoTooltip

Hello!

I have a kendoTooltip which in the contentLoad loads a kendoGrid with a dataSource, the columns and everything. The problem is: I have a column which have a lot of characters and I wanna edit this column like this:

columns: [
{field: "comment", title: tooltipHeaderTranslations.COMMENTS, width: "400px"},
]
But when I'm in the tooltip the width is the same as before.
What should I do?

Thanks

General Discussions

answered on 03 Dec 2015

9 answers

689 views

DropDownList items width

Hi,

I have a DropDownList that is opened in a grid cell.
I want that when I open the DropDownList, the width of each item will be of the largest item.
My CSS:

.k-list-container {
width: auto !important;
}

.k-list-container .k-list .k-item {
padding-left: 25px;
}

It doesn't work as expected. It takes the largest item length, but in some grids it adds more space so it's longer than it should be.
(it's not the padding-left: that's for the scroll).

Thanks

DropDownList

answered on 03 Dec 2015

1 answer

108 views

undesired column width expanding

If column widths don't exceed the width of the Grid the rest of the space available is split among the columns. Is there a way to avoid this behavior? I have two action columns on my grid and I want them to be the same size no matter what. The rest of the columns can take the rest of the width of the grid.

The grid I'm using is not scrollable. I know that I could make the grid scrollable and not set the width of the last column (the last column would receive the extra width), but this is not acceptable because setting the grid to scrollable does not work with screen readers.

Dominik

Grid