Telerik Forums
Kendo UI for Vue Forum
2 answers
861 views
I am working with vue 2.5.17 and typescript 3.1.1. A client has requested a chart to display data (lots of data points). I implemented use of the kendo vue line chart with panning and zooming enabled. The good news is that the client loves it. The bad news is that they want the chart to start off zoomed out all the way when it is shown. I checked the zoomable properties under the kendo-chart API for vue, but I didn't see an option for setting the zoom level. Is there a way to set the chart's zoom level to be all the way zoomed out on launch?
Paul
Top achievements
Rank 1
 answered on 06 Mar 2020
2 answers
70 views

Hi,

according to  This Demo eventsPerDay Prop should work in kendo 2020 R1 release. But it is not working for the vue version of the kendo-scheduler-view. Is there any workaround to do in order to make this work? 

One other thing is i even tried the css way with this but that also not working.

 

Thanks and Regards!!!

Plamen
Telerik team
 answered on 06 Mar 2020
2 answers
114 views

I'm trying to import only the components needed, but when I import only the panelbar and the wrapper, the animation does not playing when expanding/unexpanding the panelbar.

The animation does play when importing all of kendo-ui, so what other component do I need to bring in to make the animations function?

StackBlitz of animation not playing here: https://stackblitz.com/edit/vue-3kamya?embed=1&file=index.js

Steven
Top achievements
Rank 1
 answered on 05 Mar 2020
3 answers
102 views

Hi Kendo,

Is there a place to read the latest changes or notes from the last release. The content on the site is a half year behind.
By example access to the github repo to see the latest commits or a wandered topic post with some info.

Kind regards,
Sander

Plamen
Telerik team
 answered on 05 Mar 2020
7 answers
229 views

I am using the Grid, but manipulating the URL with search parameters.  The first page works great, showing the total rows, number of pages, etc.  When navigating to other pages, I can see that the grid is successfully generating and hitting the URL.  Within the change() event, I can see the correct rows returned.  However, the grid is not updating with the new content.  Is there something else I need to do?

Here is the grid definition

<kendo-grid ref="gridComponent"
                      :data-source="quotes"
                      :auto-bind="true"
                      :selectable='true'
                      :sortable='true'
                      :resizable='true'
                      :pageable-page-size="pageSize"
                      :pageable-page-sizes='true'
                      :pageable-button-count='5'
                      :reorderable='true'
                      :no-records="noRecords"
                      v-on:databinding="onDataBinding"
                      v-on:databound="onDataBound"
                      v-on:change="rowSelected"
                      :sort="sortFilter">
computed: {
  quotes: function () {
    let vue = this
    //  eslint-disable-next-line
    return new kendo.data.DataSource({
      transport: {
        read: {
          url: this.queryString,
          beforeSend: function (xhr) {
            // xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
            xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)
          },
          type: 'GET',
          dataType: 'json'
        }
      },
      schema: {
        total: function (response) {
          let records = 0
          if (response && response.length > 0) {
            records = response[0].Count
          }
          return records
        }
      },
      pageable: 'true',
      pageSize: 10,
      serverPaging: 'true',
      // testing the change event handler
      change: function (e) {
        // let data = this.data()
      },
      requestStart: function () { vue.loading = true },
      requestEnd: function () { vue.loading = false }
    })
  },
  queryString () {
    var me = this.$store.getters.user
    var agentNumber = me.userName
    var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`
    if (this.currentPolicyNo) {
      searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`
    }
    if (this.currentInsuredName) {
      searchURLstring += `&InsuredName=${this.currentInsuredName}`
    }
    if (this.currentAddr1) {
      searchURLstring += `&Address=${this.currentAddr1}`
    }
    if (this.currentSortField) {
      searchURLstring += `&sortField=${this.currentSortField}`
      searchURLstring += `&sortDirection=${this.currentSortField}`
    }
    searchURLstring += `&SearchScope=${this.searchScope}`
    return searchURLstring
  }
}
Aleksei
Top achievements
Rank 1
 answered on 04 Mar 2020
3 answers
873 views

I recently ran into a situation where an update method I wrote stopped working.  The method uses jQuery to open a grid row, target 4 separate fields and change their values to new ones that have come in from an API call.

When I dug in, I discovered that the attribute my method uses to navigate to each field in the row, data-field="myFieldName", was completely missing.  Thus the jQuery was finding nothing and no updates were happening.

