Hi,

The source code you shared can not be viewed. Anyways please refer to the working demo of the portlet and reuse markup carefully: http://keenthemes.com/metronic/preview/?page=components/portlets/base&demo=default Please note how we used the bootstrap row and columns to place the portlets.

Thanks.

I made 1 portlet conain all the portlets. not like you did all portlet inside a content space. I know how to deal with the markup stuff, but this one is little more hard to achieve, the fact that you are the othor of that design, you may now how to achieve it.

The time of the file was expired because you took more than 24 hours to check/view it .I’m gonna rescend it, and hopefully it gonna take you less than 24 hours to download it. here’s the new link : https://nofile.io/f/r1wpqbxnc77/vehicule-form.html you have to save it inside the default metronic inside the root folder.

thank you

Hi,

You just need to add margin to each portlet in order to add a space between portlets. You can use “m-margin-bottom-10” helper class or “m-margin-bottom-20” for portlet tag as “m-portlet m—margin-bottom-10”.

Thanks.

Hi,

I add m-margin-bottom-20 to all portlet’s div class like that :

\div class=”m-portlet m-margin-bottom-20 …”> to all portlet but it didn’t work.

any other solution?

I’m sorry I can’t go forward in my project if this issue is not fixed; because all the project is based on that Template/Layout, all pages.

Did I made something wrong in the .html that I sent you, I just did include portlets inside a portlet, I did’t made any hacks or something, so how comes it is not working, is it a bootstrap problem ?

Thank you keenthemes.

Hi,

Sorry for the typo in the class name. Please use “m-margin-bottom-20” or “m-margin-bottom-20” with “m-portlet” root tag. This should work. Basically you will just need to apply margin to the portlets.

Thanks.

Hi,

We seen errors on the console log and datatable won’t render. https://ibb.co/bGOwGJ

Thanks.

Please Check Now !

Hi, it still has js error at console log https://ibb.co/hTZdVd

Hi, Sorry for the inconvenience error has been fixed ….Please Check again ! Thanks !

Hi, did it you set the scroll option to false? How do I reproduce the outline issue?

Thanks

Hi, First You toggle any of three switches Which will hide the columns than try sorting columns on first or second page than switch On the Toggles which you swtiched off early and scroll horizontally you..

Thanks

Hi,

When I set hidden for 3 columns, then do sorting, all columns being rendered back again. We have to check this issue

Thanks

Please check and Please fix as soon as possible as we have to implement it our Production and days are near .. After fixing it Please let us know Thanks

Hi,

We will check and fix it.

Thanks

Hi,

We have tested similar function to hide datatable columns using the switch. Our result has no issue with the hidden columns and sorting. We are using a remote data source.

Can you try to use our switch code? Check the links below.

Testing video; https://www.useloom.com/share/ce582f3dca814aa8b9b66f0c3540d51a Our tested code: https://gist.github.com/faizalmy/70dcf4bfcc83061b1be305b2f7ef8ffa

If you are not using the latest version, can you try to upgrade to the latest version 5.2?

Thanks

Can You Please Explain what datatable.redraw( ) does ? and Our data is local …..can You please help us to redesign our Code in Proper way ?

Thanks !

Hi,

datatable.redraw() used to fix the datatable layout if its not properly count during previous actions.

Okay, we will test the same actions with the local datatable.

Did you using this type of local datatatable from our sample code?

data: { type: ‘local’, source: dataJSONArray, pageSize: 10 },

Thanks

Hi,

Have Tried your Code 50% of issues have been fixed Still getting some issues Please check

https://www.useloom.com/share/d23c915d426f4bf48e67b594bdedb338

Thanks

Yes

Hi,

My code still work for local data. I tried it at file /src/js/demo/default/custom/crud/metronic-datatable/base/data-local.js

Here is my video recorded test. https://www.useloom.com/share/a3855ede1e994f10bfd3bb72399891ff And I’m still use the same code https://gist.github.com/faizalmy/70dcf4bfcc83061b1be305b2f7ef8ffa

Can you send your datatable init code for us to check and test at our end?

Thanks

Here is Our Code

