Telerik Forums
Kendo UI for Vue Forum
0 answers
842 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
0 answers
137 views

Hello,

Is there a solution for a filtered column in a grid based on column filter or an external filter to change its color to show to the user that it has been filtered with something?

I try to implement it myself and I fall short to understand all the possible subcases that occur. Is there a ready solution or could someone suggest me how to do it?

Thanks

Daniel
Top achievements
Rank 2
Iron
Iron
 asked on 03 Feb 2023
2 answers
1.1K+ views

Hello,

I've an error regarding Kendo style when I import it into an SCSS file. Let's assume I want to customize Kendo theme, I have 4 scss files :

  • _tokens.scss which contains color palette definition
  • the kendo scss theme (kendo-theme-bootstrap in this case, but same issue with the default theme)
  • _overrides.scss which may contains overrides (typhography, margin/padding on some components, etc)
  • and a base.scss file containing basically the import of the 3 preceding files :
@import 'tokens';
@import '@progress/kendo-theme-bootstrap/dist/all';
@import 'overrides';

However, when I import my base.scss file into the Vue App (whether in the main.js or the App.vue), I've this error :

Plugin: vite:css
  File: /src/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss:37542:173
  Error: expected ";".
        ╷
  37542 │             background-image: url('../../node_modules/@progress/kendo-theme-bootstrap/dist/k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img'));
        │                                                                                                                                                                             ^
        ╵
    node_modules/@progress/kendo-theme-bootstrap/dist/all.scss 37542:173  @import
    src/assets/kendo.scss 2:9                                             @import
    src/assets/base.scss 1:9                                              root stylesheet

If I import directly the kendo-theme-bootstrap scss file in the main.js or the App.vue, there is no error. Here is the StackBlitz reproducing the error:

https://stackblitz.com/edit/vitejs-vite-f63fqh

How can I resolve this ?

Best Regards,

Fabien / SYSCO

Ivan Zhekov
Telerik team
 answered on 03 Feb 2023
0 answers
178 views

Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :

<Editor
                  ref="editor"
                  :tools="tools"
                  @blur="saveResumePI('draft');setValueEditor()"
                  v-model="candData.mem_about_me"
              />

second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question

you can ask more detail if my question is confusing
thanks

 
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 02 Feb 2023
1 answer
129 views

I'm experiencing severe clashes when using native packages with the DropDownTree wrapper. I was only using the wrapper packages before and everything was working fine, however now that I added the native grid to the app the wrapper DropDownTree is giving me Uncaught ReferenceError: jQuery is not defined

I remove all non standard code and still it comes out like the CSS is never applied on top of some other broken stuff.

I'm on VueJS 2.7.14

"@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.3",
    "@progress/kendo-dropdowntree-vue-wrapper": "^2023.1.117",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-svg-icons": "^1.1.1",
    "@progress/kendo-theme-default": "^6.0.3",
    "@progress/kendo-ui": "^2023.1.117",
    "@progress/kendo-vue-animation": "^3.8.1",
    "@progress/kendo-vue-data-tools": "^3.8.1",
    "@progress/kendo-vue-dateinputs": "^3.8.1",
    "@progress/kendo-vue-dropdowns": "^3.8.1",
    "@progress/kendo-vue-excel-export": "^3.8.1",
    "@progress/kendo-vue-grid": "^3.8.1",
    "@progress/kendo-vue-indicators": "^3.8.1",
    "@progress/kendo-vue-inputs": "^3.8.1",
    "@progress/kendo-vue-intl": "^3.8.1",
    "@progress/kendo-vue-popup": "^2.7.3"

I used these packages before and everything was fine:  

    "@progress/kendo-dropdowntree-vue-wrapper": "^2021.3.1207",
    "@progress/kendo-licensing": "^1.2.1",
    "@progress/kendo-theme-default": "^4.43.0",
    "@progress/kendo-ui": "^2021.3.1207"

If anyone could tell me how to use the css file from @progress/kendo-theme-default": "^4.43.0" inside a component I think that would solve my problem.

Vincent
Top achievements
Rank 1
Iron
 updated answer on 24 Jan 2023
1 answer
112 views

Hello,

I know that DropdownLisit wrapper component has a Group functionality for list rendering.

I was wondering if such functionality exists within the DropdownList Native component, and if not, is there a way to achieve one?

I can think of several ways using custom template to achieve this (very restrictive on how the data structure must be), but I would like some ideas on ways that other people have or would do this.

Thank you!

Plamen
Telerik team
 answered on 17 Jan 2023
0 answers
306 views

Hello, 


I'm trying to use <MultiSelect> to v-model a property on an object, however this doesn't work fully as the dropdownlist doesn't pre-select the values, allowing the user to pick the same option twice. 

See:

H2w74h (forked) - StackBlitz

Repro steps:

1: Open dropdownlist, see that 'Baseball' is not pre selected and highlighted in blue
2: Click on 'Baseball' again, Baseball is now selected twice
3: Open dropdownlist again and see that 'Baseball' is selected and highlighted in blue
4: Remove the last 'Baseball' chip (the one on the right).
5: Open dropdownlist again and see that 'Baseball' is not highlighted blue anymore

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 16 Jan 2023
0 answers
117 views
I want to change the order of the splitter by drag and drop and save the layout to the db.
finalf
Top achievements
Rank 1
 asked on 11 Jan 2023
0 answers
122 views
hi i want to ask about wrapper and naative component. is that possible to combine wrapper and native component in 1 feature? for example im using grid table from native component and filter columnMenu checkbox from wrapper component. i already try it but still not working until now
appreciate your help. thanks
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 06 Jan 2023
0 answers
246 views
Hi i want to ask about datepicker in this Demo. first of all i already implement datepicker and successfully show the UI but not same like in demo. my guess is that css of datepicker is not loaded and datepicker UI looks big when i open it
i attach file of datepicker UI right now in my grid table. is there something wrong with my setup?
<datepicker
                                              :style="{ width: '145px' }"
                                              :default-value="new Date()"
                                              :format="'MMM DD, YYYY'"
                                              v-model="interviewDate"
                                            >
                                            </datepicker>
import { DatePicker, TimePicker } from '@progress/kendo-vue-dateinputs';
components: {
    'datepicker': DatePicker
  },

appreciate your help. thanks
you can ask if my english is confusing 
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 06 Jan 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
Editor wrapper
DataSource wrappers (package)
DateInput
DateTimePicker
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?