Issue with treeView in Frappe-Datatable

I am not able to get data in datatable’s tree view. This is the code

const assets = [
"/assets/frappe/css/frappe-datatable.css",
"/assets/frappe/js/lib/clusterize.min.js",
"/assets/frappe/js/lib/Sortable.min.js",
"/assets/frappe/js/lib/frappe-datatable.js",
]
frappe.require(assets, () => {


let dt = new DataTable('#hello', {
  columns: [
    { name: 'Files', width: 300 },
    { name: 'Size', width: 150, align: 'right' },
    { name: 'Last Updated', width: 200, align: 'right' },
  ],
  data: [
    {
      'Files': 'Documents',
      'Size': '2M',
      'Last Updated': '',
      'indent': 0
    },
    {
      'Files': 'project.pdf',
      'Size': '1M',
      'Last Updated': 'Yesterday',
      'indent': 1
    },
    {
      'Files': 'my-face.png',
      'Size': '500k',
      'Last Updated': '2018-04-09',
      'indent': 1
    },
    {
      'Files': 'Projects',
      'Size': '77M',
      'Last Updated': '',
      'indent': 0
    },
    {
      'Files': 'frappe-gantt',
      'Size': '23M',
      'Last Updated': '',
      'indent': 1
    },
    {
      'Files': 'dist',
      'Size': '50k',
      'Last Updated': '2018-06-01',
      'indent': 2
    },
    {
      'Files': 'package.json',
      'Size': '5k',
      'Last Updated': '2018-06-01',
      'indent': 2
    },
    {
      'Files': 'frappe-datatable',
      'Size': '54M',
      'Last Updated': '',
      'indent': 1
    },
    {
      'Files': 'src',
      'Size': '53k',
      'Last Updated': 'A few seconds ago',
      'indent': 2
    },
  ],
  treeView: true
});


})

Although, the same code is working on fiddle. I am unable to figure out any library is missing or whats the issue that data isn’t showing. Note-> Already have clusterize and sortable libraries.

1 Like

Am I missing something. Any suggestions ?
There is a parameter format:formatFileName which I can’t get how it actually is supposed to be used. Tried with some combinations like Treeview,treeView,‘treeView’, none worked. Any help/suggestions will be appreciable

Any help ?

Still facing with the same issue. :frowning: Any update/help please

Hello @nikzz,

Do u still facing the problem, if so may I know on which screen do u try to display it? What I mean is whether is doctype, page or report??

Doctype and yeah same happening when importing libraries via internally. But not when using externally

So in Doctype, where did u set the datatable to? Did u created a HTML field or something else?

yes, a html field

@nikzz

First of all, make sure u already assign a div id called hello in created HTML field and thn please try following code.

frappe.require(["/assets/frappe/css/frappe-datatable.css",
	"/assets/frappe/js/lib/clusterize.min.js",
	"/assets/frappe/js/lib/Sortable.min.js",
	"/assets/frappe/js/lib/frappe-datatable.js"], function() {

	let dt = new DataTable('#hello', {
		columns: [
			{name: 'Files', width: 300 },
			{name: 'Size', width: 150, align: 'right' },
			{name: 'Last Updated', width: 200, align: 'right' },
		],
		data: [
			{
				'Files': 'Documents',
				'Size': '2M',
				'Last Updated': '',
				'indent': 0
			},
			{
				'Files': 'project.pdf',
				'Size': '1M',
				'Last Updated': 'Yesterday',
				'indent': 1
			},
			{
				'Files': 'my-face.png',
				'Size': '500k',
				'Last Updated': '2018-04-09',
				'indent': 1
			},
			{
				'Files': 'Projects',
				'Size': '77M',
				'Last Updated': '',
				'indent': 0
			},
			{
				'Files': 'frappe-gantt',
				'Size': '23M',
				'Last Updated': '',
				'indent': 1
			},
			{
				'Files': 'dist',
				'Size': '50k',
				'Last Updated': '2018-06-01',
				'indent': 2
			},
			{
				'Files': 'package.json',
				'Size': '5k',
				'Last Updated': '2018-06-01',
				'indent': 2
			},
			{
				'Files': 'frappe-datatable',
				'Size': '54M',
				'Last Updated': '',
				'indent': 1
			},
			{
				'Files': 'src',
				'Size': '53k',
				'Last Updated': 'A few seconds ago',
				'indent': 2
			},
		],
		treeView: true
	});
});

@nikzz

Did u manage to make it work??

Naah. Not working. This is the output

I don’t know why but for some reason I cannot achieve using require in Custom Script, so what I did was export require css and js in hooks.py as below:

app_include_css = [
    "https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.css"
]

app_include_js = [
    "https://unpkg.com/clusterize.js@0.18.0/clusterize.min.js",
    "https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"
]

As u realize, I didn’t include Sortable.min.js because it will return error of conflict.

And then, I add Custom Script for the document as below:

frappe.ui.form.on('DOCTYPE' {
	refresh: function(frm) {
		let dt = new DataTable('#items_datatable', {
			columns: [
				{name: 'Files', width: 300 },
				{name: 'Size', width: 150, align: 'right' },
				{name: 'Last Updated', width: 200, align: 'right' },
			],
			data: [
				{
					'Files': 'Documents',
					'Size': '2M',
					'Last Updated': '',
					'indent': 0
				},
				{
					'Files': 'project.pdf',
					'Size': '1M',
					'Last Updated': 'Yesterday',
					'indent': 1
				},
				{
					'Files': 'my-face.png',
					'Size': '500k',
					'Last Updated': '2018-04-09',
					'indent': 1
				},
				{
					'Files': 'Projects',
					'Size': '77M',
					'Last Updated': '',
					'indent': 0
				},
				{
					'Files': 'frappe-gantt',
					'Size': '23M',
					'Last Updated': '',
					'indent': 1
				},
				{
					'Files': 'dist',
					'Size': '50k',
					'Last Updated': '2018-06-01',
					'indent': 2
				},
				{
					'Files': 'package.json',
					'Size': '5k',
					'Last Updated': '2018-06-01',
					'indent': 2
				},
				{
					'Files': 'frappe-datatable',
					'Size': '54M',
					'Last Updated': '',
					'indent': 1
				},
				{
					'Files': 'src',
					'Size': '53k',
					'Last Updated': 'A few seconds ago',
					'indent': 2
				}
			],
			treeView: true
		});
	}
});

And this is how the output look like in my screen: