What is the best way to position the dx-button next to the dxo-export?

Incorporating the export-button/dxo-export into the dx-data-grid component poses a challenge. I aim to have two dx-buttons alongside the dxo-export button, all aligned to the right and on the same line. https://i.sstatic.net/kxy4H.png

Upon examining my code, it appears that the dx-button elements are situated outside of the dx-data-grid container. This may be why they are not aligning as intended.

  <dx-button id="gridRealistSelected" 
    icon="fas fa-clipboard-check" 
    [height]="34" [width]="40">
  </dx-button>
  <dx-button id="gridSharePlan" 
    icon="fa fa-share-alt" 
    [height]="34" [width]="40">
  </dx-button>

  <dx-data-grid id="gridContainer" 
    keyExpr="id"
    [dataSource]="shoppingPlan">

    <dxo-export 
      fileName="Rencana Belanja"
      [enabled]="true"  
      [allowExportSelectedData]="false">
    </dxo-export>

    <dxi-column 
      dataField="ket" 
      caption="Keterangan">
    </dxi-column>
    <dxi-column 
      dataField="harga" 
      caption="Harga">
    </dxi-column>
  </dx-data-grid>
angulartypescriptdevextremedevextreme-angulardx-data-grid

Answer №1

  onToolbarPreparing(e){
    this.gridElement = e.element;
    this.toolbarItems = e.toolbarOptions.items;

    this.toolbarItems.unshift({
      name: 'customPlanButton',
      location: 'after',
      widget: 'dxButton',
      options: {
        hint: 'Custom Plan Button',
        icon: 'far fa-check-square',
        onClick: this.customPlan.bind(this)
      }
    },{
      name: 'customizeButton',
      location: 'after',
      widget: 'dxButton',
      options: {
        hint: 'Customize Button',
        icon: 'fa fa-edit',
        onClick: this.customize.bind(this)
      }
    });
  }

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

What is the method for showing a collection of items divided by commas on the console screen?

