Hi

I want to bind a dropdown list in a grid using cell template.

While using state in a cell template I am getting error store state is undefined.

Cell template is something like below.

const cellPurchaseCategoryTemplate = Vue.extend({
    props: {
        field: String,
        dataItem: Object,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String
    },
    computed: {
        purchaseCategoryList(): Array<CategoryChildCodeData> {
            if (this.purchaseCategories) {
                return Utility.cloneObject(this.purchaseCategories);
            }
        },
        ...invoiceApprovalStoreHelpers.mapState(["purchaseCategories"])
    },
    template: `<td>
                <cvc-autocomplete v-model="dataItem.category"
                                  v-bind:data-source="purchaseCategoryList"
                                  v-bind:name="assignFieldName(field, dataItem)"
                                  v-validate="'required'"                        
                                  data-vv-as="Purchase Category">
                </cvc-autocomplete>
            </td>`
});
export default cellPurchaseCategoryTemplate;

We trying to implement a Kendo grid for my project and I was trying to add 'All' option in the pagination and used dataStateChange event to set the take value but getting event value as undefined.

Whenever we select "All" option from the dropdown, In dataStateChange method , I am getting selected value as "totalItemCount" instead of "All", but I can see both "totalItemCount" and "All" options in dropdown.

Example:

we have 1000 records as "totalItemCount" in a table, provided image below. So I am able to see all the records in the table but in dropdown we can see both 1000 and "All" option. We only need to see "All" not 1000.

We should not see "totalItemCount" in the dropdown(as well as selected option) and see only "All" as a selected option(as well as dropdown) when we select "All" option from dropdown.

Can someone help to solve this issue, please?

pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [10, 15, 20, 'All'],
        previousNext: true,
        pageSizeValue: this.pageSizeValue,
    };
},

dataStateChange: function (event) {
       this.loader = false;
       this.skip = event.data.skip;
       this.take = event.event.value === 'All' ? 1000 : event.page.take;
       this.pageSizeValue = 'All';
},

Hi, I have used Kendo UI for Vue for quite some time now. I noticed that Kendo Dropdownlist components have the PopupAppendTo props to bind the dropdown to the element in template, while majority of the other components do not have and ending up appended to the body-tag (outside of <div id='app'>).

I'm quite surprised to see this because Vue.js only has control over the <div id='app'> element and Vue.js recommends against using body-tag. Why don't other components have this props as well so that Vue.js has full control over the Kendo UI components?

I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.

Hoping some demoes to show how to work fine.

Code as following

HTML:

<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>

JS:

resourceDataSource:

new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})

Rend Function:

resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered.  In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

Hello, I'm trying to understand why the following lines of CSS are needed for the DropDownList (configured with filtering and custom height set via popup-settings) to work. 

If I uncomment any of these CSS lines, the following unwanted behavior occurs:

1: scroll down a bit, like 100 or 200px so that the the DropDownList button is close the top of the viewport
2: click on the dropdown button

3: notice that the entire page scrolls to the top, almost as if the DropDownlist tried to open to top first but then mid-animation opened to the bottom.

Specifically the scrolling to the top of the page, is a behavior I'm trying to prevent.

Adding the extra lines of CSS is not a problem for me, however when the Vue app's mount target is nested, the unwanted behavior can be observed again. In the stackblitz you can demo this by nesting the mount target inside a <div>. Because my app's mount target is really deeply nested inside a DOM I don't think it's viable to add CSS styles to every wrapping element. 

Is there a workaround for this? Thanks in advance

1f9xdq (forked) - StackBlitz

We are evaluating kendo vue components for our project.

when typing in combobox, the dropdown doesn't scroll to first match.

Please refer to demos

https://www.telerik.com/kendo-vue-ui/components/dropdowns/combobox/

data items are:

["Baseball", "Basketball", "Cricket", 
            "Field Hockey", "Football", "Table Tennis", "Tennis", 
            "Volleyball" ]

when searching for "volley" the dropdown doesn't scroll to volleyball  item.