angular .module(‘app’) .controller(‘scannerIndCtrl_dev’, [‘getScannerIndDataService’,’getSymbolIndDataService’,’$scope’ , ’$http’, ’$interval’, function(getScannerIndData, getSymbolIndData, $scope, $http, $interval){

datatable = null;

//$scope.SelectValue = $scope.options[1];
$scope.IndexValue = ["Nifty50","Nifty100","Nifty500","NiftyFNO"];
$scope.SelectIndexValue = $scope.IndexValue[2];
$scope.TimeFrameValue = ["30Min","60Min","LTP","1Day","1Week","All"];
$scope.SelectTimeFrameValue = $scope.TimeFrameValue[0];
$scope.scanner_ind_data_global = null;
$scope.symbol_ind_data_global = null;

$scope.ADX_30Min = null;
$scope.ADX_60Min = null;
$scope.ADX_LTP = null;
$scope.ADX_1Day = null;
$scope.ADX_1Week = null;

$scope.PDI_30Min = null;
$scope.PDI_60Min = null;
$scope.PDI_LTP = null;
$scope.PDI_1Day = null;
$scope.PDI_1Week = null;

$scope.MDI_30Min = null;
$scope.MDI_60Min = null;
$scope.MDI_LTP = null;
$scope.MDI_1Day = null;
$scope.MDI_1Week = null;

$scope.MACD_30Min = null;
$scope.MACD_60Min = null;
$scope.MACD_LTP = null;
$scope.MACD_1Day = null;
$scope.MACD_1Week = null;

$scope.BB_UP_30Min = null;
$scope.BB_UP_60Min = null;
$scope.BB_UP_LTP = null;
$scope.BB_UP_1Day = null;
$scope.BB_UP_1Week = null;

$scope.BB_MID_30Min = null;
$scope.BB_MID_60Min = null;
$scope.BB_MID_LTP = null;
$scope.BB_MID_1Day = null;
$scope.BB_MID_1Week = null;

$scope.BB_LOW_30Min = null;
$scope.BB_LOW_60Min = null;
$scope.BB_LOW_LTP = null;
$scope.BB_LOW_1Day = null;
$scope.BB_LOW_1Week = null;

$scope.RSI_30Min = null;
$scope.RSI_60Min = null;
$scope.RSI_LTP = null;
$scope.RSI_1Day = null;
$scope.RSI_1Week = null;

$scope.SLOWK_30Min = null;
$scope.SLOWK_60Min = null;
$scope.SLOWK_LTP = null;
$scope.SLOWK_1Day = null;
$scope.SLOWK_1Week = null;

$scope.SLOWD_30Min = null;
$scope.SLOWD_60Min = null;
$scope.SLOWD_LTP = null;
$scope.SLOWD_1Day = null;
$scope.SLOWD_1Week = null;

$scope.scanner_ind_refresh_data = function(){

console.log('inside scanner_refresh_data dev');

//== Class definition
data = $scope.scanner_ind_data_global;
index = $scope.SelectIndexValue;
timeframe = $scope.SelectTimeFrameValue;
var dataJSONArray = data;
dataJSONArray = JSON.stringify(dataJSONArray);
dataJSONArray = JSON.parse(dataJSONArray);
console.log(dataJSONArray);
scannerIndData = [];

$.each(dataJSONArray, function(idx, obj1) {
  scannerDataTmp = {};
  timeframe_flag = false;

$.each(obj1.fields, function(idx, obj2) {
};
if(idx=="PDI"){
  scannerDataTmp["PDI"] = parseFloat(obj2);
};        
if(idx=="MDI"){
  scannerDataTmp["MDI"] = parseFloat(obj2);
};
if(idx=="MACD"){
  scannerDataTmp["MACD"] = parseFloat(obj2);
};
if(idx=="MACDSIGNAL"){
  scannerDataTmp["MACDSIGNAL"] = parseFloat(obj2);
};
if(idx=="MACDHIST"){
  scannerDataTmp["MACDHIST"] = parseFloat(obj2);
};    
if(idx=="BB_UP"){
  scannerDataTmp["BB_UP"] = parseFloat(obj2);
};
if(idx=="BB_MID"){
  scannerDataTmp["BB_MID"] = parseFloat(obj2);
};
if(idx=="BB_LOW"){
  scannerDataTmp["BB_LOW"] = parseFloat(obj2);
};
if(idx=="RSI"){
  scannerDataTmp["RSI"] = parseFloat(obj2);
};
if(idx=="SLOWK"){
  scannerDataTmp["SLOWK"] = parseFloat(obj2);
};
if(idx=="SLOWD"){
  scannerDataTmp["SLOWD"] = parseFloat(obj2);
};
if(idx=="SIGNAL_DT"){
    //var Dt = new Date(Date.parse(obj2));
    scannerDataTmp["SIGNAL_DT"] = obj2;
  };

if(idx=="SYMBOL"){
   scannerDataTmp["SYMBOL"] = obj2;
 };
 if(idx=="NSE_INDEX"){
   scannerDataTmp["NSE_INDEX"] = parseInt(obj2);
   if(scannerDataTmp["NSE_INDEX"]  1 && index 'Nifty50'){
     scannerDataTmp["NSE_INDEX"] = true;
   }
   else if((scannerDataTmp["NSE_INDEX"]  1 || scannerDataTmp["NSE_INDEX"]  2 || scannerDataTmp["NSE_INDEX"]  3 || scannerDataTmp["NSE_INDEX"]  4) && index =='Nifty500'){
     scannerDataTmp["NSE_INDEX"] = true;
   }
   else if((scannerDataTmp["NSE_INDEX"]  1 || scannerDataTmp["NSE_INDEX"]  2) && index =='Nifty100'){
     scannerDataTmp["NSE_INDEX"] = true;
   }
   else {
     scannerDataTmp["NSE_INDEX"] = false;
   }
 };
 if(idx=="FNO_FLAG"){
   scannerDataTmp["FNO_FLAG"] = parseInt(obj2);
   if(scannerDataTmp["FNO_FLAG"]  1 && index 'NiftyFNO'){
     scannerDataTmp["FNO_FLAG"] = true;
   }
   else{
     scannerDataTmp["FNO_FLAG"] = false;
   }
 };
 if(idx=="TIMEFRAME"){
   scannerDataTmp["TIMEFRAME"] = obj2;
   if(scannerDataTmp["TIMEFRAME"]  "30Min" && timeframe '30Min'){
    timeframe_flag = true;
  }
  else if(scannerDataTmp["TIMEFRAME"]  "60Min" && timeframe '60Min'){
    timeframe_flag = true;
  }
  else if(scannerDataTmp["TIMEFRAME"]  "LTP" && timeframe 'LTP'){
    timeframe_flag = true;
  }
  else if(scannerDataTmp["TIMEFRAME"]  "1Day" && timeframe '1Day'){
    timeframe_flag = true;
  }
  else if(scannerDataTmp["TIMEFRAME"]  "1Week" && timeframe '1Week'){
    timeframe_flag = true;
  }
  else if((scannerDataTmp["TIMEFRAME"]  "15Min" || scannerDataTmp["TIMEFRAME"]  "30Min" || scannerDataTmp["TIMEFRAME"]  "60Min" || scannerDataTmp["TIMEFRAME"]  "LTP" || scannerDataTmp["TIMEFRAME"]  "1Day" || scannerDataTmp["TIMEFRAME"]  "1Week") && timeframe =='All'){
    timeframe_flag = true;
  }
};
if(idx=="ADX"){
 scannerDataTmp["ADX"] = parseFloat(obj2);

});

if((scannerDataTmp["NSE_INDEX"] || scannerDataTmp["FNO_FLAG"]) && timeframe_flag){
  scannerIndData.push(scannerDataTmp);

};

});

console.log(scannerIndData);
//console.log('printing Scanner Ind DATA');
//console.log(scannerIndData);
$('.m_datatable').mDatatable('destroy');
//dataJSONArray = null;

datatable = $('.m_datatable').mDatatable({
  // datasource definition
  data: {
    type: 'local',
    source: scannerIndData,
    pageSize: 10
    //serverPaging: true,
    //serverFiltering: true,
    //serverSorting: true
  },

// layout definition
layout: {
  theme: 'default', // datatable theme
  class: '', // custom wrapper class
  scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
  //height: 500, // datatable's body's fixed height
  footer: false, // display/hide footer
},

select: true,
// column sorting
sortable: true,

filterable: false,

pagination: true,

search: {
  input: $('#generalSearch')
},

// toolbar
toolbar: {
  // toolbar items
  items: {
    // pagination
    pagination: {
      pageSizeSelect: [5, 10, 20, 30, 50, 100/, -1/] // display dropdown to select pagination size. -1 is used for "ALl" option
    }
  }
},

// inline and bactch editing(cooming soon)
// editable: false,

// columns definition
columns: [       
{
  field: "SYMBOL",
  title: "SYMBOL",
    //sortable: "asc" 
    template: function (row) {
      return '' + row.SYMBOL + '';
    }
});

},{
  field: "TIMEFRAME",
  title: "TIMEFRAME",
},{
  field: "ADX",
  title: "ADX",
  type: "number",
},{
  field: "PDI",
  title: "PDI",
  type: "number" 
},{
  field: "MDI",
  title: "MDI",
  type: "number" 
},{
  field: "MACD",
  title: "MACD",
  type: "number" 
},{
  field: "BB_UP",
  title: "BB_UP",
  type: "number" 
},
{
  field: "BB_MID",
  title: "BB_MID",
  type: "number" 
},{
  field: "BB_LOW",
  title: "BB_LOW",
  type: "number" 
},{
  field: "RSI",
  title: "RSI",
  type: "number" 
}, {
  field: "SLOWK",
  title: "SLOWK",
  type: "number" 
},{
  field: "SLOWD",
  title: "SLOWD",
  type: "number" 
},{
  field: "SIGNAL_DT",
  title: "SIGNAL_DT",
}]

datatable.reload();

scannerIndData = null;

};

$scope.symbol_ind_refresh_data = function(){

console.log('inside symbol_refresh_data dev');

//== Class definition
data = $scope.symbol_ind_data_global;
var dataJSONArray = data;
//dataJSONArray = JSON.stringify(dataJSONArray);
//dataJSONArray = JSON.parse(dataJSONArray);
console.log(dataJSONArray);
//symbolIndData = [];

$.each(dataJSONArray, function(idx, obj1) {
  symbolDataTmp = {};

$.each(obj1, function(idx, obj2) {
  console.log(idx);
  console.log(obj2);

if(idx=="SYMBOL"){
  symbolDataTmp["SYMBOL"] = obj2;
};
if(idx=="TIMEFRAME"){
  symbolDataTmp["TIMEFRAME"] = obj2;
};

if(idx=="ADX"){
  symbolDataTmp["ADX"] = parseFloat(obj2);
};
if(idx=="PDI"){
  symbolDataTmp["PDI"] = parseFloat(obj2);
};        
if(idx=="MDI"){
  symbolDataTmp["MDI"] = parseFloat(obj2);
};
if(idx=="MACD"){
  symbolDataTmp["MACD"] = parseFloat(obj2);
};   
if(idx=="BB_UP"){
  symbolDataTmp["BB_UP"] = parseFloat(obj2);
};
if(idx=="BB_MID"){
  symbolDataTmp["BB_MID"] = parseFloat(obj2);
};
if(idx=="BB_LOW"){
  symbolDataTmp["BB_LOW"] = parseFloat(obj2);
};
if(idx=="RSI"){
  symbolDataTmp["RSI"] = parseFloat(obj2);
};
if(idx=="SLOWK"){
  symbolDataTmp["SLOWK"] = parseFloat(obj2);
};
if(idx=="SLOWD"){
  symbolDataTmp["SLOWD"] = parseFloat(obj2);
};

});

if(symbolDataTmp["TIMEFRAME"] == "30Min"){
  $scope.ADX_30Min = symbolDataTmp["ADX"];
  $scope.PDI_30Min = symbolDataTmp["PDI"];
  $scope.MDI_30Min = symbolDataTmp["MDI"];
  $scope.MACD_30Min = symbolDataTmp["MACD"];
  $scope.BB_UP_30Min = symbolDataTmp["BB_UP"];
  $scope.BB_MID_30Min = symbolDataTmp["BB_MID"];
  $scope.BB_LOW_30Min = symbolDataTmp["BB_LOW"];
  $scope.RSI_30Min = symbolDataTmp["RSI"];
  $scope.SLOWK_30Min = symbolDataTmp["SLOWK"];
  $scope.SLOWD_30Min = symbolDataTmp["SLOWD"];
}

if(symbolDataTmp["TIMEFRAME"] == "60Min"){
  $scope.ADX_60Min = symbolDataTmp["ADX"];
  $scope.PDI_60Min = symbolDataTmp["PDI"];
  $scope.MDI_60Min = symbolDataTmp["MDI"];
  $scope.MACD_60Min = symbolDataTmp["MACD"];
  $scope.BB_UP_60Min = symbolDataTmp["BB_UP"];
  $scope.BB_MID_60Min = symbolDataTmp["BB_MID"];
  $scope.BB_LOW_60Min = symbolDataTmp["BB_LOW"];
  $scope.RSI_60Min = symbolDataTmp["RSI"];
  $scope.SLOWK_60Min = symbolDataTmp["SLOWK"];
  $scope.SLOWD_60Min = symbolDataTmp["SLOWD"];
}

if(symbolDataTmp["TIMEFRAME"] == "LTP"){
  $scope.ADX_LTP = symbolDataTmp["ADX"];
  $scope.PDI_LTP = symbolDataTmp["PDI"];
  $scope.MDI_LTP = symbolDataTmp["MDI"];
  $scope.MACD_LTP = symbolDataTmp["MACD"];
  $scope.BB_UP_LTP = symbolDataTmp["BB_UP"];
  $scope.BB_MID_LTP = symbolDataTmp["BB_MID"];
  $scope.BB_LOW_LTP = symbolDataTmp["BB_LOW"];
  $scope.RSI_LTP = symbolDataTmp["RSI"];
  $scope.SLOWK_LTP = symbolDataTmp["SLOWK"];
  $scope.SLOWD_LTP = symbolDataTmp["SLOWD"];
}

if(symbolDataTmp["TIMEFRAME"] == "1Day"){
  $scope.ADX_1Day = symbolDataTmp["ADX"];
  $scope.PDI_1Day = symbolDataTmp["PDI"];
  $scope.MDI_1Day = symbolDataTmp["MDI"];
  $scope.MACD_1Day = symbolDataTmp["MACD"];
  $scope.BB_UP_1Day = symbolDataTmp["BB_UP"];
  $scope.BB_MID_1Day = symbolDataTmp["BB_MID"];
  $scope.BB_LOW_1Day = symbolDataTmp["BB_LOW"];
  $scope.RSI_1Day = symbolDataTmp["RSI"];
  $scope.SLOWK_1Day = symbolDataTmp["SLOWK"];
  $scope.SLOWD_1Day = symbolDataTmp["SLOWD"];
}

if(symbolDataTmp["TIMEFRAME"] == "1Week"){
  $scope.ADX_1Week = symbolDataTmp["ADX"];
  $scope.PDI_1Week = symbolDataTmp["PDI"];
  $scope.MDI_1Week = symbolDataTmp["MDI"];
  $scope.MACD_1Week = symbolDataTmp["MACD"];
  $scope.BB_UP_1Week = symbolDataTmp["BB_UP"];
  $scope.BB_MID_1Week = symbolDataTmp["BB_MID"];
  $scope.BB_LOW_1Week = symbolDataTmp["BB_LOW"];
  $scope.RSI_1Week = symbolDataTmp["RSI"];
  $scope.SLOWK_1Week = symbolDataTmp["SLOWK"];
  $scope.SLOWD_1Week = symbolDataTmp["SLOWD"];
}

});
//console.log('printing Scanner Ind DATA');
//console.log(scannerIndData);
//$('.m_datatable').mDatatable('destroy');
dataJSONArray = null;

};

$scope.scanner_ind_get_data = function(){
  var scannerIndData= getScannerIndData.getData();
  scannerIndData.then(function(data){
    $scope.scanner_ind_data_global = data;
      //console.log('printing scanner_data_global')
      //console.log($scope.scanner_data_global);
      $scope.scanner_ind_refresh_data();
      setTimeout(
        function() {
          $scope.scanner_ind_get_data();
        } , 100000);
    });

};

//== Class definition
var Typeahead = function() {
}();

//== Private functions
}

var demo = function() {
  console.log("demo called");
  var symbolLists = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('SYMBOL'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'https://trade.chartadvise.com/app/Scan_IND_TYPEAHEAD/'
  });
/$('#m_typeahead_5').bind('typeahead:select', function(ev, suggestion) {
  console.log('Selection: ' + suggestion);
});/

$('#m_typeahead_5').typeahead({
  highlight: true
},{
  name: 'symbol-lists',
  display: 'SYMBOL',
  source: symbolLists,
  templates: {
    header: '
List Of Symbols
'
  }
}
);

return {
  // public functions
  init: function() {
    console.log("Init called");
    demo();
  }
};

Typeahead.init();

$scope.symbol_ind_get_data = function(){
  var symbolIndData= getSymbolIndData.getData($scope.takesymbol);
  symbolIndData.then(function(data){
    $scope.symbol_ind_data_global = data;
    //console.log('printing symbol_data_global')
    //console.log($scope.symbol_ind_data_global);
    $scope.symbol_ind_refresh_data();
    /setTimeout(
      function() {
        $scope.scanner_ind_get_data();
      } , 10000);/
    });

};

$scope.typeahead1 = function(){
  $scope.takesymbol = $(m_typeahead_5).typeahead('val');
  //console.log($scope.takesymbol);
  $scope.symbol_ind_get_data();
};

$scope.scanner_ind_get_data();

//

}]);

