How to change jstree orientation using jquery?

How to change jstree orientation using jquery? - javascript

I am creating a bilingual form in which I used a jstree. I am going to switch between 2 languages, with different directions. I know that jstree inherits from body's direction. But i want to programmatically changes it's direction.
here is my jstree code:
$('#productTree').jstree({
"core": {
'data': result.ProductsTree,
"multiple": true,
"check_callback": false,
'themes': {
'variant': 'large',
'stripes': true,
"icons": true,
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": false
},
"plugins":
["checkbox"]
});

You have to enable rtl option in you core options object :
$('#productTree').jstree({
"core": {
'rtl' : true,
'data': result.ProductsTree,
"multiple": true,
"check_callback": false,
'themes': {
'variant': 'large',
'stripes': true,
"icons": true,
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": false
},
"plugins":
["checkbox"]
});

Related

Occasionally addMissingImports on save imports React again

I am using typescript and in *.tsx files, especially when i am copying code around, it quite often adds an additional
import React from "react";
// ? On Save
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll.eslint": true
// "source.organizeImports": true
}

I am using this configuration and works fine.
extensions.json
{
"recommendations": [
"amatiasq.sort-imports",
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"eg2.vscode-npm-script",
"esbenp.prettier-vscode",
"github.copilot",
"github.vscode-pull-request-github",
"ibm.output-colorizer",
"mhutchie.git-graph",
"ms-azuretools.vscode-docker",
"ms-kubernetes-tools.vscode-kubernetes-tools",
"ms-playwright.playwright",
"ms-vscode-remote.vscode-remote-extensionpack",
"pkief.material-icon-theme",
"quicktype.quicktype",
"redhat.vscode-yaml",
"ryanluker.vscode-coverage-gutters",
"streetsidesoftware.code-spell-checker",
"stylelint.vscode-stylelint",
"tyriar.sort-lines"
]
}
settings.json
{
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"diffEditor.ignoreTrimWhitespace": false,
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll": false,
"source.fixAll.eslint": true,
"source.organizeImports": false
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.guides.bracketPairs": "active",
"editor.inlineSuggest.enabled": true,
"editor.suggestSelection": "first",
"editor.tabSize": 2,
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.probe": [
"html",
"javascript",
"javascriptreact",
"markdown",
"typescript",
"typescriptreact"
],
"files.watcherExclude": {
"**/*.pem": true,
"**/*.tsbuildinfo": true,
"**/.DS_Store": true,
"**/.env.development.local": true,
"**/.env.local": true,
"**/.env.production.local": true,
"**/.env.test.local": true,
"**/.next/**": true,
"**/.pnp.js": true,
"**/.pnp/**": true,
"**/.vercel": true,
"**/build/**": true,
"**/coverage/**": true,
"**/node_modules/**": true,
"**/npm-debug.log*": true,
"**/out/**": true,
"**/yarn-debug.log*": true,
"**/yarn-error.log*": true
},
"github.copilot.enable": {
"*": true,
"markdown": false,
"plaintext": true,
"yaml": true
},
"redhat.telemetry.enabled": true,
"sort-imports.ignore-type-defs": false,
"stylelint.validate": [
"css",
"scss"
],
"terminal.integrated.sendKeybindingsToShell": true,
"window.zoomLevel": 1,
"workbench.iconTheme": "material-icon-theme"
}

DataTables - scrollX causing squashed header

So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});

In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}

DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}

This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"

$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});

Simogeo FileManager does not show the images