The field is in all my other grids so I looked to see what I had done differently in this grid to make that disappear.  Turns out a couple things: One was I added "editable" and "navigatable" as options to the grid, because I'm allowing in-cell editing.  The other was I set "scrollable" to true (I typically set it to { virtual:true }).

As soon as I did this the "data-field" attribute stops being rendered in the columns.  With "editable" and "navigatable" what I get instead is an attribute "aria-describedby=" with a cell-specific GUID.  The "scrollable" property seems to just eliminate the data-field but has no other weird effects.

I need in-cell editing but I also need to have each field position identified.  Is there a way I can force "data-field" to show up?  Alternatively I could add a new "data-customAttribute" type of attr on there, but how do I accomplish that?  Worst case I can add an identifier into the actual template for the column, which is just some simple HTML. 

I'd prefer to do it with "data-field" since that would allow me to implement one consistent method for editing values whether a grid is marked as editable or not.

Plamen
Telerik team
 answered on 03 Mar 2020
2 answers
1.1K+ views

I am trying to figure out how to replace the points (open circle dots) on a line chart with just a smooth line. I have been looking through the chart API and thought the solution would be the plot area border dash type. However, this doesn't appear to do anything. I am either implementing it incorrectly or it is not the correct solution. A third possibility is that it is buggy and does not work. I am using Vue with typescript. Below is my attempted implementation:

<kendo-chart :data-source="chartData"
:series="series"
:pannable-lock="'y'"
:zoomable-mousewheel-lock="'y'"
:zoomable-selection-lock="'y'"
:category-axis="categoryAxis"
:theme="'sass'"
:category-axis-title-text="'Time'"
:value-axis-title-text="'Attribute'"
:tooltip="tooltip"
:plot-area="plotArea">
</kendo-chart>

plotArea: any = {
border: {dashType: 'solid'}
};

Nikolay
Telerik team
 answered on 02 Mar 2020
5 answers
127 views

This works

<kendo-grid :data-source="localDataSource" :columns="columnsTest[1]"></kendo-grid>

 

Vue:

columnsTest: [

    [{

'field': id
'title: 'ID'

    }],

[{
'field': id
'title: 'ID'
    }]

]

 

This does not work
<kendo-grid :data-source="localDataSource" :columns="columns"></kendo-grid>

Vue:
columns: [
    {
'field': id
'title: 'ID'
    },

   {
'field': product
'title: 'Product'
    }
]

 

I just check if the object has a title and copy the objects from the  array to a new array, columns.

but the title is not shown, just the table name as if a never used   on the grid.

Any tips? The reason for this is to only show columns that have a title from the backend.

 

 

 

Dimitar
Telerik team
 answered on 02 Mar 2020
1 answer
110 views

I am trying to figure out how to replace the points (open circle dots) on a line chart with just a smooth line. I have been looking through the chart API and thought the solution would be the plot area border dash type. However, this doesn't appear to do anything. I am either implementing it incorrectly or it is not the correct solution. A third possibility is that it is buggy and does not work. I am using Vue with typescript. Below is my attempted implementation:

<kendo-chart :data-source="chartData"
:series="series"
:pannable-lock="'y'"
:zoomable-mousewheel-lock="'y'"
:zoomable-selection-lock="'y'"
:category-axis="categoryAxis"
:theme="'sass'"
:category-axis-title-text="'Time'"
:value-axis-title-text="'Attribute'"
:tooltip="tooltip"
:plot-area="plotArea">
</kendo-chart>

plotArea: any = {
border: {dashType: 'solid'}
};
Paul
Top achievements
Rank 1
 answered on 27 Feb 2020
1 answer
291 views

Dear Telerik Admin,

 

I am using the Kendo Upload component to send a file to my server and in certain cases, it responds with null.

This causes the upload component to throw the following error:

   "Uncaught TypeError: Cannot read property 'fileUid' of null
    at parseSuccess (webpack:///./node_modules/@progress/kendo-ui/js/kendo.upload.js?:2105)
    at tryParseJSON (webpack:///./node_modules/@progress/kendo-ui/js/kendo.upload.js?:2450)
    at formDataUploadModule.onRequestSuccess (webpack:///./node_modules/@progress/kendo-ui/js/kendo.upload.js?:2131)
    at XMLHttpRequest.eval (webpack:///./node_modules/@progress/kendo-ui/js/kendo.upload.js?:2037)"

 

Could you please let me know when this is fixed? 

 

Kind regards,

 

Natasha

Ianko
Telerik team
 answered on 26 Feb 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
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
Button
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
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
SpeechToTextButton
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?