Hi,
I'm using kendo multi select drop down,if items are not available in multi select drop down i'm giving option to add items.after adding items multi select drop down is not getting refreshed with added details,and im using multi select drop down in ng-repeat.

Here is the my code.

View:

Controller:

If i used $('#followupQueId').data("kendoMultiSelect").dataSource.add(data); like this its adding to list but as I'm using dropdown in repeat its not pushing item to all repeated drop down its adding to first drop down.

Appreciate your support!

Thanks!

I believe this is due to me data-binding twice, once on initialization for default and another after initialization. I am using both MVC and Javascript... but the javascript is in a different folder.

helper.Kendo().MultiSelect()
                                  .Name(name)
                                  .AutoClose(false)
                                  .Value(selectedValue)
                                  .Placeholder(placeholder)
                                  .DataTextField(dataTextField)
                                  .DataValueField(dataValueField)
                                  .DataSource(
                                    source =>
                                          {
                                              source.Read(read =>
                                              {
                                                  read.Action(methodName, controllerName);
                                              });
                                          });

and 

resourcesSelect.data("kendoMultiSelect").bind("select", selectAll);

After selecting them. When I click it's fine, however on hitting the "enter" key it fires off both selects and selects it twice. Am I looking in the right place? Or is it because of my handler method.

function selectAll(e) {
        var dataItem = e.item;
        var values = this.value();

        if (dataItem.text() === "ALL") {
            values = e.sender.dataSource.data().map(function (item) {
                return item.value;
            });
        }
        else {
            var index = $.inArray("ALL",values);
            if (index > -1) {
                values.splice(index, 1);
            }
        }
        this.value(values);
    };

Hi all

I am trying to display events with no attendees on top of the other attendee groups in the timeline mode, so I can just simply drag and drop the events with no attendee to a attendee.

The vertical grouping demo just ignores those events without any attendees: http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical   

How can I implement this functionality? Can you provide a working demo if possible?

Hi..

Im using kendo mutliselect and dropdown list using angular js. i want to display items not available if items are not there.

i tried with select event its working only if drop down is not in repeat and with id,how can i do if drop down or multi select is with in ng-repeat. and if i use select event i need to do more code,is there any alternative to solve this issue?

here is my code for multi select:

  <select kendo-multi-select k-ng-model="manageResource.asset.operators"
                                            k-data-text-field="'name'"
                                            k-data-value-field="'operatorId'"
                                            k-data-source="manageResource.authorisedOperator"
                                            k-options="manageResource.customOptions" k-rebind="manageResource.customOptions"></select>

manageResource.customOptions = {
                    placeholder: "Select Operator",
                    valuePrimitive: true,
                    autoBind: false,
                    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                    '<span>Photo</span>&nbsp;&nbsp;' +
                    '<span>Employee Name</span>' +
                    '</div>',
                    itemTemplate: '<span class="k-state-default">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>&nbsp;&nbsp;' +
                    '<span class="k-state-default">#: data.name #</span>',
                    tagTemplate: '<span class="selected-value">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>' +
                    '<span>#:data.name#</span>'
                }

Thank.

Hi..

Im using kendo gantt chart. im giving option to view gantt chart data in full screen mode.im customizing the edit option for each task.when chart is in full screen mode if i trie to edit task details popup is opening behind the full screen,how to open popup infront of full screen 

here is my code for gantt chart full screen

View:

   <div id="activityganttchart" kendo-gantt k-options="createScheduleStep2.ganttOptions" class="row"
                 k-rebind="createScheduleStep2.ganttOptions"></div>
            <button class="grid-action-btn fullscreenBtn rightalign tooltipstyle action-gird-btn" uib-tooltip="Full screen" data-toggle="tooltip" tooltip-placement="top" ng-click="createScheduleStep2.toggleFullScreen()"><i class="settinggrid fa fa-arrows-alt"></i></button>

controller:

            function toggleFullScreen(control: string) {
                if (!document.fullscreenElement &&
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                    if (document.getElementById(control).requestFullscreen) {
                        document.getElementById(control).requestFullscreen();
                    } else if (document.getElementById(control).msRequestFullscreen) {
                        document.getElementById(control).msRequestFullscreen();
                    } else if (document.getElementById(control).mozRequestFullScreen) {
                        document.getElementById(control).mozRequestFullScreen();
                    } else if (document.getElementById(control).webkitRequestFullscreen) {
                        var element: any = Element;
                        document.getElementById(control).webkitRequestFullscreen(element.ALLOW_KEYBOARD_INPUT);
                    }
                    return true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                    return false;
                }
            }

            function onToggleFullScreen() {
                var editor = $("#activitygantt");
                if (toggleFullScreen("activitygantt")) {
                    editor.children()[1].style.setProperty("height", $(document).height() + "px");
                    editor.children()[1].style.setProperty("width", $("body").width() + "px");
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                }
            };

            function exitHandler() {
                var editor = $("#activitygantt");
                if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                    editor.addClass('fullscreenMode');
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                    var ganntchart = $('#activityganttchart').data('kendoGantt');
                    ganntchart.wrapper.css("height", "400px");
                    ganntchart.resize();
                }
            }


            if (document.addEventListener) {
                document.addEventListener('webkitfullscreenchange', exitHandler, false);
                document.addEventListener('mozfullscreenchange', exitHandler, false);
                document.addEventListener('fullscreenchange', exitHandler, false);
                document.addEventListener('MSFullscreenChange', exitHandler, false);
            }

Appreciate your support!
Thanks!

I've approached support about this, but since I can't upload a solution verbatim to a Dojo, I can't really reproduce it (that I know of).

In the attached screenshot, you can see that the DropDownList and other controls that are either Kendo controls or style by Kendo theme look normal, but the datePicker and NumericTextBox have a thick blue padding at the bottom. And the datePicker's icon is displaced to the right.

Any ideas are welcome. I can't post the example per se, as the apps are huge and involve a SQL database etc that I can't upload. However, this issue has been present for as long as I've been using Kendo controls, formerly in ASP.Net forms and now in html/WEBApi applications.

Thanks, Bob Graham

Hiya,

I was just wondering how to re-template the series labels. I used the following snippet for both the label and the tooltip but it's only working for the tooltip.

If setting the template for labels this way is not possible, is there a way then to make the tooltip visible all the time and not only on hover?

Kindly advise.

Best regards,

Byang