This is my Main view page on which i am displaying kendo grid to show list of category:
<script>
$(document).ready(function () {
$("#categories-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("categoriesList", "Admin"))",
type: "POST",
dataType: "json",
data: '',
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 9,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 20, 30]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns: [
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
},
{
field: "CategoryName",
title: "CategoryName",
width: 10
},
{
field: "CategoryId",
title: "Action",
width: 10,
//template: '<a class="delete" href="#"><span class="k-icon k-delete"></span></a>'
template: '<span class="k-icon k-delete"></span>'
}]
});
});
</script>
#Html.Partial("DeleteParentCategory")
this script display list of all categories in kendo grid.in kendo grid i am having one edit button and delete button.
on delete button i want to ask for confirmation to user to delete categories.
below is my delete link :
template: '<span class="k-icon k-delete"></span>'
now i want to call these partial view on above delete action link:
this is my Admin controller action:
[HttpGet]
public PartialViewResult DeleteParentCategory()
{
return PartialView("DeleteParentCategory");
}
in this partial view i am just having my modal pop up html code css and js references.
now what is happening is when my main view is displayed then this modal pop up message is also displayed and when i click on delete action link then that pop up opens but my main view doesnt display.my main view that is grid is lost on delete action link.
can anybody tell me how to display only partial view on click of delete action link with my grid display???
i am very much new in mvc.so guys can u please help me???????????
this is my Delete partial view(Modal Pop up Box Design):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href=" http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
#*<link rel="stylesheet" href="/resources/demos/style.css">*#
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
your main view goes like this
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#categories-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("categoriesList", "Admin"))",
type: "POST",
dataType: "json",
data: '',
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 9,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 20, 30]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns: [
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
},
{
field: "CategoryName",
title: "CategoryName",
width: 10
},
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a class="delete" onClick="myFunction(); return false;" href=""><span class="k-icon k-delete"></span></a>'
}]
});
});
function myFunction() {
$("#dialog-confirm").dialog({
resizable: false,
height: 190,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
</script>
#Html.Partial("DeleteParentCategory")
and DeleteParentCategory partial view goes like this
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Related
I have a <b-modal> from VueBootstrap, inside of which I'm trying to render a <GmapMap> (https://www.npmjs.com/package/gmap-vue)
It's rendering a grey box inside the modal, but outside the modal it renders the map just fine.
All the searching I've done leads to the same solution which I'm finding in some places is google.maps.event.trigger(map, 'resize') which is not working. Apparently, it's no longer part of the API [Source: https://stackoverflow.com/questions/13059034/how-to-use-google-maps-event-triggermap-resize]
<template>
<div class="text-center">
<h1>{{ title }}</h1>
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<GmapMap
ref="topMapRef"
class="gmap"
:center="{ lat: 42, lng: 42 }"
:zoom="7"
map-type-id="terrain"
/>
<b-table
bordered
dark
fixed
hover
show-empty
striped
:busy.sync="isBusy"
:items="items"
:fields="fields"
>
<template v-slot:cell(actions)="row">
<b-button
size="sm"
#click="info(row.item, row.index, $event.target)"
>
Map
</b-button>
</template>
</b-table>
<b-modal
:id="mapModal.id"
:title="mapModal.title"
#hide="resetInfoModal"
ok-only
>
<GmapMap
ref="modalMapRef"
class="gmap"
:center="{ lat: 42, lng: 42 }"
:zoom="7"
map-type-id="terrain"
/>
</b-modal>
</div>
</div>
</div>
</template>
<script>
// import axios from "axios";
import { gmapApi } from 'gmap-vue';
export default {
name: "RenderList",
props: {
title: String,
},
computed: {
google() {
return gmapApi();
},
},
updated() {
console.log(this.$refs.modalMapRef);
console.log(window.google.maps);
this.$refs.modalMapRef.$mapPromise.then((map) => {
map.setCenter(new window.google.maps.LatLng(54, -2));
map.setZoom(2);
window.google.maps.event.trigger(map, 'resize');
})
},
data: function () {
return {
items: [
{ id: 1, lat: 42, long: 42 },
{ id: 2, lat: 42, long: 42 },
{ id: 3, lat: 42, long: 42 },
],
isBusy: false,
fields: [
{
key: "id",
sortable: true,
class: "text-left",
},
{
key: "text",
sortable: true,
class: "text-left",
},
"lat",
"long",
{
key: "actions",
label: "Actions"
}
],
mapModal: {
id: "map-modal",
title: "",
item: ""
}
}
},
methods: {
// dataProvider() {
// this.isBusy = true;
// let promise = axios.get(process.env.VUE_APP_LIST_DATA_SERVICE);
// return promise.then((response) => {
// this.isBusy = false
// return response.data;
// }).catch(error => {
// this.isBusy = false;
// console.log(error);
// return [];
// })
// },
info(item, index, button) {
this.mapModal.title = `Label: ${item.id}`;
this.mapModal.item = item;
this.$root.$emit("bv::show::modal", this.mapModal.id, button);
},
resetInfoModal() {
this.mapModal.title = "";
this.mapModal.content = "";
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin-bottom: 60px;
}
.gmap {
width: 100%;
height: 300px;
margin-bottom: 60px;
}
</style>
Does anyone know how to get the map to display properly in the modal?
Surely, I'm not the first to try this?
Had this problem, in my case it was solved by providing the following options to google maps:
mapOptions: {
center: { lat: 10.365365, lng: -66.96667 },
clickableIcons: false,
streetViewControl: false,
panControlOptions: false,
gestureHandling: 'cooperative',
mapTypeControl: false,
zoomControlOptions: {
style: 'SMALL'
},
zoom: 14
}
However you can probably make-do with just center and zoom.
Edit: Try using your own google maps components, follow this tutorial:
https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html#Base-Example
You can use the package described in the tutorial to load the map, dont be scared by the big red "deprecated" warning on the npm package page.
However for production, you should use the package referenced by the author, which is the one backed by google:
https://googlemaps.github.io/js-api-loader/index.html
The only big difference between the two:
The 'google' object is not returned by the non-deprecated loader, it is instead attached to the window. See my answer here for clarification:
'google' is not defined Using Google Maps JavaScript API Loader
Happy coding!
I'm using vue-good-table Vue's component but there's a problem with pagination. Basically, the first page always shows one record missing. I mean, if I set the 'perPage' option to 10, the first page shows 9 records, while all the others show 10 records. What could it be?
My code:
app.js
require('./bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
Vue.component("my-table", require("./components/MyTable.vue").default);
const app = new Vue({
el: '#app',
});
MyTable.vue
<template>
<div>
<vue-good-table
#on-selected-rows-change="selectionChanged"
#on-select-all="selectAll"
:columns="columns"
:rows="rows"
styleClass="vgt-table striped condensed"
:select-options="{
enabled: true,
selectOnCheckboxOnly: true,
selectionText: 'record selezionati',
clearSelectionText: 'Pulisci',
selectionInfoClass: '',
}"
:search-options="{
enabled: true,
placeholder: 'Cerca',
}"
:sort-options="{
enabled: true,
initialSortBy: {field: 'numero_verbale', type: 'asc'}
}"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 10,
position: 'top',
perPageDropdown: [5, 10, 20],
dropdownAllowAll: true,
nextLabel: 'Prossima',
prevLabel: 'Precedente',
rowsPerPageLabel: 'Record per pagina',
ofLabel: 'di',
allLabel: 'Tutti',
}"
>
<div slot="selected-row-actions">
<button class="mr-4">Action 1</button>
<button class="mr-4">Action 2</button>
<button >this.routeURL</button>
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'elimina'">
<button #click="deleteOrdinanza(props.row.id, props.index)" class="bg-grey-200 text-sm"> ELI</button>
</span>
<span v-if="props.column.field == 'dettaglio'">
<button #click="rowId(props.row.id, props.index)" class="bg-grey-200 text-sm"> DETTAGLIO</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
axios.defaults.baseURL = 'http://127.0.0.1:8000/api';
export default {
name: 'my-table',
props: {
ordinanze: String,
},
data(){
return {
columns: [
{
label: 'ID',
field: 'id',
type: 'number',
// hidden: true
},
{
label: 'N° Verbale',
field: 'numero_verbale',
type: 'number',
width: '130px'
},
{
label: 'Data Verbale',
field: 'data_verbale',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: 'Cognome',
field: 'cognome',
},
{
label: 'Nome',
field: 'nome',
},
{
label: 'Codice Fiscale',
field: 'codice_fiscale',
},
{
label: 'Città',
field: 'citta',
},
{
label: 'Provincia',
field: 'provincia'
},
{
label: 'Data Notifica',
field: 'data_notifica',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: '',
field: 'elimina',
sortable: false,
},
{
label: '',
field: 'dettaglio',
sortable: false,
},
],
rows : JSON.parse(this.ordinanze) ,
};
},
methods: {
rowId(idParam) {
console.log(idParam);
},
deleteOrdinanza(id, index){
console.log(id);
console.log(index);
axios.delete('/ordinanze/' + id)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
});
this.rows.splice(index,1);
}
},
components: {
VueGoodTable,
},
};
</script>
vuegoodtable.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue comp test </title>
<script src="/js/app.js" defer></script>
</head>
<body>
{{-- table component--}}
{{-- $ordinanze is the array with all the table records--}}
<div id="app" class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-3">
<my-table :ordinanze='#json($ordinanze)'></my-table>
</div>
</body>
</html>
Thanks!
I'm wondering if you are using vue-good-table v2.19.2, because I've seen your problem with that version.
If so, you will not see this problem using 2.19.1 or 2.19.3 (that is the latest version currently).
Sorry for my bad english this isn't my main language, also sorry for the markup!!
Hi im trying to send data from my parent component to the child components. The idea behind this, is so that i can use a specifik color for every component. This color is declared in the parent component in the routers array. But the data sended to the component was from the previous one, so it sends to color which was previously stored in routerColor.
<template>
<div class="flex" id="app">
<quick-acces>
</quick-acces>
<nav>
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
</nav>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
routers: [
{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color){
this.routerColor = color
console.log(this.routerColor)
this.currentBorder = "3px solid" + color
},
I modified your code so I could make a snippet that runs.
I found that clicking the "orange" strip would update the color, but the border color did not show up until you clicked another color. I saw that you build the border color string without a space after "color", so when it built the string with "orange", it would be 3px solidorange, which does not work. Other colors were ok, because 3px solid#F9BE02 parses.
So I think your problem is just putting in a space after "color".
new Vue({
el: '#app',
data() {
return {
routers: [{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color) {
this.routerColor = color
// I added a space after "solid"
this.currentBorder = "3px solid " + color
}
},
components: {
routerLink: {
props: {
to: Object
},
template: '<div>X{{to.params.routerColor}}</div>'
},
routerView: {
template: '<div>V</div>'
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div class="flex" id="app">
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
I am very new to VueJS. I am trying to populate a table. One of the columns is a button on clicking which a modal opens. There can be 3 different types of modals. I tried solving the problem like this :
I have linked my jsfiddle after this reference code.
HTML
<div id="app">
<!-- Main table element -->
<b-table striped hover :items="items" :fields="fields" >
<template slot="name" slot-scope="item">
{{item.value.first}} {{item.value.last}}
</template>
<template slot="isActive" slot-scope="item">
{{item.value?'Yes :)':'No :('}}
</template>
<template slot="actions" slot-scope="item">
<div v-if="item.item.age < 15">
<b-btn v-b-modal.modal1 size="sm" #click="details(item.item)">Details</b-btn>
</div>
<div v-else-if="item.item.age > 26">
<b-btn v-b-modal.modal2 size="sm" #click="details(item.item)">Details</b-btn>
</div>
<div v-else>
<b-btn v-b-modal.modal3 size="sm" #click="details(item.item)">Details</b-btn>
</div>
</template>
</b-table>
<b-modal id="modal1">
modal 1
</b-modal>
<b-modal id="modal2">
modal 2
</b-modal>
<b-modal id="modal3">
modal3
</b-modal>
</div>
VueJS
new Vue({
el: '#app',
data: {
items: [{
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 9,
state: 'success',
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 89,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}, {
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 26,
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 22,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}],
fields: {
name: {
label: 'Person Full name',
sortable: true
},
age: {
label: 'Person age',
sortable: true
},
isActive: {
label: 'is Active'
},
actions: {
label: 'Actions'
}
}
},
methods: {
details(item) {
//gets some data. Write 3 different functions to fetch data accordingly
}
}
})
Style:
#app {
padding: 20px;
height: 500px;
}
Update:
I was able to replicate the bug described below here after I added pagination.
my fiddle: fiddle
To replicate, go to a different page and try opening all of the modals. Some will not open.
Observation:
I see that I am able to open only one modal per page after I change to a different page from the initial page.
Is there any better way of doing this? Or am I missing something trivial?
Bug descriptoin:
I am running into a strange behavior in my code where most of the rows(seems random to me) don't open a pop-up when the button is clicked.This happens even for the same modal type
Eg : Suppose P,Q entries of the column are of type modal1. Clicking on P opens a modal and clicking on Q does not.
I know this bug seems vague but I will be very glad if some one could point me in the right direction. Thanks.
Can't explain why this happens (maybe is a bug of bootstrap-vue). Anyway, if you replace:
<b-btn v-b-modal.modal1 size="sm" #click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" #click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" #click="details(item.item)">Details</b-btn>
with:
<b-btn v-b-modal="'modal1'" size="sm" #click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal2'" size="sm" #click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal3'" size="sm" #click="details(item.item)">Details</b-btn>
it seems to work fine.
Hope this helps you.
am having an issue with displaying my Echarts on the second tab. The chart is only displayed on the first tab but on navigation to the second tab it doesn't display
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">
Campaigns
</li>
<li>
Subscribers
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="campaign">
<div id="pieChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</div>
<div class="tab-pane fade" id="subscribers">
<div id="barChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</div>
</div>
then hereis the js that displays the chart
var myChart = echarts.init(document.getElementById('pieChart'));
myChart.setTheme({color:['#6CC66C','#418BCA','#ff6600']});
pieChartOption = option = {
title : {
text: 'Campaign Analysis',
subtext: 'Jackpot',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Sent','Pending','Not Delivered']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Access Source',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:{{ $no}}, name:'Sent'},
{value:135, name:'Pending'},
{value:155, name:'Not Delivered'}
]
}
]
};
myChart.setOption(pieChartOption);
/*######################### BARCHART ##################################*/
var myBarChart = echarts.init(document.getElementById('barChart'));
var barChartOption = {
title: {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2014', '2015']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '2014',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
}, {
name: '2015',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
}]
};
myBarChart.setOption(barChartOption);
/*######################### BARCHART ##################################*/
$(function() {
$( "#tabs" ).tabs({
select: function(event, ui) {
console.log('Calling chart.invalidateSize()');
chart.invalidateSize();
}
});
What cud be the solution to this?
});
ECharts documentation has mentioned
Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So resize should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in opts explicitly.
So every time you switch to a new tab, just call the resize function on the chart instance:
chartInstance.resize()
The answer is a little late and I am not sure if you found a solution, but the resolution to this would be a combination of echarts setOption and Bootstrap's Tab event.
Like-
$('#myTabItem').on('shown.bs.tab', function (e) {
myChart.setOption(options);
})
The above code will reload the chart mychart using echarts setOption callback as soon as the Bootstrap Tab is shown. More info on Bootstrap Tab events can be found here.