I found an example for jQuery only: https://demos.telerik.com/kendo-ui/sortable/integration-tabstrip

But I need it for Angular "^5.2.9"

My attempt work technically, the tabs move and are re-orderable, but the drag handle is not the Tab item itself, it is a separate [object Object] text.

I have a column with short date time as string like: dd/mm/yyyy . for example: 08/04/2018

when I click on the title of the column name to sort it doesn't sort properly, but makes a mix

my html file:

<kendo-grid #grid="kendoGrid"
                [data]="gridView" id="GridID"
                [pageSize]="pageSize"
                [skip]="skip"
                [pageable]="true"
                [sortable]="{allowUnsort: allowUnsort, mode: multiple}"
                [resizable]="true"
                [sort]="sort"
                [scrollable]="{virtual: true}"
                (pageChange)="pageChange($event)"
                (sortChange)="sortChange($event)">

        <kendo-grid-messages noRecords="no Records">
        </kendo-grid-messages>

        <kendo-grid-column *ngFor="let item of gridColumnData" [headerClass]="'t-head'" [hidden]="item.hide" [field]="item.field" [title]="item.title">
        </kendo-grid-column>

    </kendo-grid>

my .ts file:

public sort: SortDescriptor[] = [{
        field: '',
        dir: 'asc'
    }];

public sortChange(sort: SortDescriptor[]): void {
        this.sort = sort;
    }

We want something that is a combination between the ComboBox and the AutoComplete. Basically, we need to have a control that works exactly like the ComboBox about 99% of the time - only allowed items can be selected, we need to know the id of the selected item, an onChange event (or equivalent) must be handled, etc. However, we also have a request that users can retrieve a subset of the items based on what they type into the control. The data must also include an "Any" option that is not returned with the Input data for the parent component.

Currently, we are using the ComboBox with suggest and filterable set to true. We are adding the "Any" in ngOnInit and ngOnChanges as needed by calling the following:

The ComboBox uses filteredItems as its data and we are setting the initial value to be anyItem which has an id = 0. We are using the valuePrimitive because we need to run another event when any inputs change on the form, so we need to run the valueChange event on the ComboBox. We are also using the filterChange to filter the items shown based on what the user types in.

When the user types in something that does not match, we are setting the filteredItems to return allItems just as we do at the beginning so that the user can just select something from the list. If the user selects nothing, we set the value to be 0 so that the request will use "Any" because the API will not accept an invalid itemId. 

Everything is working as designed. However, we have a couple UI issues that need to be addressed before we can proceed. 

1. If the user types in something invalid and switches focus, the text is removed, but "Any" is not shown - even though the value is reset to 0. Is there a defaultValue or some way to programmitically insert text into the ComboBox input?
2. When the user is typing in text, the popup with the suggestions blocks the bottom 50% of the text in the input. Is there a way to push this popup lower? I looked at the CSS rendered for the popup, but it appears to be calculated based on the position that the ComboBox is in the browser window. I tried adding something to the popupSettings parameter, but it did not seem to recognize my changes. This is slightly annoying when the filteredItems have some items, but it is really a deal-breaker when the user types in something that has no matches because a big empty window blocks the text.

Any suggestions you could give on this would be helpful! I have tried using AutoComplete, but it appears that there are even more issues to address. However, if you know of a way to use that instead of the ComboBox, I am open to that as well.

Thank you for your help!

I have been going through the Angular documentation and  found the Dynamic forms in Angular Reactive forms. This would be of big help to me, Since my form has to be able to dynamically set the number of  input controls and input  control types based on the business object model and change validations as per the business logic as well.  Need the kendo form controls instead of normal html form controls to be rendered dynamically.

Please find the below link to which I am referring to.

https://angular.io/guide/dynamic-form

Please suggest how this can be achieved through kendo Angular UI, 

Regards

I had a quick question regarding the employment of DefaultItem and its intereactions with [(ngModel)] and selected values.

I'm currently employing several cascading dropdownlists in a reactive form. I started off following the directions to make have three different sets of arrays - ie. default, dataResult, and selected. All of that seems to work although I found out that if I want to, say, go to another page and come back while inserting the previously selected values back into the dropdownlists from BehaviorSubject services I had make the select items valuePrimitive (to match my form value).

The problem with the above approach is it seems to allow either one or the other - ie. I can either have a defaultItem with a user-defined 'please select X' as the initial state but not be able to re-insert previously selected values on demand (it will always show 'please select X' on tab or page reload) but if I use the primitive approach and use selected in the [(ngModel)] to push the initial value the back part will work, ie. I can load previous values into the dropdownlist, however when no data has been entered into the dropdownlists I will have a blank initial state with the 'please select X' as one of the options rather than the default.

I'm wondering whether there is a way for me to be able to have both 'please select X' as the default value (assuming an object of id and name selected by value id as primitive) and be able to load the dropdownlist by way of programmatic value selection where selectedValue would be a string (GUID) which would still recognize an initial formControl value of "" as referring to the defaultValue of {id: "", name: "please select X"}

Let me know if the above makes sense or if there are any details you need clarified. Thank you!

In KendoUI Builder, we mention about Service URI and Catalog URI. REST service is also created using Progress App Server.

How to display Progress RDBMS data in KendoUI for Angular(4)?