This is How i Hide columns :-

$(’.m-visibility’).on(‘change’, function(e) { var column = $(this).data(‘column’); datatable.columns(column).visible($(this).prop(‘checked’)); datatable.redraw(); }); $(’.m-visibility_DI’).on(‘change’, function(e) { var column = $(this).data(‘column’); datatable.columns(‘PDI’).visible($(this).prop(‘checked’)); datatable.columns(‘MDI’).visible($(this).prop(‘checked’)); datatable.redraw(); }); $(’.m-visibility_BB’).on(‘change’, function(e) { var column = $(this).data(‘column’); datatable.columns(‘BB_UP’).visible($(this).prop(‘checked’)); datatable.columns(‘BB_MID’).visible($(this).prop(‘checked’)); datatable.columns(‘BB_LOW’).visible($(this).prop(‘checked’)); datatable.redraw(); }); $(’.m-visibility_STOCH’).on(‘change’, function(e) { var column = $(this).data(‘column’); datatable.columns(‘SLOWK’).visible($(this).prop(‘checked’)); datatable.columns(‘SLOWD’).visible($(this).prop(‘checked’)); datatable.redraw(); });

Hi,

Did you do destroy datatable?

Thanks

Yes I did destroy datatable !

Hi,

When do you destroy the datatable?

