I'm trying to populate a grid with some async data (not in this repro for simplicity) and do the data processing inside a Vue computed function. 

However I can't seem to get the expanding/collapsing rows functionality to play along nicely.


Here's my attempt (where I save 'e.collapsedGroups' into a ref and recurse over it inside the computed):

Fkcdqd (forked) - StackBlitz

Basically the only issue that I'm still seeing is that when I collapse product name 'Apple' it will close all 'Apple' rows. You can observe this by going to the repro and collapsing 'Apple' product in the units in stock '2', and then scrolling down to the units in stock '7' and seeing there that the 'Apple' is also collapsed.


My guess is is that there must be a simpler way to implement the expand functionality with a computed, but so far haven't found a way.

I would really appreciate any input to help me along 😁

Hello,

I can't make it work to have a custom placeholder when value of kendo-date-picker is empty. It always show the expected format even with the placeholder parameter set.

Example: https://cnslg5.stackblitz.io

One would expect to have the defined placeholder to be shown and not the date-input format-placeholder. How to avoid that ?

My kendo-datasource  have  transport-read: GridDataSource , and in a same page i have input field to collect  input number ,  when ever i keein in the input field each key in time GridDataSource function also getting called , it should not happen for me . any idea ?

<input
                                    :name="'challanno'"
                                    :disabled="!isEdit"
                                    v-ec-disabled="!isEdit"
                                    :ec-type="'text'"
                                    v-model="challanno"
                                    v-ec-validate="{required: true}"
                                    v-ec-validate:fieldName="'Challan no'" />

<kendo-datasource ref="maingridsourcenew"
                            :type="json"
                            :transport-read="GridDataSource"
                            :batch="false"
                            :server-paging="false"
                            :server-sorting="false"
                            :page-size="10"
                             :schema-model-id="'_id'"
                             :schema-model-fields="schemaModelFields"
                            :schema-data="'data'"
                            :schema-total="'total'">
                        </kendo-datasource>

  GridDataSource(ev) {
            console.log("testinggrid---------->")
            ev.success({
                        data: [],
                        total: 0
                    });
        },

On most Native Kendo Vue components the following classes are applied depending on the state: 

• 'k-floating-label-container'         
• 'k-state-focused'          
• 'k-state-empty'         
• 'k-autofill'         
• 'k-state-invalid'         
• 'k-rtl'

'k-state-invalid' for instance adds a red border around the Kendo Input component:



In this example the red line isn't added to the html textarea:
https://www.telerik.com/kendo-vue-ui/components/form/guidelines-with-examples/#toc-vue-form-inputs

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

The code of the method editTemplate()

The code of the component that contains the custom template

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

Thanks.

Hi,

By using the Kendo validator on a modal window (kendo-window) containing some required fields, I've got this issue:

• I try to save everything without filling the fields, the validation messages will appear below the required fields, resizing the modal window;
• I fill a required field and then click the save button. This required field will lose its focus, triggering the validation event that will hide the validation message, thus resizing the window and because of that, the click event on that save button will not be fired because the button is not below the cursor anymore;

I saw that there is a validateOnBlur option that I need to be enabled but it is used only when the field lose its focus. Is there a way to fire the validation event while the user is typing or changing the field data? It would fix that problem because the modal window will be resized before the user can click on the save button.

I am using the VueJS Wrappers.

Thanks

I have a native DatePicker that I am using in an application with many components that use the Kendo wrapper validation widget. I am trying to get the behavior and appearance of the DatePicker to match that of the existing components. Validation should occur when a field loses focus and an invalid field should have a red outline and red error message below it. I tried to use the native DatePicker validation functionality, but I was unable to make validation consistent with all of the other components.

I am able to use the Kendo wrapper validation widget to perform validation when a field loses focus and display an error message, but I have been unable to get a red outline on an DatePicker in the invalid state. How can I accomplish this? 

See https://stackblitz.com/edit/esiptm for an example.

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. 

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.

Hi all,

using the kendo-datetimepicker, you can force the masked date input with the prop: dateInput=true.

https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/configuration/dateinput

Is this functionality also available for table cells, or how can this be achieved?

Regards

ulf