I am using kendo UI sortable without grid in my application. But it seems IE browser is not compatible for it. Our application is using AngularJS with select and ng-repeat. I was able to get it work for Chrome and Firefox but not with IE. Below is the code snippet for HTML

<select class="form-control" kendo-sortable k-on-end="endHandler(kendoEvent)" 
            k-placeholder="placeholder" k-hint="hint" id="favorite_reports" selectedClass= "selected"
            multiple ng-model="favoriteReports.chosenReports">
        <option ng-repeat="link in config.links">
            {{link.NAME}}
        </option>
</select>

JS:

$scope.endHandler = function (e) {
        var sortable = e.sender;
        // prevent the sortable from modifying the DOM
        e.sender.draggable.dropped = true;
        e.preventDefault();
        // update the model and let Angular update the DOM
        $timeout(function () {
            $scope.$apply(function () {
                $scope.config.links.splice(
                  e.newIndex, 0, $scope.config.links.splice(e.oldIndex, 1)[0]
                );
            });
        });
    };
    $scope.placeholder = function (element) {
        return element.clone().addClass("placeholder").text("drop here");
    };
    $scope.hint = function (element) {
        return element.clone().addClass("hint");
    };

 

And when I use ul and li instead of select, sortable function is not working as expected in chrome, IE and other browsers as well. When I try to drag one element, next element from the queue has the index change and couple of other issues. 

Could you please give me a working example for kendo with sortable functionality (not grid) which uses select and ng-repeat and works for ALL THE BROWSERS as well as AND we can disable the sortable functionality onClick on list for other functionality.

 

Also onClick, I was trying to get the e.currentTarget.selectedOptions.length value which is having the issue with IE saying as selectedOptions is undefined and chrome is working as expected. 

Also I am trying to achieve "multiple" for onClick functionality to remove from the list and add it to other list. (FYI)

Please let me know, if there is any example links or code snippet which works for all browser.

 

Thanks in advance,

Sujatha

 

 

 

Hello,

 

I'm trying the Kendo UI with lastest version and I'm facing to an issue using the TreeList component under Chrome (80.0.3987.122).

Please see the attached screenchot, coupling kendo ui 2020.1.219 with jQuery 3.4.1, the height of the first row is not initialized correctly.

You can run this demo here: https://dojo.telerik.com/EsobuqAH

Note it works under FireFox.

Any Idea ?

Thx.

Julien.

I want to create a dropdownlist named 'font size' that helps a user select font size out of the values lets say 12 pt, 14 pt, 16 pt....and so on.

These list items should not all appear with the same font size but should rather appear with a font size they represent. For example - 12 pt must show in 12 pt size, 14 pt in 14 pt size and so on.

 

Is it possible to show different list items in a dropdownlist in different font sizes? If yes, then how?

 

Thanks  in anticipation.

Hi,

As my title says, Im trying to bind MVVM attributes to command buttons in a KendoGrid. At the moment im struggling with binding an 'enabled' attr.

Dojo: https://dojo.telerik.com/AXojaNuT

In the above, I've bound the enabled state to a command button but it only makes the button look disabled, its still clickable.

Please advise.

Thanks, 
Grant

I am admittedly new to MVC and this may be something very simple that I am missing, but I am at a complete loss as to what else to do other than post here.  I have a model with a basic property called height:



I am creating a new basic information and passing to the view when I call the view:


Now in my view I am binding to this model using:


My problem is that when I pass the model object to my next method, the value for height has not been updated.  The min & max seems to be working based on the range attribute from the model so it seems as though that part is connected properly.  Also if I use the basic html controls (see below) then it works fine.


Please explain what I am doing wrong or have not set on the Telerik control to have it save the value on the model.

Thanks in advance,
Lee 

Hi - I'm just trying to include a dropdownlist as a column in my grid.  However, each field for ddl contactId is initially displayed as 'undefined' in the grid - as soon as I click on a contactId cell the correct contact is displayed, and as soon as I leave the cell the data reverts back to 'undefined' - I've looked at all the examples and in the forums - not sure what the problem is...any suggestions greatly appreciated 

Thanks a lot


    initGrid: function (eventId) {

        $("#gridInvitations").kendoGrid({
            autoBind: true,
            editable: true,
            columns:
                        [{ field: 'invitationId', title: 'invitationId', width: "100px", hidden: false },
                         { field: 'eventId', title: 'eventId', hidden: false },
                         {
                             field: "contactId",
                             title: "Contact",
                             width: "225px",
                             editor: INV.contactDropDownEditor,
                             template: "#=contactId.FullName#"
                         },
                         { field: 'inviteSentDate', title: 'Invitation Sent', format: "{0: yyyy-MM-dd HH:mm:ss}" },
                         { field: 'rsvpStatus', title: 'RSVP', hidden: false },
                         { field: 'rsvpDate', title: 'RSVP Date', format: "{0: yyyy-MM-dd HH:mm:ss}" },
                         { field: 'rsvpComments', title: 'RSVP Comments' }
                        ],

            dataSource: INV.createGridDataSource()
            
        });

    },

   
    createGridDataSource: function (eventId) {

        var dataSource = new kendo.data.DataSource({
            
            transport: {
                read: {
                    url: "/invitations/invitations.svc/tblInvitations",
                    dataType: "json"
                }
            },
            
            
            schema: {
                data: "d"
            }
          
            
        });

        return dataSource;

    },


     contactDropDownEditor: function (container, options) {
            
            $('<input name="contactId" required data-text-field="FullName" data-value-field="contactId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: {                        
                        transport: {
                            read: {
                                url: "/contact/contacts.svc/contacts_getList",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: "d"
                        }
                    }           
                });
    }

I'm kind of new to JQuery, Json, MVC and all so my problem is probably simple to fix but for some reason, I can't seems to find the answer.

I'm trying to use the Kendo DropDownList to call an MVC action that takes a parameters and sends a query to an ElasticSearch server. So far I have this code :

$('#myInput').kendoDropDownList({
    template: $("#inputTemplate").html(),
    dataValueField: 'Id',
    dataTextField: 'FullName',
    filter: 'contains',
    minLength: 3,
    dataSource: {
        serverFiltering: true,
            transport: {
                read: {
                    url: '@(Url.Action("ElasticSearch", "Participant"))',
                    dataType: 'json',
                    contentType:'application/json; charset=utf-8',
                    data:  {
                        critere: 'bob'
                    }
                }
           }

      }
});

 

This is actually working .... if I only want to search for "bob". But I can't figure out how to send the text from the seach field in the dropdownlist each time that I type something.

What am I missing here?

The application has a restriction for the name of the file to be maximum of 40 characters. Since this validation is done on the server is there a way to display the server upload error just like the file extension/ max file size.

I've looked at the DevExpress HTML grid, and when switching pages when AJAX-bound, the vertical scroll is put to the top.  I don't know anyone who would want to stay vertically scrolled to the bottom when switching to another grid page.

When using Kendo AJAX-bound grid and switching pages, the vertical scrollbar stays where it was on the previous page.  Is this a bug or did you just let that be something we have to do ourselves?

Hello,

I couldn't see anything in the API docs.  Is there a way to programmatically sort a table after the grid has been rendered?  We'd like to show the default sort order