Telerik Forums
Kendo UI for Vue Forum
46 questions
Sort by
1 answer
232 views

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;

Ianko
Telerik team
 answered on 03 May 2019
1 answer
100 views
I am trying to implement virtualization in a dropdown list using Vue.js and Kendo-UI. I have successfully implemented virtualization but I am havign trouble understanding the importance of `ValueMapper`. What this means is that Dropdown options are correctly loading in the DropdownList when the user scrolls down, but the problem occurs when the user makes any selection in the Dropdown list.

When the user selects any value from the dropdown list, I see this error in the console: 

> ValueMapper is not provided while the value is being set

I've read the docs and come to a conclusion that implementing a value mapper is only required when the dropdown option needs to be pre-fetched (See https://www.telerik.com/forums/need-help-understanding-virtualization-paging#C3qyuxTFGUSIRVeSxQZgog for detailed explanation).

But I am getting the above entioned error even when I select a dropdown option that has already been loaded. There must be something that I haven't understood about `valuemappers`.

Also, I am using dapper ORM in the backend which doesn't support `IQueryable` and therefor I've writed custom SQL to get paged data.

Here's my vue code:

    <template>
      <div v-show="visibility=='true'">
        <label v-html="label">{{label}}</label>
    
        <kendo-datasource
          ref="remoteDatasource"
          :transport-read-url="getRequestUrl"
          transport-read-type="GET"
          transport-read-data-type="JSON"
          page-size="20"
          schema-data="Data"
          schema-total="Total"
          server-paging="true"
        ></kendo-datasource>
    
        <kendo-dropdownlist
          ref="dropdownlist"
          v-model="cntrlValue"
          height="130"
          virtual-item-height="26"
          :virtual-value-mapper="valueMapper"
          data-source-ref="remoteDatasource"
          data-text-field="dropdownText"
          data-value-field="dropdownValue"
          option-label="Select here..."
          @close="onSelect"
        ></kendo-dropdownlist>
      </div>
    </template>
    
    <script scoped>
    import service from "somepath";
    export default {
      name: "FormGroupSelect",
      props: {
        id: {
          default: "kendo-Dropdown",
          type: String
        },
        name: {
          type: String
        },
        label: String,
        visibility: String,
        dropdownKey: String
      },
      data() {
        return {
          cntrlValue: this.value
        };
      },
      watch: {
        value: function(newVal) {
          this.cntrlValue = newVal;
        }
      },
      methods: {
        onSelect: function() {
          this.$emit("Select", this.cntrlValue);
        },
        getRequestUrl: function() {
          return service.getDropdownOptionsRequestUrl(this.dropdownKey);
        }
      }
    };
    </script>

So, Should I implement value mapper even when I don't want to allow my user to select a value that hasn't been loaded in the dropdown yet? And if so, what is the best way to implement it without putting burden on the server by reading all the possbile values and then searching for the indices (because that's how it's done in the docs example).

Plamen
Telerik team
 answered on 23 Jan 2019
1 answer
104 views

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'; },



Petar
Telerik team
 answered on 09 Dec 2022
1 answer
145 views

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?

Martin
Telerik team
 answered on 19 Aug 2019
3 answers
56 views

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"
})
}

 

 

 

Plamen
Telerik team
 answered on 05 Dec 2018
5 answers
651 views
When i select any value in drop down i need selected value as a icon. Hear i am attaching a sample wire frame. 
Martin
Telerik team
 answered on 24 Oct 2019
2 answers
362 views

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.

Filembar
Top achievements
Rank 1
Iron
Iron
 answered on 04 Feb 2022
0 answers
22 views

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

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 16 Nov 2023
1 answer
359 views
I am working with the wrapping grid and I saw the need to add html elements in the header of my grid, in this case I would like to add a button and a drop-down to select the columns to be displayed, I know that the grid has the option of add edit buttons, add etc. although I need to add a button for a different task. I would like to know if it is possible to do this, I leave an example of what I want to do. THANKS
Ivan Danchev
Telerik team
 answered on 07 Jan 2020
1 answer
53 views

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.

Plamen
Telerik team
 answered on 30 Mar 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor wrapper
Input
NumericTextBox
Scheduler wrapper
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Styling / Themes
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Calendar
Chart wrappers (package)
DropDownList wrapper
Window
Chart
Tooltip
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Card
FloatingLabel
Form
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
+? more
Top users last month
Abhishek
Top achievements
Rank 1
Iron
Johan
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Stephan
Top achievements
Rank 2
Iron
Iron
Veteran
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Abhishek
Top achievements
Rank 1
Iron
Johan
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Stephan
Top achievements
Rank 2
Iron
Iron
Veteran
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?