We are still couldn’t find what does it caused.

Is there any specific way to reproduce it. We check your datatable option and initialization have no issue. Can we check a few of your data inside variable “scannerIndData”?

Thanks

HI,

I am destroying datatable Before Creating datatable object and Reloading it after creating datatable object.

i have console.logged scannerIndData Variable you can see it in browser console.

Thanks

Hi,

Sorry for the late response. We have done more tests. We tried to simulate it as close as possible. Even though not in AngularJS, but in plain HTML and JS.

We used the data from your site console log.

But still, we can’t get the issue as yours. Here we provide you with our test link for you to compare.

Let us know if we have missed something. Also, are you sure you are using the latest version of Metronic’s datatable? Was it version around 5.0.x < or 5.2 above?

Test page: https://keenthemes.com/metronic/preview/dt-test.html
JS file: https://keenthemes.com/metronic/preview/assets/data-local.js

Thanks

Hi PixelDots,

I have tried implementing with Your Provided code But i am still facing the same issue

if you notice initially whenever the page is loaded whenever we try to sort the columns it doesnot allow to us to sort but if you go to second page of datatable and try to do sort it does the sorting this is little strange

We have implemented our project on Metronic v5.1

Should i update the vendors.bundle.js and scripts.bundle.js to latest version ??

Thanks