I am struggling to format my data output in the console. I want it to look like this: [ {id: 1, text: 'Sentence 1'}, {id: 2, text: 'Sentence 2'}, {id: 3, text: 'Sentence 3'}, {id: 4, text: 'Sentenc4 &ap ...

angular

Filtering strings with the same suffix

Here is a code snippet I am working with: type RouterQuery = keyof AppRouter['_def']['queries']; This code defines the following type: type RouterQuery = "healthz" | "post.all" | "post.byId" | "catego ...

typescript

Transforming an object into an interface in TypeScript

Recently, I have started learning Typescript and am currently working on a project where I am building a REST API. In this project, I have defined a specific model for my request payload. However, even after typecasting, the type of 'resObj' rem ...

node.jstypescriptrestexpressbackend

Mastering regular expressions in TypeScript

My goal is to perform linting on staged files that are either .ts or .tsx and located within the src folder. I am aware that for selecting all js files one can use "*.js": [--list of commands--] inside the lint staged property. I'm curious to learn m ...

javascriptnode.jsregextypescriptpackage.json

Experiencing difficulties in constructing a project through Angular-CLI on a Windows operating system

Encountering an error while attempting to install angular-cli with the command: npm install -g angular-cli The error message received is as follows: npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\\Program Files\\nodejs\\n ...

angularjsnode.jsangularnpm

The custom native date adapter is facing compatibility issues following the upgrade of Angular/Material from version 5 to 6

In my Angular 5 application, I had implemented a custom date adapter as follows: import {NativeDateAdapter} from "@angular/material"; import {Injectable} from "@angular/core"; @Injectable() export class CustomDateAdapter extends NativeDateAdapter { ...

angulartypescriptangular-materialangular-material2angular-material-6

Angular does not require explicit closing tags in HTML

This is specified for Angular users. Answers related to Angular1 are not needed. The issue I am facing can be simplified as follows (the content is generated dynamically and can vary): <span [innerHTML]="'<p>hello there'"></span& ...

angular

What is the proper way to implement a class decorator in TypeScript?

How can a class decorator be implemented to accept only specific classes? A attempted solution is as follows: class Component { age: number; } function registerComponent(name: string) { return <T extends Component>(constructor: T): T => { ...

typescript

Is there a way to carry out tests on keydown events within Jasmine by specifying the keyCode within an Angular2+

I am working on a project where I need to trigger keydown events on an <input> field. Tools Used Karma v1.7.1 as the test runner Tests running on Chrome browser Using Angular 5 framework Any insights on how I can achieve this? ...

angulartypescriptjasmineangular5karma-runner

Module `coc-tsserver` not found (error ts2307)

https://i.sstatic.net/k1MVW.png Working on a project using NeoVim with CoC for TypeScript development in a yarn-3 pnp-enabled environment. Suddenly, the editor stopped recognizing imports and started showing errors for non-existent modules (refer to the s ...

typescriptneovimcoc.nvimyarnpkg-v3

Arranging an array of objects in Javascript based on the first attribute, and in cases of equality, sorting with another attribute

I have an array structured like this: let myarr = [{id:1 , name: "mark" , birthday: "1990-08-18"}, {id:2 , name: "fred" , birthday: "1990-08-17"}, {id:3 , name: "franck" , birthday: "1990-08-16"}, ...

javascripttypescriptecmascript-6ecmascript-5

Ignoring the no-unused-vars rule from StandardJS even though variables are being used

Within my Typescript React project, I have declared the following: export type NavState = { mounted: boolean } I then proceeded to use this within a component like so: import { NavState } from '../../models/nav' class Nav extends React.Compon ...

reactjstypescriptvisual-studio-codestandardjs

Issue: Unable to find solutions for all parameters in (?, ?)

Below is the unit test I've written for my Angular 10 component, which showcases a tree view with interactive features: import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/for ...

angulartypescriptjasminekarma-jasminekarma-runner

looping through a JSON array in angular

I am presented with a JSON string that appears as follows. { "testdata": [{ "id": 1, "name": "testname1 ", "description": "test description1" }, ...

htmljsonangularuser-interface

Generating instances of classes using variables in Typescript

Are there methods to modify the below piece of code in order for it to be compatible with Typescript? public shops: string[] = [ "AShop", "BShop", "CShop", ]; this.shops.forEach((shop, index) => { let instance = new window[shop](index ...

typescript

Determining the instance type of a TypeScript singleton class

I have a unique singleton implementation: class UniqueSingleton { private static instance: UniqueSingleton; private constructor() { // Only allows instantiation within the class } public static getInstance(): UniqueSingleton { if (!Unique ...

typescript

Vercel does not support Angular-router

I am currently working on deploying my serverless web MEAN application using Vercel. I have encountered an issue where accessing a route through the navigation menu works fine, but when trying to access the same route directly via http://vercel-dev/some- ...

angularexpressangular-ui-routervercel

In the vue3 v-for loop, the type of 'Item' is considered to be 'unknown'

https://i.sstatic.net/irjFP.png Currently, I am facing an issue with a v-for loop in my Vue3 + TypeScript project. The error message keeps appearing despite following the correct syntax for passing props to a component. I have included the relevant code s ...

javascripttypescriptvue.js

There seems to be a console error in Angular 5 when using IE 11

I've developed an Angular 4 application using MVC and Visual Studio 2015. Everything runs smoothly when I access the application on Chrome, but I encounter the following exception on IE 11: XHR error: (404 Not Found) loading http://localhost/src/ma ...

angulartypescriptinternet-explorer-11

Error message: "The function platform_browser_dynamic_1.bootstrap does not exist in Angular 2."

I had everything set up and running smoothly until suddenly I started receiving this error out of nowhere: TypeError: platform_browser_dynamic_1.bootstrap is not a function Here's the component I've been working on: import { Component, Input, ...

angularjsangular