Adjusting the selection in the Dropdown Box

I've been attempting to assign a value to the select box as shown below: 

  <dx-select-box
            [items]="reportingProject"
            id="ReportingProj"
            [text]="reportingProject"
            [readOnly]="true"
            >

The reportingProject variable is located in the Component like this:

constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) {
   debugger;
   this.reportingProject = this.pdComp.rProjectNumber;
   this.projectSalesOrder = this.pdComp.rSalesOrder;

Despite having data in the reportingProject variable, it doesn't display on the page and the selectbox always appears empty.

javascriptangulartypescriptangular7

Answer №1

Here is a suggested approach:

<dx-select-box id="myId" [items]="reportingProject" placeholder="my placeholder" [searchEnabled]="true" [(value)]="valueData" displayExpr="text" valueExpr="value" (onValueChanged)="onValueChange($event)">
</dx-select-box>

// Ensure that 'items' is an array or an array of objects
// Specify the 'displayExpr' as the key in the object to display in the selectbox
// Define the 'valueExpr' as the value for your selectbox

Answer №2

devexpress provides an Example that showcases how to use their select box component:

<dx-select-box
    [items]="simpleProducts"
    placeholder="Choose Product"
    [showClearButton]="true"
></dx-select-box>

The array simpleProducts contains strings representing different products:

let simpleProducts: string[] = [
    "HD Video Player",
    "SuperHD Video Player",
    "SuperPlasma 50",
    "SuperLED 50",
    "SuperLED 42",
    "SuperLCD 55",
    "SuperLCD 42",
    "SuperPlasma 65",
    "SuperLCD 70",
    "Projector Plus",
    "Projector PlusHT",
    "ExcelRemote IR",
    "ExcelRemote BT",
    "ExcelRemote IP"
];

To utilize this, you need to bind items to an array like this:

this.reportingProject = [this.pdComp.rProjectNumber];

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

Scope binding is successful, but accessing the array is only possible after adding an Alert() function

Within my Angular controller, I'm utilizing the SharePoint JavaScript Object Model to fetch data from the Taxonomy (term store). Due to SharePoint's JSOM not being a conventional Angular function that can be easily understood by the scope, I util ...

javascriptarraysangularjssharepoint

"Unleashing the power of custom servers to tap into the rendered HTML of Next

In my quest to serve a server-side generated page as a file using next.js, I decided to extract the rendered content within a custom server.js file: const express = require('express'); const next = require('next'); const port = parseIn ...

javascriptnext.jsserver-side-rendering

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...

javascriptamazon-web-servicesnpmaws-amplifyjslint

Requesting data through AngularJS2 HTTP call results in the return of complete PHP code

I am currently facing an issue where my http AJAX call to a local PHP file is echoing the complete PHP code. Since I am new to AngularJS2, I would appreciate some help. Here is the snippet of my AngularJS2 code: makeHttpCall():Promise<any>{ ret ...

phpajaxhttpangular

How to fetch React route parameters on the server-side aspect

I encountered a challenge while working with ReactJS and ExpressJS. The user uploads some information on the /info route using React and axios. Then, the user receives route parameters from the server side to redirect to: axios.post('/info', Som ...

javascriptnode.jsregexreactjsexpress

What is the best way to iterate through a JSON file?

Looking at my JSON file: { "stats": { "operators": { "recruit1": { "won": 100, "lost": 50, "timePlayed": 1000 }, "recruit2": { "won": 200, ...

javascript

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

In a Javascript scenario, only the initial button can successfully submit to an Ajax form even when having unique

Similar issues have been reported by other users when looping rows of buttons, often due to inadvertently reusing the same Id or value. I am facing a similar issue, but each of my buttons is unique. AJAX request <script> $(document ...

javascriptphpjqueryajax

What is the best approach for presenting MySQL data on an HTML div through Node.js?

When working with Node.js, I prefer using Express as my framework. Here is the AJAX code I have on my member.ejs page: function load_member(){ $.ajax({ url: '/load_member', success: function(r){ console.lo ...

javascriptnode.jsexpress

When attempting to register a custom Gamepad class using GamepadEvent, the conversion of the value to 'Gamepad' has failed

I have been working on developing a virtual controller in the form of a Gamepad class and registering it. Currently, my implementation is essentially a duplicate of the existing Gamepad class: class CustomController { readonly axes: ReadonlyArray<nu ...

javascripttypescriptgamepad

Issue with Angular polyfill in IE11: The core-js version 3.6.5 method es.string.split.js is having trouble parsing the regex /^|s+/ when used with

Angular 10, d3 5.16.0, and core-js 3.6.5 In the midst of it all, d3-drag triggers d3-dispatch, which in turn invokes a function called .parseTypenames. function parseTypenames(typenames, types) { return typenames.trim().split(/^|\s+/).map(functio ...

angularinternet-explorer-11polyfillscore-js

Tips for automatically updating a start and end page input field

In my project, I am working with a list of start and end page numbers using angularJS forms. One specific feature I want to implement is the automatic updating of start page values based on the previous end page. For example, if a user enters '4' ...

javascriptangularjsforms

Create a dynamic HTML page using JavaScript

When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...

javascripthtmlcss

JavaScript: a highly effective method for verifying if a variable is a function, an array, or an object

Imagine a scenario where we have a variable that could potentially be a function, object, or array. I am in search of the most efficient method to determine its type. In my opinion, the current approach is not optimized because if I already know that isF ...

javascript

RxJS: the art of triggering and handling errors

This is more of a syntax question rather than a bug I'm facing. The process is straightforward: Send an HTTP request that returns a boolean value If the boolean is true, proceed If the boolean is false, log a warning and stop the flow. To handle ...

angulartypescriptrxjsrxjs-pipeable-operators

Issue with getStaticProps in Next.js component not functioning as expected

I have a component that I imported and used on a page, but I'm encountering the error - TypeError: Cannot read property 'labels' of undefined. The issue seems to be with how I pass the data and options to ChartCard because they are underline ...

javascriptreactjstypescriptnext.js

How can data be transferred between controllers in Angular 2 without using URL parameters or the $state.go() function?

I've encountered an issue where I need to pass a parameter from one controller to another without it being visible in the URL. I attempted to do so with the following code: this.router.navigate(['/collections/'+this.name], {id: this.id}); ...

angulartypescriptangular2-routing

JavaScript heap running out of memory after upgrading from Angular 11 to versions 12, 13, or 14

I need assistance with resolving a JS heap out of memory issue that has been occurring when trying to start the local server ever since migrating from Angular 11 to Angular 12 (or 13 or 14, all versions tested with the same problem). This occurs during th ...

javascriptnode.jsangulartypescriptnpm

Utilizing X-editable and Parsley to trigger dual Ajax calls

Here is a snippet of code I am working with: $.fn.editable.defaults.mode = 'inline'; var editable = $('.x-editable').editable({ send: 'always', validate: function() { var form = editable.next().find('form ...

javascriptjqueryajaxx-editableparsley.js

Here is a way to prevent a null input value from being accepted in a JavaScript function

Hey there, I have a function that looks like this: class Fun { pem_Files_Checker_And_Adder_Server_Id_Adder(id , serverType , hostname) { //do something }; }; } In order for this function to work properly, I need to give it some values. For exam ...

javascriptnode.js