Hi,

We have Updated Our Metronic to latest v5.2, The above problems which we were facing got fixed perfectly but new problem arises which is :-

1. In some of our pages having datatable, the datatable colums are not perfectly aligned on initial load but when we reload the datatable Everything works fine

https://www.useloom.com/share/25a81bfed3244bd38e21d7a483247c52

Thanks !

Hi,

I did try on your page https://trade.chartadvise.com/app/technical_indicators_dev/

1) I can sort on initial page load
2) previous issue is gone, hide/show columns then sort

Can you give the link of datatable with columns not align?

Thanks

Hi,

We have updated only four files of metronic in our project which are -

1) vendors.bundle.js 2) vendors.bundle.css 3) scripts.bundle.js 4) scripts.bundle.css

Here is the link of one of the page having datatable with columns not align -

https://trade.chartadvise.com/app/intraday_trends_dev/

go under the Query Tab you will find it .

Thanks !

Hi,

Can you try to disable scroll? By setting the layout.scroll to false

Thanks

Hi ,

I have set layout.scroll to false, but still it is not working Please Check !

Thanks

Hi,

There is an issue datatable js cannot calculate the layout properly when the datatable is hidden at initial load. The width in js will return 0 when the element is hidden. Because you are using tab and placed the datatable in the hidden tab content.

