syncfusion / ej2-vue-ui-components Goto Github PK

Syncfusion Vue UI component library offer more than 50+ cross-browser, responsive, and lightweight vue UI controls for building modern web applications.

Home Page: https://www.syncfusion.com/vue-ui-components

License: Other

JavaScript 2.84% TypeScript 88.69% SCSS 8.47%

vue vuejs component-library ui-components meterial-design office-ui-fabric bootstrap-theme accessibility data-grid charting-library

ej2-vue-ui-components's Introduction

Syncfusion Vue UI Components Library (Essential JS 2)

Syncfusion Vue UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 70+ UI components that every applications will ever need.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Resources

Framework highlights

Lightweight and user friendly

The entire library is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires.

Modular architecture

All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application.

Built for performance

Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible.

Responsive and touch friendly

All the components are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops.

Stunning built-in themes

Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "Theme Studio" to customize the provided built-in themes.

Globalization simplified

Easily build applications to be used by a global audience in various language and culture settings.

Stay current

With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.

Control List

Grids

Data Grid	Source	Live demo	Documentation
Pivot Table	Source	Live demo	Documentation
Spreadsheet	Source	Live demo	Documentation
Tree Grid	Source	Live demo	Documentation

Editors

In-place Editor	Source	Live demo	Documentation
Rich Text Editor	Source	Live demo	Documentation
Word Processor	Source	Live demo	Documentation

Dropdowns

AutoComplete	Source	Live demo	Documentation
ComboBox	Source	Live demo	Documentation
Dropdown List	Source	Live demo	Documentation
Dropdown Tree	Source	Live demo	Documentation
List Box	Source	Live demo	Documentation
MultiSelect Dropdown	Source	Live demo	Documentation

Inputs

Checkbox	Source	Live demo	Documentation
Radio Button	Source	Live demo	Documentation
Toggle Switch Button	Source	Live demo	Documentation
Color Picker	Source	Live demo	Documentation
File Upload	Source	Live demo	Documentation
Input Mask	Source	Live demo	Documentation
Numeric Textbox	Source	Live demo	Documentation
Range Slider	Source	Live demo	Documentation
TextBox	Source	Live demo	Documentation
Signature	Source	Live demo	Documentation

Data Visualization

Barcode Generator	Source	Live demo	Documentation
Circular Gauge	Source	Live demo	Documentation
Diagram	Source	Live demo	Documentation
HeatMap Chart	Source	Live demo	Documentation
Kanban	Source	Live demo	Documentation
Linear Gauge	Source	Live demo	Documentation
Maps	Source	Live demo	Documentation
TreeMap	Source	Live demo	Documentation
Bullet Chart	Source	Live demo	Documentation
Charts	Source	Live demo	Documentation
Range Selector	Source	Live demo	Documentation
Smith Chart	Source	Live demo	Documentation
Sparkline Charts	Source	Live demo	Documentation
Stock Chart	Source	Live demo	Documentation

Calendars

Calendar	Source	Live demo	Documentation
DatePicker	Source	Live demo	Documentation
DateRangePicker	Source	Live demo	Documentation
DateTime Picker	Source	Live demo	Documentation
TimePicker	Source	Live demo	Documentation
Gantt Chart	Source	Live demo	Documentation
Scheduler	Source	Live demo	Documentation

Navigation

Accordion	Source	Live demo	Documentation
Breadcrumb	Source	Live demo	Documentation
Carousel	Source	Live demo	Documentation
Context Menu	Source	Live demo	Documentation
Menu Bar	Source	Live demo	Documentation
Sidebar	Source	Live demo	Documentation
Tabs	Source	Live demo	Documentation
Toolbar	Source	Live demo	Documentation
TreeView	Source	Live demo	Documentation
File Manager	Source	Live demo	Documentation

Buttons

Button	Source	Live demo	Documentation
Chips	Source	Live demo	Documentation
Button Group	Source	Live demo	Documentation
Dropdown Menu	Source	Live demo	Documentation
Progress Button	Source	Live demo	Documentation
Split Button	Source	Live demo	Documentation

Layout

Avatar	Styles	Live demo	Documentation
Card	Styles	Live demo	Documentation
Dashboard Layout	Source	Live demo	Documentation
Splitter	Source	Live demo	Documentation
Dialog	Source	Live demo	Documentation
Tooltip	Source	Live demo	Documentation
ListView	Source	Live demo	Documentation

