"Disabling the checkbox in PrimeVue Tree does not hide it even when the selectable option is

Using Vue version 3.3.6 with Composition API script setup, Typescript, PrimeVue version 3.37.0, and PrimeFlex version 3.3.1, I am trying to implement a feature in my Tree component where I can disable certain checkboxes when the selectionMode is set to "checkbox".

While exploring the TreeNode element, I found that setting the selectable key to false only hides the checkbox, which has been a point of contention on platforms like GitHub.

In my attempt to find a workaround, I started working on a solution using TreePassThroughOptions but faced two main challenges:

1- The typing system of the library is complex, forcing me to type TreeProps as any to access the node key (of type TreeNode) without causing issues in my IDE.

2- Even after applying the PrimeFlex pointer-events-none class, clicking on the apparently disabled checkbox still triggers check/uncheck actions.

Below is the code snippet I attempted to utilize:

<template>
  <Tree v-model:selectionKeys="selectedTreeItems" :value="treeItems" selectionMode="checkbox" :pt="treeOpt"/>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type { TreeNode, TreePassThroughOptions, TreeProps, TreeSelectionKeys } from 'primevue/tree';

const dataList = [
  { key: 'grid', label: 'Grid', data: 'grid', selectable: true, disabled: true, children:
    [
      { key: 'grid1', label: 'Grid One', data: 'grid1', selectable: true, disabled: false},
      { key: 'grid2', label: 'Grid Two', data: 'grid2', selectable: true, disabled: false}
    ]
  },
  { key: 'biz', label: 'Biz', data: 'biz', selectable: false, disabled: true, children:
    [
      { key: 'biz1', label: 'Biz One', data: 'biz1', selectable: true, disabled: true},
      { key: 'biz2', label: 'Biz Two', data: 'biz2', selectable: true, disabled: true}
    ]
  }
]
const treeOpt: TreePassThroughOptions = {
  root: {class: 'text-xs p-0'},
  checkbox: ({ instance, state, global, context, props }) => {
    const myProps: any = props
    const node: TreeNode = myProps.node as TreeNode
    return {
      class: node.disabled ? 'p-disabled pointer-events-none' : undefined
    }
  }
}
const treeItems: Ref<TreeNode[]> = ref([...dataList])
const selectedTreeItems: Ref<TreeSelectionKeys | undefined> = ref();
</script>

Answer №1

If you want to customize a CSS class, you can do so by creating your own style rules like this:

.custom-tree-table-checkbox .p-checkbox-box,
.custom-tree-table-checkbox .p-checkbox-input {
    pointer-events: none;
    opacity: 0.75;
    border: 1px solid #333;
}

Then, when working with your tree node, apply the custom class using the styleClass property like this:

styleClass: "custom-tree-table-checkbox"

For more information, refer to the treeNode documentation on primeVue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to display a DataTable in Vue using PrimeVue from a CDN

When using PrimeVue with the CDN option, some components work without importing them and just registering as components is enough. These include buttons, messages, input texts, etc. However, for certain components like DataTable, it is necessary to import ...

typescriptExtract generic type from TypedDocumentNode<MyType, unknown> using introspection

I am currently utilizing a library that allows me to retrieve the type from a returned variable within a function. const myVar = gql(somestring) // The library function is called gql type myVarType = typeof myVar // The resultant value of myVarType is Typ ...

What are the benefits of using material-ui@next without the need for

Thinking about creating a project using material-ui@next, but trying to avoid using withStyles. However, encountering issues with the draft of TypeScript that includes the decorator @withStyles. This leads to one question - is it possible to use material ...

Using TypeScript with React Router-dom

I am just starting to learn typeScript, and I have encountered a problem while trying to navigate from one functional component to another using History.push. Here is the approach I am attempting: history.push({ to: "some URL", state: {// some st ...

What is the best way to distribute a Typescript module across multiple projects without having to duplicate it each time?

I currently have two folders named shared and project1 within a larger folder called node. I am in the process of working on multiple Node projects that are independent and are all located within the node folder. Within the shared folder, there is an inde ...

A method for enabling mat-spinner's entrance animation

I have recently implemented an Angular Material spinner with a disappearing animation that moves downwards before fading away. Is there a way to disable this animation? I have already tried using keyframes without success. <mat-spinner style="margin: ...

Can a TypeScript-typed wrapper for localStorage be created to handle mapped return values effectively?

Is it feasible to create a TypeScript wrapper for localStorage with a schema that outlines all the possible values stored in localStorage? Specifically, I am struggling to define the return type so that it corresponds to the appropriate type specified in t ...

Creating a Form in Angular That Dynamically Adds Form Controls

In order to achieve my objective of incorporating a search form with multiple filters on any given page, I aim to implement the following structure on my HomePageComponent: <app-search-form> <app-searchbox></app-searchbox> </app-sear ...

Encountering TS2304 error message while running TypeScript files indicates the inability to locate the name 'PropertyKey', in addition to another error - TS2339

I encountered an issue while attempting to execute a spec.ts file in the Jasmine Framework. After installing @types/core-js version 0.9.46 using the command npm i @types/core-js, I started receiving the following error messages: > ../../node_modules/ ...

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

I am verifying the user's login status and directing them to the login page if they are not already logged in

My goal is to utilize ionViewWillEnter in order to verify if the user is logged in. If the check returns false, I want to direct them to the login page and then proceed with the initializeapp function. My experience with Angular and Ionic is still limite ...

The element 'x' is not found within the 'unknown' type

I've been struggling with this issue. After searching through various sources like stackoverflow and github, I attempted a solution which involved adding a generic but I encountered the error message Expected 0 type arguments, but got 1. in relation t ...

What is the recommended way to include @types/module in a TypeScript project?

Once I've added a module like @types/express using npm, how can I correctly reference it in typescript? I've tried the following methods: /// <reference path="../node_modules/@types/express/index.d.ts" /> but I still get an error sayin ...

How can we create external labels for a polar chart in ng2-charts and chart.js, with a set position outside the circular rings?

Currently, I am working on creating a polar chart using Angular along with chart.js version 2.8.0 and ng2-charts version 2.3.0. In my implementation, I have utilized the chartjs-plugin-datalabels to show labels within the polar chart rings. However, this p ...

Encountering an error when cleaning up an Angular component due to the unsubscribe process during

While testing a component that subscribes to router params, all tests pass and everything works smoothly. However, upon checking the console, there is an error message: Error during cleanup of component ApplicationViewComponent localConsole.(anonymous ...

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

In my Angular/typescript project, I am working on building a regex for a cluster endpoint that includes an IP address or hostname (FQDN) in a URL format. For instance: Example 1 - 10.210.163.246/k8s/clusters/c-m-vftt4j5q Example 2 - fg380g9-32-vip3-ocs.s ...

Utilize JSON configuration file to extract parameters for Protractor testing

Is there a way to access file values from protractor.config.ts without passing them as command line arguments? I have commented out the lines that attempt to read the files. protractor.config.ts import { } from 'jasmine'; import { Config } from ...

Implementing NestJS: Integrating TypeORM Datasource without relying on class dependency injection

I have a unique situation that requires some help. Our team is in the process of integrating nestjs into our current express codebase. Previously, we were using Typeorm 0.2 and recently upgraded to 0.3. Due to the fact that we utilize functions instead of ...

What is the reason behind the lack of covariance in an interface when using a type of T[keyof T]?

I'm attempting to enable type covariance so that Type<Cat> can be treated as a Type<Animal>, for instance, treating a list of Cats as a list of Animals. However, using the type T[keyof T] in a method within the Type interface seems to hind ...