jQWidgets Forums

jQuery UI Widgets Forums Search Search Results for 'Export to Image'

Viewing 15 results - 1 through 15 (of 177 total)
  • Author
    Search Results
  • #135626

    Topic: jqx chart export

    in forum Chart

    atomic
    Participant

    Hi,

    I have developer license and have set up export.php server, I managed to get png or jpeg export but when I try to access these images I get error format not supported.
    Any ideas would be appreciated.
    Best

    #135506

    jq-angular-try
    Participant

    Hello,

    We are evaluating jqWidgets for use in our web application.

    This is with jqwidgets-ng version 20.0.0 and Angular version 17.3.0 on Windows 10 with npm version 10.5.2 and node version v20.13.1

    When using the “Default Functionality” demo of the jqxDockingLayout, we encounter an error and the jqxDockingLayout breaks.

    Here is the error shown in the console:

    ERROR TypeError: Cannot read properties of undefined (reading ‘startsWith’)
    at e.<computed>._selectAt (jqxribbon.js:8:13154)
    at HTMLLIElement.r (jqxribbon.js:8:14890)
    at HTMLLIElement.dispatch (jqxcore.js:8:31926)
    at HTMLLIElement.bC (jqxcore.js:8:27114)
    at _ZoneDelegate.invokeTask (zone.js:402:33)
    at core.mjs:14556:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:14556:36)
    at _ZoneDelegate.invokeTask (zone.js:401:38)
    at Object.onInvokeTask (core.mjs:14869:33)
    at _ZoneDelegate.invokeTask (zone.js:401:38)

    This error occurs for any example we try to use of jqxDockingLayout, and as a result we are unable to use jqxDockingLayout at all.

    With the attached app.component files below, when the page is opened, try to switch between the “Document 1” and “Document 2” tabs, and you should encounter the script error.

    Here are our files to replicate the issue in a small sample project:

    app.component.html

    <jqxDockingLayout #dockingLayoutReference [width]="getWidth()" [height]='600' [layout]='layout'>
      <!--The panel content divs can have a flat structure-->
      <!--autoHideGroup-->
      <div data-container="ToolboxPanel">
        List of tools
      </div>
      <div data-container="HelpPanel">
        Help topics
      </div>
      <!--documentGroup-->
      <div data-container="Document1Panel">
        Document 1 content
      </div>
      <div data-container="Document2Panel">
        Document 2 content
      </div>
      <!--bottom tabbedGroup-->
      <div data-container="ErrorListPanel">
        List of errors
      </div>
      <!--right tabbedGroup-->
      <div data-container="SolutionExplorerPanel">
        <div id="treeContainer" style="border: none;"></div>
      </div>
      <div data-container="PropertiesPanel">
        List of properties
      </div>
      <!--floatGroup-->
      <div data-container="OutputPanel">
        <div style="font-family: Consolas;">
          <p>
            Themes installation complete.
          </p>
          <p>
            List of installed stylesheet files. Include at least one stylesheet Theme file and
            the images folder:
          </p>
          <ul>
            <li>
              styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
              be always included in your project.
            </li>
            <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
            <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
            <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
          </ul>
        </div>
      </div>
    </jqxDockingLayout>

    app.component.ts

    import { Component } from '@angular/core';
    import { RouterOutlet } from '@angular/router';
    import { CommonModule } from '@angular/common';
    import { jqxDockingLayoutModule } from 'jqwidgets-ng/jqxdockinglayout'
    import { jqxTreeModule } from 'jqwidgets-ng/jqxtree'
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [RouterOutlet, CommonModule, jqxDockingLayoutModule, jqxTreeModule],
      templateUrl: './app.component.html',
      styleUrl: './app.component.css'
    })
    export class AppComponent {
      title = 'jqw-docking-layout';
      layout: any[] = this.generateLayout();
      getWidth(): any {
        if (document.body.offsetWidth < 800) {
          return '90%';
        }
    
        return 800;
      }
      generateLayout(): any[] {
        let layout = [
          {
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
              type: 'autoHideGroup',
              alignment: 'left',
              width: 80,
              unpinnedWidth: 200,
              items: [{
                type: 'layoutPanel',
                title: 'Toolbox',
                contentContainer: 'ToolboxPanel'
              }, {
                type: 'layoutPanel',
                title: 'Help',
                contentContainer: 'HelpPanel'
              }]
            },
            {
              type: 'layoutGroup',
              orientation: 'vertical',
              width: 500,
              items: [{
                type: 'documentGroup',
                height: 400,
                minHeight: 200,
                items: [{
                  type: 'documentPanel',
                  title: 'Document 1',
                  contentContainer: 'Document1Panel'
                },
                {
                  type: 'documentPanel',
                  title: 'Document 2',
                  contentContainer: 'Document2Panel'
                }]
              },
              {
                type: 'tabbedGroup',
                height: 200,
                pinnedHeight: 30,
                items: [{
                  type: 'layoutPanel',
                  title: 'Error List',
                  contentContainer: 'ErrorListPanel'
                }]
              }]
            },
            {
              type: 'tabbedGroup',
              width: 220,
              minWidth: 200,
              items: [
                {
                  type: 'layoutPanel',
                  title: 'Solution Explorer',
                  contentContainer: 'SolutionExplorerPanel',
                  initContent: () => {
                    // initialize a jqxTree inside the Solution Explorer Panel
                    let source = [{
                      label: 'Project',
                      expanded: true,
                      items: [
                        {
                          label: 'css',
                          expanded: true,
                          items: [{
                            label: 'jqx.base.css'
                          },
                          {
                            label: 'jqx.energyblue.css'
                          }, {
                            label: 'jqx.orange.css'
                          }]
                        },
                        {
                          label: 'scripts',
                          items: [{
                            label: 'jqxcore.js'
                          },
                          {
                            label: 'jqxdata.js'
                          }, {
                            label: 'jqxgrid.js'
                          }]
                        },
                        {
                          label: 'index.htm'
                        }]
                    }];
                    jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source })
                  }
                },
                {
                  type: 'layoutPanel',
                  title: 'Properties',
                  contentContainer: 'PropertiesPanel'
                }]
            }]
          },
          {
            type: 'floatGroup',
            width: 500,
            height: 300,
            position: {
              x: 350,
              y: 250
            },
            items: [{
              type: 'layoutPanel',
              title: 'Output',
              contentContainer: 'OutputPanel',
              selected: true
            }]
          }];
        return layout;
      }
    }
    
    #133856

    rmk3200
    Participant

    Module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { PrintDesignRoutingModule } from './print-design-routing.module';
    import { PrintDesignComponent } from './print-design.component';
    import { jqxSplitLayoutModule } from 'jqwidgets-ng/jqxsplitlayout';
    import { jqxTreeModule } from 'jqwidgets-ng/jqxtree';
    @NgModule({
      declarations: [
        PrintDesignComponent
      ],
      imports: [
        CommonModule,
        PrintDesignRoutingModule,
        jqxSplitLayoutModule,
        jqxTreeModule
      ]
    })
    export class PrintDesignModule { }
    

    Component

    import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
    import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
    @Component({
      selector: 'app-print-design',
      templateUrl: './print-design.component.html',
      styleUrls: ['./print-design.component.css'],
      encapsulation: ViewEncapsulation.None
    })
    export class PrintDesignComponent implements AfterViewInit{
      @ViewChild('myLayout', { static: false }) myLayout: jqxSplitLayoutComponent;
    
      dataSource = [
         {
           type: 'tabs',
           size: '80%',
           items: [
             {
               label: 'My Milan Notes',
               content: 

    <textarea class=”input”>The massive Cathedral of Santa Maria Nascente, which the Milanese call just “Il Duomo” is among the world’s largest (it holds up to 40,000 people) and most magnificent churches, the ultimate example of the Flamboyant Gothic style. It was begun in the 14th century, but its façade was not completed until the early 1800s, under Napoleon. The roof is topped by 135 delicately carved stone pinnacles and the exterior is decorated with 2,245 marble statues. The dim interior, in striking contrast to the brilliant and richly patterned exterior, makes a powerful impression with its 52 gigantic pillars. The stained-glass windows in the nave (mostly 15th-16th centuries) are the largest in the world; the earliest of them are in the south aisle. Highlights include the seven-branched bronze candelabrum by Nicholas of Verdun (c. 1200) in the north transept, the 16th-century tomb of Gian Giacomo Medici, and the jeweled gold reliquary of San Carlo Borromeo in the octagonal Borromeo Chapel leading off the crypt. Behind the high altar, the choir has deeply carved panels, and misericords under the seats.
    In the south sacristy is the treasury with gold and silver work dating from the fourth to the 17th century. A walk on the roof of the cathedral is an impressive experience, offering views across the city and extending on clear days to the snow-covered Alps. (An elevator ascends all but the last 73 steps to the platform of the dome). At the front of the Duomo, near the central doorway, you can descend under Piazza del Duomo into the foundations of the Basilica di Santa Tecla (fourth-fifth and seventh century) and the fourth-century baptistery, Battistero di San Giovanni alle Fonti, which were discovered during the construction of the Milan Metro system.
    </textarea>`
    },
    {
    label: “Milan City Map”,
    content: <div id="map"></div>
    }
    ]
    },
    {
    type: ‘tabs’,
    position: “right”,
    items: [
    {
    label: “Explorer”,
    content: <div id="tree"></div>
    },
    {
    label: “About Milan”,
    content: ` <p>
    Milan, a metropolis in Italy’s northern Lombardy region, is a global capital of fashion and design.
    Home to the national stock exchange, it’s a financial hub also known for its high-end restaurants
    and shops. The Gothic Duomo di Milano cathedral and the Santa Maria delle Grazie convent, housing
    Leonardo da Vinci’s mural “The Last Supper,” testify to centuries of art and culture.
    </p>`
    }
    ]
    }
    ]

    treeSource = [
    {
    icon: “https://www.jqwidgets.com/angular/images/mailIcon.png”, label: “Mail”, expanded: true, items: [
    { icon: “https://www.jqwidgets.com/angular/images/calendarIcon.png”, label: “Calendar” },
    { icon: “https://www.jqwidgets.com/angular/images/contactsIcon.png”, label: “Contacts”, selected: true }
    ]
    },
    {
    icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Inbox”, expanded: true, items: [
    { icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Admin” },
    { icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Corporate” },
    { icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Finance” },
    { icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Other” }
    ]
    },
    { icon: “https://www.jqwidgets.com/angular/images/recycle.png”, label: “Deleted Items” },
    { icon: “https://www.jqwidgets.com/angular/images/notesIcon.png”, label: “Notes” },
    { iconsize: 14, icon: “https://www.jqwidgets.com/angular/images/settings.png”, label: “Settings” },
    { icon: “https://www.jqwidgets.com/angular/images/favorites.png”, label: “Favorites” }
    ];

    setup(): void {
    const that = this;

    jqwidgets.createInstance(#tree, ‘jqxTree’, {
    source: that.treeSource
    });

    window[“initializeMaps”] = function () {
    new window[“google”].maps.Map(document.getElementById(‘map’), {
    center: new window[“google”].maps.LatLng(45.4642, 9.1900),
    zoom: 8,
    mapTypeId: window[“google”].maps.MapTypeId.ROADMAP
    });
    }

    const script = document.createElement(‘script’);
    script.type = ‘text/javascript’;
    script.src = ‘https://maps.googleapis.com/maps/api/js?key=AIzaSyDLNo8WFhrz_4zuLdl423WX9h5Kh0SedHQ&callback=initializeMaps’;
    document.body.appendChild(script);
    }

    ngAfterViewInit(): void {
    const that = this;

    if (document.readyState === “complete”) {
    that.setup();
    }
    else {
    window.onload = function() {
    that.setup();
    }
    }
    }
    }
    `
    Html

    <p>print-design works!</p>
    <jqxSplitLayout id=”layout” [dataSource]=”dataSource” #myLayout>
    </jqxSplitLayout>

    #133819

    rmk3200
    Participant

    Module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { PrintDesignerRoutingModule } from './print-designer-routing.module';
    import { jqxEditorModule } from 'jqwidgets-ng/jqxeditor';
    
    @NgModule({
      declarations: [],
      imports: [
        CommonModule, FormsModule, ReactiveFormsModule, jqxEditorModule,
        PrintDesignerRoutingModule]
    })
    export class PrintDesignerModule { }

    Html

    <jqxEditor [width]="getWidth()" [height]="400">
      <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea.
      <br />
      <br />
      Features include:
      <br />
      <ul>
      <li>Text formatting</li>
      <li>Text alignment</li>
      <li>Hyperlink dialog</li>
      <li>Image dialog</li>
      <li>Bulleted list</li>
      <li>Numbered list</li>
      </ul>
    </jqxEditor>
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-edit-print-designer',
      templateUrl: './edit-print-designer.component.html',
      styleUrls: ['./edit-print-designer.component.css']
    })
    export class EditPrintDesignerComponent {
      getWidth() : any {
    		if (document.body.offsetWidth < 850) {
    			return '90%';
    		}
    
    		return 850;
    	}
    }

    Issue:
    ‘jqxEditor’ is not a known element:
    1. If ‘jqxEditor’ is an Angular component, then verify that it is part of this module.
    2. To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.ngtsc(-998001)
    edit-print-designer.component.ts(3, 85): Error occurs in the template of component EditPrintDesignerComponent.

    #133592

    filipeds
    Participant

    Hi Peter, sorry for the delay in reply.

    Even after removing the duplicated call and not initializing the grid the problem still happens. Just loading the script.

    And when I try to export, I get a “Missing reference”.

    DevTools Error

    A strange thing I noticed looking deeper into the error was the several occurrences of the “X” word in the JS, as you can see below.

    Xs 1
    Xs 2


    kashehi
    Participant

    Hi,
    Thank you for your help.
    But I have another problem and not solved with your help.
    I create grid on my page and I want with first click post some Info of that row to API ,But with first click it send value=0 to API instead of real value,
    this is my code:
    below code is that component I create grid on it:
    import {React, useRef, useEffect, useState} from ‘react’
    import {MainGrid} from ‘../components/Grid’
    import Window from ‘../components/Windows’
    import contextApi from ‘../components/ContextApi’
    import {FetchLetters} from ‘../hooks/KartablHook’
    import {LetterAction} from ‘../components/Letter/LetterAction’
    import ViewParaphForm from ‘../components/Letter/ViewParaphForm’
    import JqxMenu from ‘../components/JqxMenu’
    import {MenuItems} from ‘../components/JqxMenu’
    export default function Kartabl() {
    const myGridRef = useRef(null)
    const contextMenu = useRef(null)
    const viewWindowRef = useRef(null)
    const deleteWindowRef = useRef(null)
    const editWindowRef = useRef(null)
    const viewParaphWindowRef = useRef(null)
    const [menuPostion, setMenuPosition] = useState(”)
    let [valueRow, getValue] = useState({
    LetterCode: 5365,
    LetterPostID: 22872,
    })
    let [type, setType] = useState(”)
    let [res, setResponse] = useState(”)
    let [rendered, setRendered] = useState(false)
    let isViewed = useState()

    //getgriddata
    const fetch = FetchLetters()

    //creategrid
    const source = {
    datafields: [
    {name: ‘IsViewed’, type: ‘string’},
    {name: ‘IsDone’, type: ‘bool’},
    {name: ‘ClosingType’, type: ‘bool’},
    {name: ‘IsReplicated’, type: ‘bool’},
    {name: ‘ReferedLetterId’, type: ‘bool’},
    {name: ‘LetterId’, type: ‘int’},
    {name: ‘LetterPostId’, type: ‘int’},
    {name: ‘Priority’, type: ‘int’},
    {name: ‘SendReceiveType’, type: ‘int’},
    {name: ‘ViewDateTime’, type: ‘string’},
    {name: ‘Number’, type: ‘string’},
    {name: ‘FormatNumber’, type: ‘string’},
    {name: ‘AddedDate’, type: ‘string’},
    {name: ‘SendReceiveDate’, type: ‘string’},
    {name: ‘ReferenceDate’, type: ‘string’},
    {name: ‘Subject’, type: ‘string’},
    {name: ‘SenderFullName’, type: ‘string’},
    {name: ‘RefererFullName’, type: ‘string’},
    {name: ‘Name’, type: ‘string’},
    {name: ‘LetterType’, type: ‘string’},
    {name: ‘ReplicateType’, type: ‘string’},
    {name: ‘Text’, type: ‘string’},
    {name: ‘IsFile’, type: ‘string’},
    {name: ‘paraph’, type: ‘string’},
    {name: ‘IsFavorite’, type: ‘string’},
    {name: ‘ReceiverFullName’, type: ‘string’},
    ],
    datatype: ‘json’,
    localdata: fetch,
    }
    const favoriterenderer = (row, datafield, value) => {
    const dataRecord = myGridRef.current.getrowdata(row)

    if (dataRecord.IsFavorite == ‘true’) {
    return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks-fill” title=”علامت گذاری شده” style=”font-size: 1.6rem; color: #E49B0F;line-height:normal;”></i></div>’
    } else {
    return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks” title=”علامت گذاری نشده” style=”font-size: 1.6rem; color: #3699ff;line-height:normal;”></i></div>’
    }
    }
    const filerenderer = (row, datafield, value) => {
    const dataRecord = myGridRef.current.getrowdata(row)
    if (dataRecord.IsFile == 1) {
    return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-paperclip” title=”پیوست دارد” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
    } else {
    return ‘<div style=”text-align:center;padding-top:5px” title=”پیوست ندارد”‘
    }
    }

    const viewerenderer = function (row, datafield, value) {
    const dataRecord = myGridRef.current.getrowdata(row)
    // اگر نامه مشاهده شده باشد
    if (value == ‘1’ && dataRecord.LetterType == ‘داخلی’) {
    return (
    ‘<div style=”text-align:center;padding-top:5px” title=”داخلی’ +
    dataRecord.ViewDateTime +
    ‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color:#ff8229 ;”></i></div>’
    )
    } else if (value == ‘1’ && dataRecord.LetterType == ‘وارده’) {
    return (
    ‘<div style=”text-align:center;padding-top:5px” title=”وارده ‘ +
    dataRecord.ViewDateTime +
    ‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
    )
    } else if (value == ‘1’ && dataRecord.LetterType == ‘صادره’) {
    return (
    ‘<div style=”text-align:center;padding-top:5px” title=”صادره ‘ +
    dataRecord.ViewDateTime +
    ‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
    )
    }
    // اگر نامه مشاهده نشده باشد
    if (value == ‘0’ && dataRecord.LetterType == ‘داخلی’) {
    return ‘<div style=”text-align:center;padding-top:5px” title=”داخلی ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #ff8229;”></i></div>’
    } else if (value == ‘0’ && dataRecord.LetterType == ‘وارده’) {
    return ‘<div style=”text-align:center;padding-top:5px” title=”وارده ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
    } else if (value == ‘0’ && dataRecord.LetterType == ‘صادره’) {
    return ‘<div style=”text-align:center;padding-top:5px” title=”صادره ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
    }
    }

    const actionrenderer = (row, datafield, value) => {
    return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-menu-down” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
    }
    // در صورتی که نامه پاراف داشته باشد
    const paraphrenderer = (row, datafield, value) => {
    const dataRecord = myGridRef.current.getrowdata(row)

    if (dataRecord.paraph != 0) {
    return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف دارد”><i class=”bi-card-list” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
    } else {
    return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف ندارد”‘
    }
    }

    const columns = [
    {text: ‘LetterPostId ‘, datafield: ‘LetterPostId’, hidden: true},
    {text: ‘IsDone ‘, datafield: ‘IsDone’, hidden: true},
    {text: ‘ClosingType ‘, datafield: ‘ClosingType’, hidden: true},
    {text: ‘IsReplicated ‘, datafield: ‘IsReplicated’, hidden: true},
    {text: ‘ReferedLetterId ‘, datafield: ‘ReferedLetterId’, hidden: true},
    {text: ‘LetterId ‘, datafield: ‘LetterId’, hidden: true},
    {text: ‘SendReceiveType ‘, datafield: ‘SendReceiveType’, hidden: true},
    {text: ‘ViewDateTime ‘, datafield: ‘ViewDateTime’, hidden: true},
    {text: ‘Number ‘, datafield: ‘Number’, hidden: true},
    {
    text: ‘متن’,
    datafield: ‘Text’,
    width: ’10 %’,
    cellsalign: ‘right’,
    editable: false,
    hidden: true,
    },
    {
    text: ‘تاریخ ایجاد’,
    datafield: ‘AddedDate’,
    width: ’10 %’,
    cellsalign: ‘center’,
    editable: false,
    hidden: true,
    },
    {
    text: ‘تاریخ ارسال’,
    datafield: ‘SendReceiveDate’,
    width: ’10 %’,
    cellsalign: ‘center’,
    editable: false,
    hidden: true,
    },
    {
    text: ‘دبیرخانه’,
    datafield: ‘Name’,
    width: ’10 %’,
    cellsalign: ‘center’,
    editable: false,
    hidden: true,
    },
    {
    text: ‘نوع’,
    datafield: ‘LetterType’,
    width: ‘10%’,
    cellsalign: ‘center’,
    editable: false,
    hidden: true,
    },
    {
    text: ”,
    datafield: ‘Action’,
    width: ‘4%’,
    cellsrenderer: actionrenderer,
    filterable: false,
    cellsalign: ‘center’,
    align: ‘center’,
    },
    {
    text: ”,
    datafield: ‘IsFavorite’,
    width: ‘4%’,
    cellsrenderer: favoriterenderer,
    filterable: false,
    cellsalign: ‘center’,
    },
    {
    text: ”,
    datafield: ‘paraph’,
    width: ‘4%’,
    cellsrenderer: paraphrenderer,
    filterable: false,
    cellsalign: ‘center’,
    },
    {
    text: ”,
    datafield: ‘IsFile’,
    width: ‘4%’,
    cellsrenderer: filerenderer,
    filterable: false,
    cellsalign: ‘center’,
    },
    {
    text: ”,
    datafield: ‘IsViewed’,
    width: ‘4%’,
    cellsrenderer: viewerenderer,
    filterable: false,
    cellsalign: ‘center’,
    },
    {
    text: ‘شماره نامه ‘,
    datafield: ‘FormatNumber’,
    width: ’10 %’,
    cellsalign: ‘center’,
    editable: false,
    align: ‘center’,
    },
    {
    text: ‘تاریخ ارجاع’,
    datafield: ‘ReferenceDate’,
    width: ’10 %’,
    cellsalign: ‘center’,
    editable: false,
    align: ‘center’,
    },
    {
    text: ‘موضوع’,
    datafield: ‘Subject’,
    width: ’25 %’,
    cellsalign: ‘right’,
    editable: false,
    align: ‘center’,
    },
    {
    text: ‘فرستنده نامه’,
    datafield: ‘SenderFullName’,
    width: ’15 %’,
    cellsalign: ‘right’,
    editable: false,
    align: ‘center’,
    },
    {
    text: ‘ارجاع دهنده نامه’,
    datafield: ‘RefererFullName’,
    width: ’15 %’,
    cellsalign: ‘right’,
    editable: false,
    align: ‘center’,
    },
    {
    text: ‘طبقه بندی’,
    datafield: ‘ReplicateType’,
    width: ‘5 %’,
    cellsalign: ‘right’,
    editable: false,
    align: ‘center’,
    },
    ]

    function CellGridKartableClick(event, row) {
    if (rendered == false) {
    return
    }
    setType(”)

    var column = event.args.column
    var rowindex = event.args.rowindex
    // var DoEvent = column.cellclassname;
    var datafield = column.datafield
    const dataRecord = myGridRef.current.getrowdata(rowindex)

    if (event.args.rightclick || datafield == ‘Action’) {
    setType(‘actionMenu’)
    setMenuPosition({
    clientX: event.args.originalEvent.clientX,
    clientY: event.args.originalEvent.clientY,
    })
    }
    if (datafield == ‘IsFavorite’) {
    setType(‘isFavorite’)
    getValue({
    letterCode: dataRecord.LetterId,
    Title: dataRecord.Subject,
    LetterPostId: dataRecord.LetterPostId,
    flagSendRecive: 1,
    })
    }
    if (datafield == ‘IsFile’) {
    const isFile = dataRecord.IsFile

    if (isFile == 1) {
    getValue({
    LetterCode: dataRecord.LetterId,
    LetterPostID: dataRecord.LetterPostId,
    AccountId: 4,
    })
    setType(‘isFile’)
    }
    }
    if (datafield == ‘IsViewed’) {
    isViewed = dataRecord.IsViewed

    setType(‘isViewed’)

    getValue({
    LetterCode: dataRecord.LetterId,
    LetterPostID: dataRecord.LetterPostId,
    AccountId: 4,
    IsView: dataRecord.IsViewed,
    Number: dataRecord.Number,
    LetterViewCode: dataRecord.FormatNumber,
    Date1: dataRecord.AddedDate,
    ReciveDate: dataRecord.ReferenceDate,
    Lettre_Post_Sender: dataRecord.SenderFullName,
    Lettre_Post_Reciver: dataRecord.ReceiverFullName,
    Letter_Type: dataRecord.ReplicateType,
    Letter_Priority: dataRecord.Priority,
    Letter_SendReceiveType: dataRecord.SendReceiveType,
    Subject: dataRecord.Subject,
    Text: dataRecord.Text,
    })
    console.log(‘getval’, valueRow)
    }
    if (datafield == ‘paraph’) {
    const isParaph = dataRecord.paraph

    if (isParaph == 1) {
    getValue({
    LetterCode: dataRecord.LetterId,
    })
    setType(‘paraph’)
    }
    }
    }

    function openWindow() {
    viewWindowRef.current.open()
    }

    function closeWindow() {
    setType(”)
    viewWindowRef.current.close()
    }
    function cancelEdit() {
    setType(”)

    editWindowRef.current.close()
    }
    function cancelDelete() {
    setType(”)
    deleteWindowRef.current.close()
    }

    useEffect(() => {
    setRendered(true)
    })

    return (
    <div>
    <contextApi.Provider
    value={{
    isViewed,
    menuPostion,
    contextMenu,
    res,
    setResponse,
    openWindow,
    viewParaphWindowRef,
    viewWindowRef,
    valueRow,
    type,
    }}
    >
    <MainGrid
    ref={myGridRef}
    source={source}
    columns={columns}
    CellGridKartableClick={CellGridKartableClick}
    />
    <Window ref={viewWindowRef} title={‘مشاهده’}>
    <LetterAction />
    </Window>
    {/* <Window ref={viewParaphWindowRef} title={‘مشاهده پاراف ها’}>
    <ViewParaphForm />
    </Window > */}
    <JqxMenu ref={contextMenu}>
    <MenuItems />
    </JqxMenu>
    </contextApi.Provider>
    </div>
    )
    }

    this code is my code that I post data to custom hook:
    import {useContext, useEffect, useState} from ‘react’
    import {ViewLetter} from ‘../../hooks/KartablHook’
    import {ViewLetterForm} from ‘./ViewLetterForm’
    import {useFetchImageLetter} from ‘../../hooks/KartablHook’
    import contextApi from ‘../ContextApi’
    import {UpdateFavorite} from ‘../../hooks/KartablHook’
    import {FetchAttachFileLetter} from ‘../../hooks/KartablHook’
    export const LetterAction = () => {
    const viewLetter = ViewLetter()
    const {isViewed, valueRow, type, viewWindowRef, contextMenu, menuPostion} = useContext(contextApi)
    console.log(‘valll’, valueRow)
    const [valueInfo, setValueInfo] = useState(valueRow)
    const {mutateAsync: fetchImageLetter, data} = useFetchImageLetter(valueInfo)

    const [dataInfo, setData] = useState(data)

    const updateFavorite = UpdateFavorite()
    const fetchAttachFileLetter = FetchAttachFileLetter()
    // برای اینکه در ابتدای لود ممکن است مقدار متغییر undefiend باشد
    //این کد نوشته شده است
    useEffect(() => {
    if (data !== undefined && dataInfo === undefined) {
    setData(data)
    }
    }, [data])

    useEffect(() => {
    if (type === ‘isFavorite’) {
    updateFavorite(valueRow)
    }

    if (type === ‘actionMenu’) {
    const scrollTop = window.scrollY
    const scrollLeft = window.scrollX

    contextMenu.current.open(
    parseInt(menuPostion.clientX, 10) + 5 + scrollLeft,
    parseInt(menuPostion.clientY, 10) + 5 + scrollTop
    )
    }
    }, [valueRow, type])

    useEffect(() => {
    if (type === ‘isViewed’ || type === ‘isFile’) {
    console.log(‘valueeffect’, valueRow)
    // if (valueRow !== undefined && valueInfo === undefined) {
    console.log(‘valueeffect’, valueRow)
    setValueInfo(valueRow)
    // viewLetter(valueRow)
    fetchImageLetter()
    // }
    viewWindowRef.current.open()
    // if (isViewed != 1) {
    // viewLetter(valueRow)
    // }

    // fetchAttachFileLetter(valueRow)
    }
    }, [type, valueRow])
    return <ViewLetterForm data={dataInfo} />
    }


    this is my custom hook code:

    import {React, useRef, useEffect, useState, createContext, useContext} from ‘react’
    import {useQuery, useMutation, QueryClient, useQueryClient} from ‘react-query’
    import {get, post} from ‘../components/Fetch’
    import contextApi from ‘../components/ContextApi’
    import {AddCompany} from ‘../components/Company/AddCompany’
    import {ViewLetterForm} from ‘../components/Letter/ViewLetterForm’

    export const FetchLetters = () => {
    const {data} = useQuery(‘Letters’, () => {
    return get(‘http://localhost:59521/api/Letters/SelectLetterForKartable’)
    })

    return data
    }

    export const UpdateFavorite = (addData) => {
    let [postData, setDate] = useState()

    const updateFavorite = useMutation(
    () => {
    return post(‘http://localhost:59521/api/Favorites/UpdateFavorite’, postData)
    },
    {
    onSuccess: () => {
    alert(‘ با موفقیت ثبت شد’)
    },
    onError: () => {
    alert(‘ثبت با خطا مواجه شد’)
    },
    onSettled: () => {},
    }
    )

    const favoriteRow = (addData) => {
    updateFavorite.mutate((postData = addData))
    }

    return favoriteRow
    }

    export const ViewLetter = (addData) => {
    const {openWindow, viewWindowRef, onViewButtonClick, editWindowRef, deleteWindowRef, cancelEdit} =
    useContext(contextApi)
    const [Ref, SetRef] = useState(”)
    let [postData, setDate] = useState()

    const viewLetter = useMutation(
    () => {
    return post(‘http://localhost:59521/api/LetterViews/ViewLetter’, postData)
    },
    {
    onSuccess: () => {},
    onError: () => {
    alert(‘مشاهده نامه با خطا مواجه شد’)
    },
    onSettled: () => {},
    }
    )

    const viewFlag = (addData) => {
    viewLetter.mutate((postData = addData))
    }

    return viewFlag
    }

    export const useFetchImageLetter = (addData) => {
    // let [postData, setDate] = useState()
    console.log(‘setvaluehook’, addData)
    // if (addData !== undefined) {
    const fetchImageLetter = useMutation(
    () => {
    return post(‘http://localhost:59521/api/Files/SelectImageLetterByID_Html’, addData)
    },

    {
    onSuccess: (response) => {
    console.log(‘res’, response)
    const result = response.split(‘;’)

    // if (result[0] != ”) {
    // setResponse({
    // path: result[0] + ‘.pdf’,
    // desc: result[2],
    // })
    // }
    },
    onError: () => {
    // alert(“مشاهده نامه با خطا مواجه شد”);
    },
    onSettled: () => {},
    }
    )
    return fetchImageLetter
    // }
    }

    export const FetchAttachFileLetter = (addData) => {
    const {res, setResponse} = useContext(contextApi)
    let [postData, setDate] = useState()
    const [state, setstate] = useState()

    const fetchAtatchFileLetter = useMutation(
    () => {
    return post(‘http://localhost:59521/api/Files/SelectFilesByID’, postData)
    },
    {
    onSuccess: (response) => {
    const strUrl =
    ‘http://’ + window.location.hostname + ‘:’ + window.location.port + ‘/UploadFiles/’
    if (response != ”) {
    let loopData = []
    const data = response.split(‘<‘)

    for (var i = 0; i < data.length; i++) {
    var res = data[i].split(‘;’)
    var Path = res[0]
    var lowerCaseValue = res[1].toString().toLowerCase()
    var DateTimeInsert = res[2]
    var filename = res[3]
    var Type = lowerCaseValue
    // var src = “../../images/IconAtachment/unknownFile.png”;
    var str = ”
    var name = Math.random()
    var IdLetterRefrence = res[4]
    var IdLetter = res[5]
    var Size = res[6]
    var LetterPostId = res[7]
    loopData.push(strUrl + Path + ‘.’ + Type)
    // loopData +=

  • ${strUrl + Path + ‘.’ + Type}
  • }

    setstate(loopData)
    }
    },
    onError: () => {
    // alert(“مشاهده نامه با خطا مواجه شد”);
    },
    onSettled: () => {},
    }
    )

    const fetchFile = (addData) => {
    fetchAtatchFileLetter.mutate((postData = addData))
    }

    return fetchFile
    }

    woul you please help me what should I do?
    Thank you

#132161

Topic: jqxgrid cellclick event

in forum React

kashehi
Participant

Hi,
I have one functional component that create grid, in that grid I have multiple image column and I want after click on each image do somthing, but I dont know how can I use
componentDidMount() {
this.refs.myGrid.on(‘cellclick’, (event) => {
// Do Something…
});
}
in functional component, Would you please help me?
this is my code:
my grid:
import { React,forwardRef } from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’;
import JqxGrid, { jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’;
export const MainGrid = forwardRef((props, ref) => (

<JqxGrid
ref={ref}
width={‘100%’}
height={‘100%’}
source={new jqx.dataAdapter(props.source)}
columns={props.columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
// editable={true}
selectionmode={‘singlecell’}
theme={‘energyblue’}
pagesizeoptions={[’15’, ’30’, ’50’]}
filterable={true}
autoloadstate={true}
autosavestate={true}
showfilterrow={true}
cellclick={props.cellclick}

/>
))

this is my component code that use that grid:
import { React, useRef, useEffect, useState, } from ‘react’;
// import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
// import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import { MainGrid } from ‘../components/Grid’;
import Window from ‘../components/Windows’;
import Button from ‘../components/Buttons’;
import contextApi from ‘../components/ContextApi’;
import { FetchLetters } from ‘../hooks/KartablHook’;

export default function Kartabl() {

const myGridRef = useRef(null);
const createWindowRef = useRef(null);
const deleteWindowRef = useRef(null);
const editWindowRef = useRef(null);
let [valueRow, getValue] = useState();
let [type, setType] = useState();
//getgriddata
const fetch = FetchLetters();
//creategrid
const source = {
datafields: [
{ name: ‘IsDone’, type: ‘bool’ },
{ name: ‘ClosingType’, type: ‘bool’ },
{ name: ‘IsReplicated’, type: ‘bool’ },
{ name: ‘ReferedLetterId’, type: ‘bool’ },
{ name: ‘LetterId’, type: ‘int’ },
{ name: ‘Priority’, type: ‘int’ },
{ name: ‘SendReceiveType’, type: ‘int’ },
{ name: ‘ViewDateTime’, type: ‘string’ },
{ name: ‘Number’, type: ‘string’ },
{ name: ‘FormatNumber’, type: ‘string’ },
{ name: ‘AddedDate’, type: ‘string’ },
{ name: ‘SendReceiveDate’, type: ‘string’ },
{ name: ‘ReferenceDate’, type: ‘string’ },
{ name: ‘Subject’, type: ‘string’ },
{ name: ‘SenderFullName’, type: ‘string’ },
{ name: ‘RefererFullName’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘LetterType’, type: ‘string’ },
{ name: ‘ReplicateType’, type: ‘string’ },
{ name: ‘Text’, type: ‘string’ },

],
datatype: ‘json’,
localdata: fetch

}
const imagerenderer = (row, datafield, value) => {
return ‘‘;
};
const columns = [
{ text: ‘IsDone ‘, datafield: ‘IsDone’, hidden: true },
{ text: ‘ClosingType ‘, datafield: ‘ClosingType’, hidden: true },
{ text: ‘IsReplicated ‘, datafield: ‘IsReplicated’, hidden: true },
{ text: ‘ReferedLetterId ‘, datafield: ‘ReferedLetterId’, hidden: true },
{ text: ‘LetterId ‘, datafield: ‘LetterId’, hidden: true },
{ text: ‘SendReceiveType ‘, datafield: ‘SendReceiveType’, hidden: true },
{ text: ‘ViewDateTime ‘, datafield: ‘ViewDateTime’, hidden: true },
{ text: ‘Number ‘, datafield: ‘Number’, hidden: true },
{ text: ‘متن’, datafield: ‘Text’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘تاریخ ایجاد’, datafield: ‘AddedDate’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘تاریخ ارسال’, datafield: ‘SendReceiveDate’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘دبیرخانه’, datafield: ‘Name’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘نوع’, datafield: ‘LetterType’, width: ‘10%’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ”, datafield: ‘IsFavorite’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘Action’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘IsFile’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘paraph’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘IsViewed’, width: ‘4%’, cellsrenderer: imagerenderer,filterable:false, },
{ text: ‘شماره نامه ‘, datafield: ‘FormatNumber’,width: ’10 %’, cellsalign: ‘right’, editable: false},
{ text: ‘تاریخ ارجاع’, datafield: ‘ReferenceDate’, width: ’10 %’, cellsalign: ‘right’, editable: false },
{ text: ‘موضوع’, datafield: ‘Subject’, width: ’25 %’, cellsalign: ‘right’, editable: false },
{ text: ‘فرستنده نامه’, datafield: ‘SenderFullName’, width: ’15 %’, cellsalign: ‘right’, editable: false },
{ text: ‘ارجاع دهنده نامه’, datafield: ‘RefererFullName’, width: ’15 %’, cellsalign: ‘right’, editable: false },
{ text: ‘طبقه بندی’, datafield: ‘ReplicateType’, width: ‘5 %’, cellsalign: ‘right’, editable: false },

];

function onCreateButtonClick() {
createWindowRef.current.open()
}

function onDeleteButtonClick() {
deleteWindowRef.current.open()
}

function cancelEdit() {

setType(”);

editWindowRef.current.close()
}
function cancelDelete() {
setType(”);
deleteWindowRef.current.close()
}

return (
<div>
<contextApi.Provider value={{ createWindowRef, editWindowRef, deleteWindowRef, valueRow, type, cancelEdit, cancelDelete }} >
<MainGrid ref={myGridRef} source={source} columns={columns} />

</contextApi.Provider>

</div >

)
}

#130986

jqwidgetsdev
Participant

Hi,

Is there a way to have images in jqxForm’s dropdownlist?
Then I also like to know how to default to a specific item.

Here is my example

<template>
  <JqxForm
    ref="myForm"
    style="width: '100%'; height: '100%'"
    :template="template"
    :value="value"
  >
  </JqxForm>
</template>

<script>
import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";

export default {
  components: {
    JqxForm
  }
  ,mounted() {
  }
  ,methods:{
  }
  ,data() {
    return {
      template: [
        {
          bind: "x",
          type: "option",
          label: "my label",
          labelPosition: "left",
          labelWidth: "30%",
          align: "left",
          width: "250px",
          component: "jqxDropDownList",
          source: [
            { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/numberinput.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxNumberInput</span></div>', title: 'jqxNumberInput' },
            { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/progressbar.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxProgressBar</span></div>', title: 'jqxProgressBar' },
            { html: '<div style="height: 20px; float: left;"><img style="float: left; margin-top: 2px; margin-right: 5px;" src="../../../images/calendar.png"/><span style="float: left; font-size: 13px; font-family: Verdana Arial;">jqxCalendar</span></div>', title: 'jqxCalendar' },
          ]
        },
      ]
      ,value: {
        x: how to default to 2nd item in list?
      }
    }
  }
}
</script>

Thank you.

#130949

Topic: image on grid not shown

in forum React

kashehi
Participant

Hi, I have a component with grid like this code:
import React ,{ useRef } from “react”;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import JqxGrid, {
IGridProps,
jqx,
} from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
import { GetCompanies } from ‘../components/companydata’

export class BindCompany extends React.PureComponent {
myGrid = React.createRef(JqxGrid);
constructor(props) {
super(props);

const source = {
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘AdminFullName’, type: ‘string’ },
{ name: ‘edit’, type: ‘bool’ },
{ name: ‘delete’, type: ‘bool’ },

],
datatype: “json”,

};
const editrenderer = (row, datafield, value) => {
return ‘‘;
};
const delrenderer = (row, datafield, value) => {
return ‘‘;
};
this.state = {
columns: [
{ text: “کد “, datafield: “Id”, hidden: true },
{ text: “نام شرکت”, datafield: “Name”, width: ‘40%’, cellsalign: ‘right’ },
{ text: “مدیر عامل”, datafield: “AdminFullName”, width: ‘40%’, cellsalign: ‘right’ },
{ text: “ویرایش”, datafield: “edit”, width: ‘10%’, cellsalign: ‘center’, cellsrenderer: editrenderer, editable:false },
{ text: “حذف”, datafield: “delete”, width: ‘10%’, cellsalign: ‘center’, cellsrenderer: editrenderer, editable: false },
],
dataSource: source,
source: new jqx.dataAdapter(source),

};

}

updateGrid = () => {
GetCompanies().then(data => {
this.state.dataSource.localdata = data;
this.myGrid.current.updatebounddata(‘sort’);
})
}

componentDidMount() {
GetCompanies().then(data => {
this.state.dataSource.localdata = data;
this.myGrid.current.updatebounddata(‘sort’);
})
}

render() {

return (
<div>

<JqxGrid ref={this.myGrid}
width={‘100%’}
height={‘100%’}
source={this.state.source}
columns={this.state.columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
editable={true}
onCellvaluechanged={this.onCellvaluechanged}
selectionmode={‘singlecell’}
theme={‘energyblue’}
/>

</div>

);
}
}

on two column I want show image, that was my code and I do not know why image is not show, would you please help me why is my problem?
thanks

#123762

sineticsoffice
Participant

Hello,

jqxWidgeVersion : 12.0.1

Normally,
jqxChart can exported as image.

$(‘#qcchart’).jqxChart(‘saveAsJPEG’, ‘myChart.jpeg’, getExportServer());

However,
When “annotations” was added ,
then call saveAsJPEG => nothing happened.

Sample code as below:
https://pastebin.com/YW5Naxma

Any suggestion?

#123735

kashehi
Participant

hi, I have two file , in one of them I write class for jqxwindow and in second one is class code for jqxbutton ,I have third file than in I should click on jqxbutton and then jqxwindow open. but I don know the code in third class Would you please help me?

first class code

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;

class WindowPopup extends React.Component {

constructor(props) {
super(props);

}
componentDidMount() {

}
render() {
return (
<JqxWindow ref=’jqxWindow’
width={‘40%’} height={‘40%’}
position={{ x: 60, y: 175 }}
showCollapseButton={true}
theme={‘energyblue’}
draggable={true}
resizable={true}
>
<div >
<span>

Header
</span>
</div>
<div style={{ overflow: ‘hidden’ }}>
Content
</div>
</JqxWindow>
)
}
}

export default WindowPopup;

second class code

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;
import WindowPopup from ‘../components/windowpopups’;
class Button extends React.PureComponent {

//jqxWindow = useRef(WindowPopup);
constructor(props) {
super(props);

this.state = {
//imgPosition: ‘center’,
//textImageRelation: ‘imageBeforeText’,
//textPosition: ‘left’,
value: “<span style={{ fontWeight: ‘bold’ }}>دکمه</span>”,
width: ‘5%’
// Other Widget Props
}
}

render() {
return (
<JqxButton
width={this.state.width}
height={this.state.height}
theme={‘energyblue’}
ref={this.textImageButton}
onClick={this.onClick}
rtl={true}
value={‘ایجاد’}
/>
)

}
onClick(Event) {
/* jqxWindow.current.open();*/
}
}

export default Button;

#122115

jqwidgetsdev
Participant

Hi,

Could use some help please. I am struggling with showing my grid’s toolbar in a tab.
I have tried to combine the two links, but something I don’t understand is causing this problem.

https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-toolbar.htm
https://www.jqwidgets.com/vue/vue-tabs/#https://www.jqwidgets.com/vue/vue-tabs/vue-tabs-integrationwithotherwidgets.htm

<template>
<div id="jqxWidget">
      <JqxTabs ref="myTabs"
           :width="'100%'" :initTabContent="initWidgets">
        <ul>
            <li style="margin-left: 30px;">
                <div style="height: 20px; margin-top: 5px;">
                    <div style="float: left;">
                        <img width="16" height="16" src="https://www.jqwidgets.com/vue/images/catalogicon.png" />
                    </div>
                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                        user
                    </div>
                </div>
            </li>
        </ul>
        <div style="overflow: hidden;">
            <div>
              <JqxGrid ref="myGridUser" :autoCreate="false"
                :width="'auto'" :columns="columns"
                :rendertoolbar="createButtonsContainers"
                :showtoolbar="true">
              </JqxGrid>
            </div>
        </div>
      </JqxTabs>
</div>
</template>
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
      components: {
          JqxTabs, JqxGrid
      },
      mounted: function () {
// doesn't work
          this.createButtons();
      },
      methods: {
            createButtonsContainers: function (toolbar) {
              console.log('createButtonsContainers');
              let buttonsContainer = document.createElement("div");
              buttonsContainer.style.cssText =
                "overflow: hidden; position: relative; margin: 5px;";
              let addButtonContainer = document.createElement("div");
              addButtonContainer.id = "addButton";
              addButtonContainer.style.cssText = "float: left; margin-left: 5px;";
              buttonsContainer.appendChild(addButtonContainer);
              toolbar[0].appendChild(buttonsContainer);
            },
            createButtons: function () {
              let addButtonOptions = {
                value: "Add"
              };
              let addButton = jqwidgets.createInstance(
                "#addButton",
                "jqxButton",
                addButtonOptions
              );
          },
          initWidgets: function (tab) {
              const cTabUser = 0;

              switch (tab) {
                  case cTabUser:
                      this.initGridUser();
                      break;
              }
          },
          initGridUser: function () {
              console.log('initGridUser');
              const source =
                  {
                    dataType: 'json',
                    dataFields: [
                      { name: 'name',  type: 'string' }
                    ],
                  id: 'name',
                  url: '../data/user.json'
                  };
              const dataAdapter = new jqx.dataAdapter(source);
              const settings = {
                  width: '100%',
                  height: '100%',
                  source: dataAdapter,
                  columns: [
                    { text: 'Name',  dataField: 'name', width: 120 }
                ]
              };
              const myGridUser = this.$refs.myGridUser.createComponent(settings);
          }
      }

  }
</script>
#121938

In reply to: bind react grid


kashehi
Participant

Thank you for your response, I edit my code according what you said but it is still load mygrid empty,
I am confused please help me to do that in right way.
this is my code
const source = {
datafields: [
{
name: “Tabageh”,
type: “string”,
},
{
name: “Univ”,
type: “string”
},
{
name: “SexGroup”,
type: “string”,
},
{
name: “CorseStatus”,
type: “string”
},
{
name: “CorseCode”,
type: “string”,
},
{
name: “CorseName”,
type: “string”
}
,
{
name: “CorseNoe”,
type: “string”
}

],
datatype: “json”,

localdata: GetCourseList(),

};

this.state = {
columns: [
{
text: “نام درس”,
datafield: “CorseName”,

}
,

{
text: “جنسیت”,
datafield: “SexGroup”,

}

,
{
text: “Tabageh”,
datafield: “Tabageh”,
hidden: true
},
{
text: “Univ”,
datafield: “Univ”,
hidden: true

}

,
{
text: “نوع درس”,
datafield: “CorseStatus”,

}

,
{
text: “CorseCode”,
datafield: “CorseCode”,
hidden: true
}

,

{
text: “CorseNoe”,
datafield: “CorseNoe”,

}
],
dataSource: source,
source: new jqx.dataAdapter(source),
};
}

export async function GetCourseList() {
const res = await fetch(‘Corse/GetCourseList’);
const data = await res.json();
return data
}

this is image url of my problem
https://ibb.co/MVZ368b

#121695

admin
Keymaster

Hi,

You can look at: https://www.jqwidgets.com/angular/angular-grid/angular-grid-widgetcolumn.htm?light

This is the code:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    source: any =
    {
        localdata: this.generateData(),
        datatype: 'array'
    }
    dataAdapter: any = new jqx.dataAdapter(this.source);
	getWidth() : any {
		if (document.body.offsetWidth < 850) {
			return '90%';
		}
		
		return 850;
	}
    counter: number = 1;
    columns: any[] =
    [
        {
            text: 'Picture', datafield: 'firstname', width: 100,
            createwidget: (row: number, column: any, value: string, htmlElement: HTMLElement): void => {
                const container = document.createElement('div');
                const id = <code>myButton${this.counter}</code>;
                container.id = id;
                container.style.border = 'none';
                htmlElement.appendChild(container);
                const imgurl = './../../../images/' + value.toLowerCase() + '.png';
                const options = {
                    width: '100%', height: 90, template: 'success',
                    imgSrc: imgurl, imgWidth: 40, imgHeight: 50, value: value,
                    imgPosition: 'center', textPosition: 'center', textImageRelation: 'imageAboveText'
                };
                const myButton = jqwidgets.createInstance(<code>#${id}</code>, 'jqxButton', options);
                myButton.addEventHandler('click', function (): void {
                    const currentButtonValue = this.children[1].innerHTML;
                    alert(currentButtonValue);
                });
                this.counter++;
            },
            initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {
                const imgurl = './../../../images/' + value.toLowerCase() + '.png';
                (<HTMLImageElement>htmlElement.children[1].children[0]).src = imgurl;
                htmlElement.children[1].children[1].innerHTML = value;
            }
        },
        { text: 'Name', datafield: 'name', width: 200 },
        { text: 'Title', datafield: 'title', width: 200 },
        { text: 'Country', datafield: 'country' }
    ];
    generateData(): any[] {
        let data = new Array();
        let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'];
        let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'];
        let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager', 'Sales Representative', 'Sales Representative', 'Inside Sales Coordinator', 'Sales Representative'];
        let titleofcourtesy = ['Ms.', 'Dr.', 'Ms.', 'Mrs.', 'Mr.', 'Mr.', 'Mr.', 'Ms.', 'Ms.'];
        let birthdate = ['08-Dec-48', '19-Feb-52', '30-Aug-63', '19-Sep-37', '04-Mar-55', '02-Jul-63', '29-May-60', '09-Jan-58', '27-Jan-66'];
        let hiredate = ['01-May-92', '14-Aug-92', '01-Apr-92', '03-May-93', '17-Oct-93', '17-Oct-93', '02-Jan-94', '05-Mar-94', '15-Nov-94'];
        let address = ['507 - 20th Ave. E. Apt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House', 'Miner Rd.', 'Edgeham Hollow', 'Winchester Way', '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.'];
        let city = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'London', 'London', 'Seattle', 'London'];
        let postalcode = ['98122', '98401', '98033', '98052', 'SW1 8JR', 'EC2 7JR', 'RG1 9SP', '98105', 'WG2 7LT'];
        let country = ['USA', 'USA', 'USA', 'USA', 'UK', 'UK', 'UK', 'USA', 'UK'];
        let homephone = ['(206) 555-9857', '(206) 555-9482', '(206) 555-3412', '(206) 555-8122', '(71) 555-4848', '(71) 555-7773', '(71) 555-5598', '(206) 555-1189', '(71) 555-4444'];
        let notes = ['Education includes a BA in psychology from Colorado State University in 1970.  She also completed <code>The Art of the Cold Call.</code>  Nancy is a member of Toastmasters International.',
            'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
            'Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
            'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.',
            'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses <code>Successful Telemarketing</code> and <code>International Sales Management.</code>  He is fluent in French.',
            'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses <code>Multi-Cultural Selling</code> and <code>Time Management for the Sales Professional.</code>  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
            'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled <code>Selling in Europe,</code> he was transferred to the London office in March 1993.',
            'Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.',
            'Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.'];
        let k = 0;
        for (let i = 0; i < firstNames.length; i++) {
            let row = {};
            row['name'] = firstNames[k] + ' ' + lastNames[k];
            row['firstname'] = firstNames[k];
            row['lastname'] = lastNames[k];
            row['title'] = titles[k];
            row['titleofcourtesy'] = titleofcourtesy[k];
            row['birthdate'] = birthdate[k];
            row['hiredate'] = hiredate[k];
            row['address'] = address[k];
            row['city'] = city[k];
            row['postalcode'] = postalcode[k];
            row['country'] = country[k];
            row['homephone'] = homephone[k];
            row['notes'] = notes[k];
            data[i] = row;
            k++;
        }
        return data;
    }
}

In initwidget the row, column, value and htmlElement parameters are the actual ones.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

#120579

paulcobben
Participant

Hi,

I want the background color centered as a block in a cell. Height is fixed and width must be sized according the value.
My result until now is: Screenshot

My code is: `<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Licentie Overzicht</title>
<meta name=”description” content=”Licentie Overzicht” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/sparkleflowdash.css” type=”text/css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexport.js”></script>
<!– JSZip –>
<script type=”text/javascript” src=”scripts/jszip.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var cellclass = function (row, columnfield, value) {
if (value < 0) {
return ‘red’;
}
if (value == 0) {
return ‘yellow’;
}
if (value > 0) {
return ‘green’;
}
}

var source =
{
datatype: “csv”,
datafields: [
{ name: ‘applicatie’, type: ‘string’ },
{ name: ‘licentie’, type: ‘float’},
{ name: ‘usersad’, type: ‘float’},
{ name: ‘verschil1’, type: ‘float’},
{ name: ‘installaties’, type: ‘float’},
{ name: ‘verschil2’, type: ‘float’},
{ name: ‘gebruik’, type: ‘float’},
{ name: ‘verschil3’, type: ‘float’}

],
sortcolumn: ‘verschil1’,
sortdirection: ‘asc’,
url: “sparkleflow-data/licentieall.csv”,
columnDelimiter: “;”

};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 520+110+110+110+110+110+110+110+16,
height: 750,
source: dataAdapter,
showcolumnlines: false,
rowsheight: 50,
showfilterrow: true,
filterable: true,
sortable: true,
selectionmode: ‘multiplecellsextended’,
theme: ‘sparkleflowdash’,
columnsresize: true,
columns: [
{ text: ‘Applicatie’, datafield: ‘applicatie’, width: 520 },
{ text: ‘Licentie’, datafield: ‘licentie’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Users in AD’, datafield: ‘usersad’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil1’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’, margin: 48 },
{ text: ‘Installaties’, datafield: ‘installaties’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil2’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Gebruik’, datafield: ‘gebruik’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil3’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’ }
]
});
$(“#excelExport”).jqxButton();
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportview’, ‘xlsx’, ‘jqxGrid’);
});
});
</script>
</head>
<body class=”default”>
<style>
.green {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #c6efce;
}
.yellow {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #ffeb9c;
}
.red {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #ffc7ce;
}
</style>
<p style=”font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; color: rgb(143, 143, 143)”>Licentie Overzicht</p>
<div id=”jqxgrid”></div>
<div style=”margin-top: 20px;”>
<div style=”float: left;”>
<input type=”button” value=”Export naar Excel” id=”excelExport” />
</div>
</div>
</body>
</html>`

Viewing 15 results - 1 through 15 (of 177 total)