Notification

Badge	Styles	Live demo	Documentation
Toast	Source	Live demo	Documentation
Progress Bar	Source	Live demo	Documentation

Forms

Query Builder UI

code coverage of @syncfusion/ej2-vue-querybuilder

Source

Live demo

Documentation

Viewer

PDF Viewer

Source

Live demo

Documentation

Supported Frameworks

The Essential JS 2 is also offered in following list of frameworks.

Showcase Applications

IT Asset Management

Support

Product support is available for through following mediums.

Creating incident in Syncfusion Direct-trac support system or Community forum.
New GitHub issue.
Ask your query in Stack Overflow with tag syncfusion and ej2.

License

Check the license detail here.

Changelog

ej2-vue-ui-components's People

Contributors

Stargazers

Watchers

Forkers

saranya13 ivanmoto254 jayaprakashkamaraj pradeepkumarbose productinfo lossoh jorgerpo myrp-alexandre nmgwr kmuthukumar23 uongyutthy matyhaty quanzero1992 johnzhaoxiaohu eddienko lisir cyaiox liudonghua123 ahmedalmaghz aravinth113 spiminov mysky528 juan11-code oritec massimiliano76 guozhqi jemmy prokolpo kumaresan-subramani alaaaeid tryweirder wwwk 0xmilk kayjay89 chantouchsek russen24 osias-miranda rafalurbanski xpbb goodrammers onasusweb dhz6110 simon-gd sujaykundu777 gowri-v-l suriyakumar2402 bottlehs carlosjordandev lewishireserve dito97 rencoo dennybiasiolli 15036027162 holine m8sa omerhochman wiijoy mydeensn purplewish07 meidikawardana anbuarjun

ej2-vue-ui-components's Issues

Vue peer dependency version update

Please update the peer dependency of
https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/package.json#L27

to include 2.6.x.

It's not causing problems except for :

Which is annoying.

VueJS TreeView Error why 'fields' returned from a function

This is the component code:

