Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
4 answers
1.1K+ views

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
            :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
            :transport-read-data-type="'jsonp'"
            :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
            :transport-update-data-type="'jsonp'"
            :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
            :transport-destroy-data-type="'jsonp'"
            :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
            :transport-create-data-type="'jsonp'"
            :transport-parameter-map="parameterMap"
            :server-paging="true"
            :page-size='5'>
    </kendo-datasource>
 
    <kendo-grid :height="600"
            :data-source-ref="'datasource1'"
            :pageable='true'
            :editable="'inline'"
            :page-size='5'
            :toolbar="['create']">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>
    </kendo-grid>
</div>

 

And here's my JS (using webpack):

Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);
 
new Vue({
    el: '#vueapp',
    data: {
        schemaModelFields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
            Discontinued: { type: 'boolean' },
            UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
        }
    },
    methods: {
        customBoolEditor: function(container, options) {
            kendo.jQuery('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)
            kendo.jQuery('<label class="k-checkbox-label"></label>').appendTo(container)
        },
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

 

Am I doing something wrong, or is this functionality not supported yet?

Veselin Tsvetanov
Telerik team
 answered on 04 Jun 2018
1 answer
88 views

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Petar
Telerik team
 answered on 30 Jun 2021
1 answer
200 views

Hi, i'm new to kendo and i'm trying to create a filterable grid with a grid native component. Everything works well BUT i'm stuck with the full list of operators (contains, begins, is not null,...).

Is there an easy way to customize the list of operators ? I will probably only need "begins" and "is equal to".

I saw that with the grid-wrapper I could define a list with the property "filtterable" but it doesn't seem to work with grid native. I got an error saying that Filterable could'nt be assigned with an object.

Thanks a lot !

Petar
Telerik team
 answered on 20 Oct 2020
1 answer
121 views

Hello,

i am currently evaluating kendo ui and i am in a struggle while implementing the following:

Since i have many resources and events i want to use server filtering.

The example from the link below works great for event filtering.
https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/filtering/server-filtering


My problem is i would need the resources also to load dynamically from a datasource(with start/end set parameters)
But since the resources seems to be loaded before the scheduler view seems to be ready i do not have the start/end variables.

Changing the resources after the scheduler is loaded and perform a scheduler.refresh does not work.
It is showing the changed resources only after an action on the scheduler (change view, click on today)

Do you have any hints for this?

Thank you and best regards, Alex

Veselin Tsvetanov
Telerik team
 answered on 30 Nov 2018
1 answer
213 views

Hello, 

I want to integrate the Kendo UI Grid to my project (composition api + TypeScript).

In specific I need help to undertand al least one integration feature in the grid, the filtering

I readed this documentation: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/

I make the corresponding settings on my code but the filtering doesn't work.

So, do you have an example or better documenattion to undertand the integration, but using Composition API + TypeScript

Thanks in advance

 

 

 

 

Petar
Telerik team
 answered on 04 Jul 2022
0 answers
145 views

Hi i want to ask about search in columns filter grid table multiselect checkbox like in this demo Link

so i want to trigger function and hit API when search data in multiselect checkbox. is there any way to achieve it? i tried following some way from doc but still fail to implement
my code right now :

<GridColumnMenuCheckboxFilter :column="props.column"
           :filterable="props.filterable" :filter="props.filter"
          :unique-data="false" :search-box="true" :expanded="true"
           :data-items="cities" @filterchange="filterCityGrid"
           @expandchange="expandChange" @closemenu="
           () => {
              props.onClosemenu();

           }" />

filterCityGrid(newDescriptor, e) {
            newDescriptor.filters[0].filters.map(
                (filter) =>
                (filter.value = this.cities.find(
                    (el) => el.mem_city_placed_name === filter.value
                ).id)
            )
            this.handleFilterChange(newDescriptor, e);

        },

expandChange() {
            this.$emit('expandchange');
        },
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 10 Feb 2023
0 answers
352 views

Hello,

 

In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.

I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?

Thanks

//This adds a custom template to my column menu

column.columnMenu = "CheckboxColumnFilterRender";

//This adds a custom icon and a custom color to my column header

headerClassName:"generic-filter-icon c-gray-600",

 

<templatev-slot:CheckboxColumnFilterRender="{ props }">

                        <NbGenericCheckboxesColumnFilter
                            v-if="gridDataReady"
                            :column="props.column"
                            :filterable="props.filterable"
                            :filter="props.filter"
                            :data-items="dataItems"
                            @filterChange="(e) => props.onFilterchange(e)"
                            @closeMenu="(e) => props.onClosemenu(e)"
                            @contentFocus="(e) => props.onContentfocus(e)"
                        ></NbGenericCheckboxesColumnFilter>
                   

</template>

Daniel
Top achievements
Rank 2
Iron
Iron
 asked on 03 Feb 2023
3 answers
41 views

I am using the column menu from the example in the docs. However I have added a button outside of my grid that can be used to quickly set a preset filters by updating the filter field. The filtering works, but the column menu interface is not updated accordingly. What can I do to make the column menu react to changes to the filter field?

https://stackblitz.com/edit/drvkhm

Thanks!

Petar
Telerik team
 answered on 26 Sep 2019
1 answer
20 views

For the data tools filter is it possible to customize the dropdownlist component that is used to display the list of fields assigned to the :fields prop? I have followed the  documentation for customizing the editors used for the fields input values , using slots, which works well. However I wanted to add the "filterable" attribute to the fields dropdown list as we have a large number of fields in the list and it would be good to be able to filter the list via a searchbox. 

Konstantin Dikov
Telerik team
 answered on 23 Nov 2023
0 answers
44 views

Hello,

 

I need to use a column filter with checkboxes on my current grid. I want the checkboxes to have values from all the possible data from the server instead of only the data that I got on the current page.

This means that when the column filter is getting open, I need to make a call to the server in order to get all the data I need.

Can you please provide me a way to do, because I can't find one.

Thanks

 

Nevermind, I solved it. I saw that there is a property dataItems. This raised another question. How can I make a loading animation for the dropdown while I m waiting to get my data?

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