I have Simogeo FileManager version 2.0.0.
I extracted it in root/tools, changed the config file, set up the permissions, hooked it to tinymce and everything seemed to work. The tinymce opens the popup window with FileManager. I can create a folder, change folder and upload files.
Problem is when I upload file(s) I cannot see them in the FileManager but they are uploaded in the directories I created. The only thing I can see are directories.
I am testing it on Windows 8.1 with uwAmp, PHP 5.3.24 or PHP 5.4.31.
Config file:
{
"_comment": "IMPORTANT : go to the wiki page to know about options configuration https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file",
"options": {
"culture": "en",
"lang": "php",
"theme": "flat-dark",
"defaultViewMode": "grid",
"autoload": true,
"showFullPath": false,
"showTitleAttr": false,
"browseOnly": false,
"showConfirmation": true,
"showThumbs": true,
"generateThumbnails": true,
"searchBox": true,
"listFiles": true,
"fileSorting": "default",
"chars_only_latin": true,
"dateFormat": "d M Y H:i",
"serverRoot": true,
"fileRoot": false,
"relPath": false,
"logger": false,
"capabilities": ["select", "download", "rename", "delete", "replace"],
"plugins": []
},
"security": {
"allowFolderDownload": false,
"allowChangeExtensions": false,
"allowNoExtension": false,
"uploadPolicy": "DISALLOW_ALL",
"uploadRestrictions": [
"jpg",
"jpeg",
"gif",
"png",
"svg",
"txt",
"pdf",
"odp",
"ods",
"odt",
"rtf",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx",
"csv",
"ogv",
"mp4",
"webm",
"m4v",
"ogg",
"mp3",
"wav",
"zip",
"rar"
]
},
"upload": {
"multiple": true,
"number": 5,
"overwrite": false,
"imagesOnly": false,
"fileSizeLimit": 16
},
"exclude": {
"unallowed_files": [
".htaccess",
"web.config"
],
"unallowed_dirs": [
"_thumbs",
".CDN_ACCESS_LOGS",
"cloudservers"
],
"unallowed_files_REGEXP": "/^\\./",
"unallowed_dirs_REGEXP": "/^\\./"
},
"images": {
"imagesExt": [
"jpg",
"jpeg",
"gif",
"png",
"svg"
],
"resize": {
"enabled":true,
"maxWidth": 1280,
"maxHeight": 1024
}
},
"videos": {
"showVideoPlayer": true,
"videosExt": [
"ogv",
"mp4",
"webm",
"m4v"
],
"videosPlayerWidth": 400,
"videosPlayerHeight": 222
},
"audios": {
"showAudioPlayer": true,
"audiosExt": [
"ogg",
"mp3",
"wav"
]
},
"edit": {
"enabled": true,
"lineNumbers": true,
"lineWrapping": true,
"codeHighlight": false,
"theme": "elegant",
"editExt": [
"txt",
"csv"
]
},
"customScrollbar": {
"enabled": true,
"theme": "inset-2-dark",
"button": true
},
"extras": {
"extra_js": [],
"extra_js_async": true
},
"icons": {
"path": "images/fileicons/",
"directory": "_Open.png",
"default": "default.png"
},
"url": "https://github.com/simogeo/Filemanager",
"version": "2.0.0-dev"
}

The problem was with the type in referer.
tinymce was passing ?type=image and filemanager expected ?type=images

Are you sure listFiles option is set to true inc config file ?
See the related doc : https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file
listFiles Default value true. Display files in right column (filetree). If set to false, will display only folders. Can take value true or false.
For further help, could you copy-paste an URL or at least your config file!?

How to retrive only parent child and enable expand to get the child?

Need to load only the parent node for the sake of performance and then load the children when the user clicks on the icon, and the icon does not seem to expand when I do not carry child node. Can anyone help me?
My code return in json. below:
"JsonData": [
{
"id": "13",
"text": "MainBox",
"parent": "#",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"icon": null,
"li_attr": "{class = 'jstree-leaf' }",
"a_attr": null
}
]
EDIT
My jquery below:
root = $('#tree-files').jstree({
'core': {
'data': //code before
},
"plugins": ["themes", "json_data", "ui", "contextmenu"]
});

I figured out the answer. i hope be help for someone.
root = $('#tree-files').jstree({
'core': {
'data': {
'url': function (node) {
return 'Action/Controller';
},
'headers': headers,
'xhrFields': { withCredentials: true },
'async': true,
'data': function (node) {
//handler params here
return { 'id': node.id } ;
},
success: function (dados) {
//code success here
}
},
"check_callback": true,
"themes": {
"theme": "default",
"dots": false,
"icons": true,
},
},
"plugins": ["themes", "json_data", "ui", "contextmenu", "crrm"]
});

Jqgrid search option for local datatype not working

I want to add search option for my jqgrid table,
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'config.titlepage.title' },
{name: 'config.titlepage.color' },
{name: 'config.titlepage.fontsize' },
],
pager: '#pageGrid'
localReader: {
id: "_id.$oid"
}
});
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
I'm getting the search option but when I enter the search string and click on Filter button, search is happening.
Please help me here, do I need add any library files to perform for this search filter?

I'm not sure which problem with searching you have. The only clear error is: you skip one {} in the list of navGrid. You current option of navGrid set delete options as searching options. Correct option will be
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
Additionally you can consider to add ignoreCase: true option to the grid to make searching case insensitive. The demo seems to work correctly.
Another option which you can use to read the same data: to use datatype: 'jsonstring'. In the case you can use jsonmap and choose more readable name property. In the case the internal data of grid will contains only the data which you need. The demo demonstrate this approach. It uses the following code
var mydata = [
{
"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": { "titlepage": { "title": "My First Title", "color": true,
"fontsize": "42/44" } } }
];
$('#jqgrid').jqGrid({
datatype: 'jsonstring',
datastr: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colModel: [
{name: 'title', jsonmap: "config.titlepage.title" },
{name: 'color', jsonmap: "config.titlepage.color" },
{name: 'fontsize', jsonmap: "config.titlepage.fontsize" },
],
pager: '#pageGrid',
jsonReader: {
repeatitems: false,
id: "_id.$oid"
}
});
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
In any way I don't see any problem with searching in both demos.

Develop Reference

JavaScript is the programming language of the Web.

How to change jstree orientation using jquery? - javascript

Related

Occasionally addMissingImports on save imports React again

DataTables - scrollX causing squashed header

Simogeo FileManager does not show the images

How to retrive only parent child and enable expand to get the child?

Jqgrid search option for local datatype not working

Categories

Resources