To solve this issue, you have to run another datatable API to fix the layout, which is datatable.redraw();

Please use this bootstrap event shown.bs.tab to redraw the table layout. https://getbootstrap.com/docs/4.0/components/navs/#events

Thanks

Hi ,

How to implement this ? Please Explain or help me implementing it !

Thanks !

Hi,

I implemented it and its working perfect …

Thanks !

Great! Glad for you

Hi KennThemes,

https://trade.chartadvise.com/app/intraday_trends_dev/

On this page whenever i click the first toggle the Metronic Datatable gets misaligned but When i click the Second toggle Datatable get fine and Properly Aligned This is only happening when datatable scroll is set to True layout: { theme: ‘default’, class: ’’, scroll: true, height: 700, footer: false, },

Thanks ! Please revert as soon as Possible

Hi,

Yes, sometimes we alter the HTML code as well. But not often like we alter JS and CSS/SCSS files. You should You can use code diff tools to difirinshite the changed HTML code when a new update comes.

Thanks.

You got me, LoL

You knew what I wanted.

What about the second question about datatables.net and its HTML files are gonna be altered if you change the style of them ?

Thank you guys.

Hi,

Which datatable are you referring ? Since v5.2 we have 2 datatable plugins: Metronic Datatable and datatables.net. If you are working with datatables.net, you can check the plugin’s official documentation.

Thanks.

Hi keenthemes ,

When I toggle switch to hide column in ” metronic datatable ” the column is hidden perfectly but when i Sort Column the datable is refreshed with all data including hidden columns

For reference : https://trade.chartadvise.com/app/technical_indicators_dev/

also check scanIndCtrl_dev.js file

Please reply as soon as possible !

Thanks !

Hi, it has js error at console log https://ibb.co/hTZdVd

Hi, Sorry for the inconvenience error has been fixed ….Please Check again ! Thanks !

Hi, which Metronic’s version are you working on? Can you try to update first to the latest version. We have many bug fixes included. Just replace old datatable.js. with the latest datatable.js, then compile it with gulp, if you not ready with fully upgrade.

/src/js/framework/components/general/datatable

Thanks

Hi, We are not using datatable.js file instead We are using vendors.bundle.js and scripts.bundle.js

Is there a need to import datatable.js file in our html page : https://trade.chartadvise.com/app/technical_indicators_dev/

This is our .js file “scannerIndCtrl_dev.js”

If you will do view page source you will come to know what we are importing !

Thanks