<template>
  <el-dialog :visible="showDialog" append-to-body :show-close="false" :custom-class="getCustomClass()" width="85%"
             top="10vh">
    <div class="content-container">
      <div class="group-container">
        <div class="label">{{lblCategoryGroup}}</div>
        <ejs-treeview id='category-group-treeview' :fields="getFieldConfig()" @nodeClicked="emitNodeClicked"/>
      </div>
      <div class="item-container">
        <div class="label">{{lblAssetList}}</div>
        <ejs-grid :allowPaging="true"/>
      </div>
    </div>
    <template v-slot:title>
      <h5 class="el-dialog__title">{{title}}</h5>
    </template>
    <template v-slot:footer>
      <el-button @click="emitCloseClicked" icon="fa fa-times fa-fw">{{closeText}}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import Dialog from '../Dialog/Dialog';
  import {TreeViewComponent, TreeViewPlugin} from '@syncfusion/ej2-vue-navigations';
  import {GridPlugin, Page} from '@syncfusion/ej2-vue-grids';

  Vue.use(GridPlugin);
  const components = {};
  components[TreeViewPlugin.name] = TreeViewComponent;

  export default {
    name: 'CategorySelectDialog',
    extends: Dialog,
    components,
    provide: {
      grid: [Page]
    },
    props: {
      groups: {
        type: Array,
        default: () => []
      },
      lblAssetList: {
        type: String,
        default: 'Asset List'
      },
      lblCategoryGroup: {
        type: String,
        default: 'Category Groups'
      },
      treeStructure: {
        type: Object,
        default: () => {
        }
      },
      listStructure: {
        type: Object,
        default: () => {
        }
      }
    },
    methods: {
      getFieldConfig() {
        const {groups} = this;
        return {dataSource: groups, ...this.treeStructure};
      },
      emitNodeClicked({node: {dataset: {uid}}}) {
        this.$emit('category-clicked', uid);
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "../../../../../node_modules/@syncfusion/ej2-base/styles/bootstrap4.css";
  @import "../../../../../node_modules/@syncfusion/ej2-vue-navigations/styles/bootstrap4.css";
  @import "../../../../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap4.css";
  @import "../../../../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap4.css";
  @import "../../../sass/variables";

  /deep/ {
    .label {
      margin-bottom: 5px;
      display: block;
      text-align: left;
    }

    .content-container {
      flex-flow: row nowrap;

      .group-container {
        flex: 0 0 30%;

        #category-group-treeview {
          border: 1px solid $beetrack-border-color;
          background-color: $beetrack-white;
          height: 55vh;
          overflow: auto;
        }
      }

      .item-container {
        padding: 10px;
        flex: 1 1 100%;
      }
    }
  }
</style>

Why do I get the following error in the console?

Treegrid not upating

I have real trouble updating the TreeGrid data.

In the codesandbox example (https://codesandbox.io/s/affectionate-bohr-xoj8f?file=/src/App.vue) , I've added a button to modify some data in the grid.

The first time it works, and the second time nothing happens any more. It's just a simple example to illustrate the problem.

I tried refresh and $forceUpdate, but with not success.

Should I modify the datasource in the different way ?

ps: this has also been publish to support:
https://www.syncfusion.com/support/directtrac/incidents/273748

Cannot see the black arrow to drop down subtasks next to ID

I'm not sure if it's a specific option or it should work by default, but I cannot see those little black triangles to make a drop down of subtasks. Maybe someone had a similar issue?

Vue TreeGrid checkbox selection does not work after datasource refresh

Hi,

I would like to report a Vue TreeGrid bug. You can find a working repro at codesandbox.

When you select some rows and refresh dataset as described in your documentation for grid (not a standard way how to refresh vue components, generally reactivity should take care of automatic refresh), the "select all" checkbox at the treegrid header changes behaviour and does not work anymore (component somehow remembers selected rows, when you try to select again remaining rows, checkbox changes status to selected).

Is there some workaround how to reset internal component selection?

Thank you,
Libor Pansky

This dependency was not found

This dependency was not found:

* vue in ./node_modules/@syncfusion/ej2-vue-base/src/component-base.js, ./node_modules/@syncfusion/ej2-vue-base/src/template.js and 635 others

"vue": "^3.0.1"

Exporting native svg issue in Diagram

Hello Syncfusion Team,

I am using Vue Diagram and want to export or print diagram where there are native svg nodes. When I export it in either formats (svg,png etc) it does not export nodes, other basic components (such as connectors exports truely) like in the screenshots below

I think exportImage method may resolve it but I can not use it like the code below because it throws error.

PrintDiagram() {

    let options = {};

    options.mode = 'Data';

    options.format = 'PNG';

    console.log(diagramInstance.exportImage(options));

  }

Can you help me how to export image of diagram with native svg nodes?

Thank you,

Best Regards
Erhan Saydam

Chinese

How to Replace Default Text with Chinese？or support i18n?

Question. How to style non working hours in vue gantt chart

Is it possible to style non working hours using CSS, for example if I have working hours from 9 to 18, is it possible to style non working hours range?

Tool tip customization in Gantt chart

Could you please assist to hide 'progress' field in tool tip? Also is there any ways to set weekends in the gantt chart .

I can't filter Palette Symbols at runtime in Vue Diagram

Hi Syncfusion Team.

I would like to filter palette symbols via user input. I tried many ways but couldn't succeed.

I used a computed array which returns filtered symbols to give the palette as input but didn't recognize.

Then, I used a watcher for user input and filtered the symbols array. Then I have invoked dataBind() of palette instance, it didn't worked neither.

How can I perform it to filter symbols by user input.

Thank you,
Best Regards.

Column template not destroyed

template component for grid column not destroyed correctly. After grid refresh/destroyed
In template component not triggered "destroyed" hook

Diagram height and width wont be passed down to diagram_backgroundLayer_svg

Heyho.

I was updating "@syncfusion/ej2-vue-diagrams" from "17.3.29" to "17.4.44" and it appears to create some issues with heights passed down to diagram_backgroundLayer_svg.

Basically it renders with a fixed height on 'diagram_backgroundLayer_svg' with 400 something px even tho the parent as well as the diagram are almost double in size. That results in a diagram with a white cover under which nodes disappear when dragging them onto that.
I fixed it by reading the parent size and put :height="parentHeight" which works, but I think the old '100%' option was simpler.

The blue is the resulting 'ejs-diagram' dom element. The part where its cutting of is where 'diagram_backgroundLayer_svg' boundary ends.

Vue Js Syncfusion Gantt chart filter not working

The filter not working. Please check the below code

ej2-vue-gantt on npm has not been updated

Please update ej2-vue-gantt on npm to v17.1.44.
Thank you

Overview doesn't work if the diagram nodes shape is native

I have a diagram for which we want to add an overview.

It crashes in two different places if if the diagram nodes shape is native while working if the shape is set as Flow.

The first place is if I try to pan

overview.js?7c77:530 Uncaught TypeError: Cannot read property 'getBBox' of null
    at Overview.translateOverviewRectangle (overview.js?7c77:530)
    at Overview.mouseMove (overview.js?7c77:703)

The second place is if I try to draw a new zone on the overview

overview.js?7c77:854 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Overview.initHelper (overview.js?7c77:854)
    at Overview.mouseMove (overview.js?7c77:686)

In this case, the code crashes because this line

var g = this.element.getElementsByTagName('svg')[2];

matches a SVG node of the diagram within the overview and not one of the overview.

Globalization error in DateRangePicker Component (TypeError: Cannot convert undefined or null to object)

Hello,

I would like to use Turkish set for the DateRangePicker Component. I followed the instructions written on the documentation https://ej2.syncfusion.com/vue/documentation/daterangepicker/globalization/
However I got the error:

Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at DateRangePicker.CalendarBase.getCultureValues (calendar.js?2f9d:278)

/*calendar.js?2f9d:278*/
for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
           var obj = _a[_i];
           culShortNames.push(getValue(obj, cldrObj));
       }

My code is as follows:

<template>
...<ejs-daterangepicker id="daterangepicker"  locale="tr" 
             :min="minTarih"></ejs-daterangepicker>...
</template>
<script>
  import "@syncfusion/ej2-vue-calendars/styles/bootstrap4.css";
  import "@syncfusion/ej2-vue-calendars/styles/daterangepicker/bootstrap4.css";
  import "@syncfusion/ej2-vue-inputs/styles/bootstrap4.css";
  import "@syncfusion/ej2-vue-inputs/styles/input/bootstrap4.css";
  import Vue from 'vue';
  import {DateRangePickerPlugin} from '@syncfusion/ej2-vue-calendars';
  import {loadCldr, L10n} from '@syncfusion/ej2-base';
  import numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
  import gregorian from 'cldr-data/main/tr/ca-gregorian.json';
  import numbers from 'cldr-data/main/tr/numbers.json';
  import timeZoneNames from 'cldr-data/main/tr/timeZoneNames.json';
  import weekData from 'cldr-data/supplemental/weekData.json';

Vue.use(DateRangePickerPlugin);
loadCldr( numberingSystems, gregorian, numbers, timeZoneNames, weekData);

L10n.load({
tr: {
        daterangepicker: {
           placeholder: 'Tarih araligi seciniz',
        }
    }
});

export default {
 data() {
      return {
        minTarih: new Date(),
      }
    }
}
</script>

I have read the forum thread at https://www.syncfusion.com/forums/146524/datetimepicker-globalization-example-not-working-typeerror but it did not help me.

Could there be a missing point in the documentation or can you help me to fix this problem.

Best regards,
Erhan Saydam

Vue 3 support

Can't use ejs-documenteditor with :value or v-model in Vue.js

Hi, i'm trying to control the Document Editor text value with the :value and v-model properties, but it's binding is not working. How can i get this value properly?

Slowness in DateRangepicker while Chrome Dev Tools Open

Hello Syncfusion Team

As the title summarize, there is a slow run problem in Vue-Calendar component. When using Daterangepicker, it takes at least 1 second to open calendar as well as picking dates, exclusively when Chrome DevTools is open. The browser also tends to freeze. Might it be caused by a case when Devtools is open?

The case occurs in demo page as well.
https://ej2.syncfusion.com/vue/demos/#/bootstrap4/daterangepicker/default.html

I would be happier if you analyze this problem. It does not occur if devtools is closed.

Best regards,
Erhan Saydam

Unknown Component in Production

When I run in dev environment ( i.e npm run dev), components are mounted perfectly. But if I run production script (i.e npm run production), components are shown blank and in Vue devtools, it shows (I guess that means unknown component.

I am using Laravel + vue (with webpack). Nothing different. Basic config. Other vue components work perfectly. Only Syncfusion components have issues

I am importing components in app.js

QueryBuild can not addGroups

I copy the demo code from doc (query-builder/getting-started)
but i can not see the addGroup btn in my page ,so i try bind the method to my custom btns click envent, the method throws
exception also ,this is my demo

my local compent version is :18.1.56
thank for help

Gantt chart vue js auto height issue

Could you please help how I can set the height of Gantt chart in Vue js as per the row height

To change the duration text to Arabic

How can I change the duration text("Days) in Gantt chart to Arabic

Initialize the Toolbar using HTML elements with Popup mode - how to close popup?

Hi!
Thanks for awesome components.
I use Toolbar with my own HTML elements with Popup mode.

All works fine, except the fact that I don't know how to manually close popup?
In my case I need to handle on click on each action-button in my toolbar, and in if is button inside popup, after click I want to close popup.
In docs i'm not found any method to close popup if is open.
Thanks!

No LineSeries for Vue Chart

I imported the chart and line seri:

import {ChartPlugin, LineSeries, Category} from '@syncfusion/ej2-vue-charts';

However, I cannot see LineSeries export in the package.

export * from '@syncfusion/ej2-charts'; export { TrendlinesDirective, TrendlineDirective, TrendlinesPlugin, TrendlinePlugin } from './chart/trendlines.directive'; export { SegmentsDirective, SegmentDirective, SegmentsPlugin, SegmentPlugin } from './chart/segments.directive'; export { SeriesCollectionDirective, SeriesDirective, SeriesCollectionPlugin, SeriesPlugin } from './chart/series.directive'; export { StripLinesDirective, StripLineDirective, StripLinesPlugin, StripLinePlugin } from './chart/striplines.directive'; export { CategoriesDirective, CategoryDirective, CategoriesPlugin, CategoryPlugin } from './chart/categories.directive'; export { MultiLevelLabelsDirective, MultiLevelLabelDirective, MultiLevelLabelsPlugin, MultiLevelLabelPlugin } from './chart/multilevellabels.directive'; export { AxesDirective, AxisDirective, AxesPlugin, AxisPlugin } from './chart/axes.directive'; export { RowsDirective, RowDirective, RowsPlugin, RowPlugin } from './chart/rows.directive'; export { ColumnsDirective, ColumnDirective, ColumnsPlugin, ColumnPlugin } from './chart/columns.directive'; export { AnnotationsDirective, AnnotationDirective, AnnotationsPlugin, AnnotationPlugin } from './chart/annotations.directive'; export { SelectedDataIndexesDirective, SelectedDataIndexDirective, SelectedDataIndexesPlugin, SelectedDataIndexPlugin } from './chart/selecteddataindexes.directive'; export { IndicatorsDirective, IndicatorDirective, IndicatorsPlugin, IndicatorPlugin } from './chart/indicators.directive'; export { ChartComponent, ChartPlugin } from './chart/chart.component'; export { AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationSeriesCollectionPlugin, AccumulationSeriesPlugin } from './accumulation-chart/series.directive'; export { AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationAnnotationsPlugin, AccumulationAnnotationPlugin } from './accumulation-chart/annotations.directive'; export { AccumulationChartComponent, AccumulationChartPlugin } from './accumulation-chart/accumulationchart.component'; export { RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionPlugin, RangenavigatorSeriesPlugin } from './range-navigator/series.directive'; export { RangeNavigatorComponent, RangeNavigatorPlugin } from './range-navigator/rangenavigator.component'; export { RangeBandSettingsDirective, RangeBandSettingDirective, RangeBandSettingsPlugin, RangeBandSettingPlugin } from './sparkline/rangebandsettings.directive'; export { SparklineComponent, SparklinePlugin } from './sparkline/sparkline.component'; export { SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, SmithchartSeriesCollectionPlugin, SmithchartSeriesPlugin } from './smithchart/series.directive'; export { SmithchartComponent, SmithchartPlugin } from './smithchart/smithchart.component'; export { StockChartTrendlinesDirective, StockChartTrendlineDirective, StockChartTrendlinesPlugin, StockChartTrendlinePlugin } from './stock-chart/trendlines.directive'; export { StockChartSeriesCollectionDirective, StockChartSeriesDirective, StockChartSeriesCollectionPlugin, StockChartSeriesPlugin } from './stock-chart/series.directive'; export { StockChartStripLinesDirective, StockChartStripLineDirective, StockChartStripLinesPlugin, StockChartStripLinePlugin } from './stock-chart/striplines.directive'; export { StockChartAxesDirective, StockChartAxisDirective, StockChartAxesPlugin, StockChartAxisPlugin } from './stock-chart/axes.directive'; export { StockChartRowsDirective, StockChartRowDirective, StockChartRowsPlugin, StockChartRowPlugin } from './stock-chart/rows.directive'; export { StockChartAnnotationsDirective, StockChartAnnotationDirective, StockChartAnnotationsPlugin, StockChartAnnotationPlugin } from './stock-chart/annotations.directive'; export { StockChartSelectedDataIndexesDirective, StockChartSelectedDataIndexDirective, StockChartSelectedDataIndexesPlugin, StockChartSelectedDataIndexPlugin } from './stock-chart/selecteddataindexes.directive'; export { StockChartPeriodsDirective, StockChartPeriodDirective, StockChartPeriodsPlugin, StockChartPeriodPlugin } from './stock-chart/periods.directive'; export { StockEventsDirective, StockEventDirective, StockEventsPlugin, StockEventPlugin } from './stock-chart/stockevents.directive'; export { StockChartIndicatorsDirective, StockChartIndicatorDirective, StockChartIndicatorsPlugin, StockChartIndicatorPlugin } from './stock-chart/indicators.directive'; export { StockChartComponent, StockChartPlugin } from './stock-chart/stockchart.component'; export { BulletRangeCollectionDirective, BulletRangeDirective, BulletRangeCollectionPlugin, BulletRangePlugin } from './bullet-chart/ranges.directive'; export { BulletChartComponent, BulletChartPlugin } from './bullet-chart/bulletchart.component';

Syncfusion Blob type not working while edit same page again.

I am using Syncfusion rich editor but while I am trying to create saveFormat: blob then first time it's working fine but while saving and again try to edit then I am getting blob broken image.

I am using following like for reference https://ej2.syncfusion.com/vue/demos/?_ga=2.102277384.882028093.1595149869-1068313756.1593940705#/material/rich-text-editor/image.html
this is woking first time fine but edit time it's not working at all. I am not getting what exactly I am missing into this, Please suggest me.

Thank You

Locale image insert popup

How to change this popup language change?

Nodes' annotations is doubled when diagram loaded from serialized JSON

I am saving the diagram to a json string as explained in https://ej2.syncfusion.com/vue/documentation/diagram/serialization. However when I load data, Although all the nodes expose at their places correctly, the annotaion text is doubled up.

When I inspect the diagram nodes (by console log diagramIstance) I observe there is ony one item in the node.annotations property and its content contains ony one text. There is no reason for it to be twice.

I have attached a sample of this situation. As you may see in the last image, there is only one item in the annotations Array.

Thank you for your help.

Best regards.

Form Validation Link is broken in Vue Inplace Editor

URL: https://ej2.syncfusion.com/vue/documentation/inplace-editor/validation/

At the end of the page, the link for section in this particular text in broken.

For more details about validation configuration, refer this documentation section.

Right now it is pointing to https://ej2.syncfusion.com/vue/documentation/api/form-validator/

Accumulation chart doesn't properly update on data change

Using an accumulation chart and passing the data via the dataSource property to e-accumulation-series does not properly update the chart when the data changes. It seems like one of the things that is happening is that if there are multiple points in the series then only the points present in the new series will get updated. i.e. if the original data had a point {x: 'foo', y: 24} and the point is removed from the series it will sometimes stay in the chart.

Diagram scrolling using MacBook Pro trackpad

Hi,

Scrolling in diagram using the MacBook trackpad is buggy, especially horizontally.

See the video around timecode 00:00:03-00:00:06 : I try to go the the left but can't reach the most left side.

There's no problem usign the scrollbars with the mouse cursor

cms-zm-2019-09-10-scroll.mov.zip

does sj2 file manager support upload folder?

Organization chart

Hi,
Colud you please help me to set the width of the connector lines in Orgnaization chart .I want to reduce

Method "load" is not defined on the instance but referenced during render?

Configuration:
System: Windows 10
Technology: Vuejs
Node Version: v10.14.1
Npm version: 6.4.1
Description:
Hello, I am using @syncfusion/ej2-vue-maps package to integrate below map in my vuejs project.

I have added following lines of code in main.js file:

import { MapsPlugin, Marker, MapsTooltip, MapAjax } from '@syncfusion/ej2-vue-maps';
Vue.use(MapsPlugin);

After adding above line of code. I created an new file where I added the code to display maps with marker. Here is my Maps.vue file

<template>
  <div>
     <ejs-maps id='container' :load='load' :titleSettings='titleSettings' :zoomSettings='zoomSettings' :useGroupingSeparator='useGroupingSeparator' format='n'>
       <e-layers>
         <e-layer :shapeData='shapeData' :dataSource='dataSource' :shapeSettings='shapeSettings' :markerSettings='markerSettings'></e-layer>
        </e-layers>
      </ejs-maps>
 </div>
</template>

<script>
import { Marker, MapsTooltip, MapAjax } from '@syncfusion/ej2-vue-maps';
import { topPopulation } from './map-data/marker-location.js';
import Template from './marker-temp.vue';

export default {
   data(){
      return{
         useGroupingSeparator: true, 
         zoomSettings: {
            enable: false
         },
         titleSettings: {
            text: 'Top 25 populated cities in the world',
            textStyle: {
               size: '16px'
            }
         },
         shapeData: new MapAjax('./map-data/world-map.js'),
         dataSource: topPopulation,
         shapeSettings: {
            fill: '#C3E6ED'
         },
         markerSettings: [
            {
               dataSource: topPopulation,
               visible: true,
               animationDuration: 0,
               shape: 'Circle',
               fill: 'white',
               width: 3,
               border: { width: 2, color: '#285255' },
               tooltipSettings: {
                  template: function () { return {template: Template}; },
                  visible: true,
                  valuePath: 'population',
               }
            }
         ]
      }
   },
   provide: {
      maps: [Marker, MapsTooltip]
   }
}
</script>

On running the project I got below error:
Property or method "load" is not defined on the instance but referenced during render.
What value we are getting in load ? Load is not defined in data also, So from where we are getting the load value? Also I have't found any file "marker-temp.vue" due to which it shows missing file error. Where is it? Please help.

Can I only use this software in Linux environment

Can I only use this software in Linux environment? I can use NPM but I don't know if lisence has any effect

Templated treeview aint reactiv

I am using the treeview with a template (Screenshot)

Apparantly, i doesn't seem to be reactive.
I tried to refresh single nodes manually without success using the refreshNode api.
I managed to update a node by using updateNode(id, newText) as a workaroung but it requires the newText to be really new (i don't want to change the name, i want to change a different property i rendered in my template)

Any ideas?
Can i force re-render single nodes?

Gantt chart Print

Please help need for Printing Gantt chart

STOP ADVERTISING ON VISUAL STUDIO

You are corrupt. You are exploiting the search system in the Visual Studio Extensions and Updates window to advertise these crap products.

Searching for "react", for example, in Visual Studio, gives you 3 pages full of these garbage, polluting the results on purpose.

if we develop an applicaiton in commerical, and sold applicaiton to our client

if we develop an applicaiton in commerical, and sold applicaiton to our client to use with syncfusion components, what is the license price package we could have ?

Box and whiskers chart from pre-calculated data

Is it possible to render a BoxAndWhiskers chart from pre-calculated data? i.e. the final values of median, mean and other quantiles.

Use case: Imagine showing a box plot of revenue of various departments across all time - this might be thousands of orders and it would be unnecessary to send all that data to the client browser and do the calculations client-side when it can be done server-side.

Imagining providing the chart data in the following format instead of a series of thousands of numbers might illustrate better what I'm looking for:

{
    quantiles: [20, 35, 50, 66, 102],
    mean: 72,
    outliers: [220, 2]
}

How to export pdf to support Chinese fonts, or to replace other fonts?

How to export pdf to support Chinese fonts, or to replace other fonts? @

File manager: entering a folder by clicking on navigation pane don't callback FileOpenEvent

I want to get the current path dynamically through FileOpenEvent.

rangeLength in Form Validation doesn't work for minimum Length in InPlace Editor

When we add rangeLength of say for example rangeLength : [1,5] then it allows empty editor

Typescript 3.7 error

When upgrading to TS 3.7 I get the following error during my build:

333 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list-model.d.ts
334 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list-model.d.ts(1,1024):
335 1:1024 Import declaration conflicts with local declaration of 'DropDownListModel'.
336   > 1 | import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, prepend, detach, classList, isBlazor } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, ResultData, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DropDownListModel } from '../drop-down-list';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';
337       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ^
338     2 | import {ChangeEventArgs} from "./drop-down-list";
339     3 | import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
340     4 | 
341 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-dropdowns/src/multi-select/multi-select-model.d.ts
342 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-dropdowns/src/multi-select/multi-select-model.d.ts(1,810):
343 1:810 Import declaration conflicts with local declaration of 'MultiSelectModel'.
344   > 1 | import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { ResultData, FocusEventArgs, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { attributes, setValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, isBlazor } from '@syncfusion/ej2-base';import { MultiSelectModel } from '../multi-select';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { CheckBoxSelection } from './checkbox-selection';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur } from './float-label';import { IMulitSelect } from './interface';
345       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ^
346     2 | import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
347     3 | import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
348     4 | 
349 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-grids/src/grid/base/interface.d.ts
350 ERROR in /usr/src/client/node_modules/@syncfusion/ej2-grids/src/grid/base/interface.d.ts(1,71):
351 1:71 Import declaration conflicts with local declaration of 'KeyboardEventArgs'.
352   > 1 | import { Component, NumberFormatOptions, DateFormatOptions, EmitType, KeyboardEventArgs, L10n } from '@syncfusion/ej2-base';
353       |                                                                       ^
354     2 | import { Query, DataManager, Group } from '@syncfusion/ej2-data';
355     3 | import { ItemModel, MenuItemModel, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
356     4 | import { ButtonModel, CheckBoxModel, SwitchModel } from '@syncfusion/ej2-buttons';

{
  "dependencies": {
        "@syncfusion/ej2-vue-pivotview": "17.3.29",
  }
}

Changelog URL invalid

The changelog url in readme.md refers to https://ej2.syncfusion.com/vue/documentation/release-notes?utm_source=npm&utm_campaign=ej2-vue-ui-components, but the page seems to be not working anymore.

Where can we find the current changelog?

Diagram gives "Cannot read property 'getSymbolSize' of undefined" error after npm update

I have updated npm packages from these
"@syncfusion/ej2-vue-buttons": "^18.2.58",
"@syncfusion/ej2-vue-diagrams": "^18.2.59",
"@syncfusion/ej2-vue-lists": "^18.2.59",

to these
"@syncfusion/ej2-vue-buttons": "^18.3.40",
"@syncfusion/ej2-vue-diagrams": "^18.3.42",
"@syncfusion/ej2-vue-lists": "^18.3.35",

After this update, when I drag a symbol from palette to Diagram area, it throws the error:
Cannot read property 'getSymbolSize' of undefined
at getPreviewSize (diagram-util.js?1ce4:2229)

My code is too big to paste here, I am bringing some of them here. But if needed I can paste the other parts.

Was there a change about the symbol size or else?

Thank you,
Best regards.

...
<div id="networkDiagram" style="width: 100%; height: 600px">
  <div id="palette-space" class="sb-mobile-palette">
    <ejs-symbolpalette ref="paletteObj" id="symbolpalette" :palettes='palettes' :width='paletteWidth'
        :key="increment" :height='paletteHeight' :getNodeDefaults='palettegetNodeDefaults'
        :getSymbolInfo='getSymbolInfo' :symbolWidth='symbolWidth'
        :symbolHeight='symbolHeight'></ejs-symbolpalette>
  </div>
  <div id="diagram-space" class="sb-mobile-diagram">
    <ejs-diagram style='display:block' ref="diagramObj" id="diagram2" :width='width' :height='height'
        :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' :snapSettings='snapSettings'
       serializationSettings="{preventDefaults: true}"
        :doubleClick="openAddInfo"></ejs-diagram>
  </div>
</div>
...

palettegetNodeDefaults(symbol) {
      symbol.width = 52;
      symbol.height = 52;
      (symbol.shape).scale = "Stretch";
   },
getNodeDefaults: (node) => {
        node.constraints = NodeConstraints.Default & ~NodeConstraints.Rotate & ~NodeConstraints.Resize;
        return node;
      },
collectionChanged: (args) => {
        this.collectionChangeEvent(args);
      },

No LineSeries for Vue Chart

Assets

Audit

Requests

Works

Audit charts

Request charts

Work charts

Video tag upload

I tried to use a video tag.
If I enter HTML directly to add video tags, there is a problem with that area is not selected when editor mode not HTML mode.
How can I using video tag on the editor?

How to reduce bundle size for gantt

After 'npm run dev' gantt is around 34MiB! How to reduce the bundle size by disabling components that I don't need?

I was trying to use webpack to ignore some packages, but I won't work because whatever I ignore with webpack gantt won't be rendered and it throws me an error.

This is an example of webpack ignore:
new webpack.IgnorePlugin(/@syncfusion/ej2-calendars/)

Maybe someone had the similar issue.