jQWidgets Forums

jQuery UI Widgets Forums Search Search Results for 'dataadapter'

Viewing 15 results - 421 through 435 (of 7,743 total)
  • Author
    Search Results
  • #111581

    Prakash
    Participant

    Hello,
    We are unable to bind data to the dataAdapter from the controller.
    We are using jQWidgets v5.3.2 (2017-Sep).
    Js code:

     var GROUPSsource =
            {
                datatype: "json",
                datafields: [
                    { name: 'OPTGROUPID', map: 'OPTGROUPID', type: 'string' },
                    { name: 'OPTGROUP', map: 'OPTGROUP', type: 'string' }
                ],
                url: "Quotes/Quoteitemoptions",
                id: "OPTGROUPID",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                root: "ITEMGROUP"
            };
    
            dataQUOTEGroups_v1 = new $.jqx.dataAdapter(GROUPSsource,
                {
                    autoBind: true,
                    async: false,
                    loadComplete: function () {
                    },
                    formatData: function (data) {
                    }
                }
            );
    

    Controller method:

    
            public async Task<ActionResult> Quoteitemoptions()
            {
                try
                {
                    string path = _apilist.Quoteitemoptions ;
                    HttpResponseMessage response = await _WebApiService.GetJsonResponse(path);
                    string res = response.Content.ReadAsStringAsync().Result;
                    return Json(res);
                }
                catch (Exception)
                {
                    throw;
                }
            }
    

    Error message:
    Error in InitializeQUOTEITEMSGroupData: Cannot use ‘in’ operator to search for ‘length’ in {“GROUPS”:{“ITEMGROUP”:[{“OPTGROUPID”:”1″,”OPTGROUP”:”A”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”2″,”OPTGROUP”:”B”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”3″,”OPTGROUP”:”C”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”4″,”OPTGROUP”:”D”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”5″,”OPTGROUP”:”E”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”6″,”OPTGROUP”:”F”,”OPTTYPE”:”QUOTEITEM”}]}}

    Please help! Not sure where I’m doing it wrong.
    Thank you,

    #111558

    Hristo
    Participant

    Hello Resington,

    From first sight, it appears the same error warning.
    But after that, I make some changes to your scenario.
    I change the import in the app.modules.ts file as using the jqxButtonModule module.
    It seems to work fine.
    Please, take a look at the example below as I started from the mentioned from you tutorial.
    app.modules.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';
    import { jqxButtonModule } from 'jqwidgets-ng/jqxbuttons';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [ AppComponent ],
      imports: [ BrowserModule, jqxGridModule, jqxButtonModule ],
      bootstrap: [ AppComponent ]
    })
    
    export class AppModule { }

    app.component.ts:

    import { Component, ViewChild } from '@angular/core';
    
    import{ jqxButtonComponent } from 'jqwidgets-ng/jqxbuttons'; 
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    
    export class AppComponent {
    	@ViewChild("buttonReference", { static: false }) buttonReference: jqxButtonComponent;
    	
    	ngAfterViewInit() {
    		console.log("ngAfterViewInit", this.buttonReference);
    	}
    	
      public source: jqwidgets.GridSource = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Thomas Hardy', 'Sales Representative', 'London', 'UK'],
          ['Christina Berglund', 'Order Administrator', 'Lule', 'Sweden'],
          ['Hanna Moos', 'Sales Representative', 'Mannheim', 'Germany'],
          ['Frdrique Citeaux', 'Marketing Manager', 'Strasbourg', 'France'],
          ['Martn Sommer', 'Owner', 'Madrid', 'Spain'],
          ['Owner', 'Marseille', 'France'],
          ['Elizabeth Lincoln', 'Accounting Manager', 'Tsawassen', 'Canada'],
          ['Victoria Ashworth', 'Sales Representative', 'London', 'UK'],
          ['Patricio Simpson', 'Sales Agent', 'Buenos Aires', 'Argentina'],
          ['Francisco Chang', 'Marketing Manager', 'Mxico D.F.', 'Mexico'],
          ['Yang Wang', 'Owner', 'Bern', 'Switzerland'],
          ['Pedro Afonso', 'Sales Associate', 'Sao Paulo', 'Brazil'],
          ['Elizabeth Brown', 'Sales Representative', 'London', 'UK'],
          ['Sven Ottlieb', 'Order Administrator', 'Aachen', 'Germany'],
          ['Janine Labrune', 'Owner', 'Nantes', 'France'],
          ['Ann Devon', 'Sales Agent', 'London', 'UK'],
          ['Roland Mendel', 'Sales Manager', 'Graz', 'Austria']
        ],
        datafields: [
            { name: 'ContactName', type: 'string', map: '0' },
            { name: 'Title', type: 'string', map: '1' },
            { name: 'City', type: 'string', map: '2' },
            { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    
      public dataAdapter = new jqx.dataAdapter(this.source);
    
      public columns: jqwidgets.GridColumn[] = [
        { text: 'Contact Name', datafield: 'ContactName', width: 240 },
        { text: 'Contact Title', datafield: 'Title', width: 240 },
        { text: 'City', datafield: 'City', width: 150 },
        { text: 'Country', datafield: 'Country' }
      ];
    }

    app.component.html:

    <jqxGrid  
      [theme]="'material-purple'"
      [width]="800" [source]="dataAdapter" [columns]="columns"
      [pageable]="true" [sortable]="true" [editable]="true"
      [autoheight]="true" [altrows]="true" [enabletooltips]="true">
    </jqxGrid>
    <hr/>
    <jqxButton #buttonReference [width]="80" [height]="80" [textPosition]="'left'">Button</jqxButton>

    Now there is no error message.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    #111477

    TT MM
    Participant

    Using React, I’m trying to render a JqxDataTable cell with a JqxLinearGauge component without much success. Is what I’m trying to do even possible? I’ve stripped down the original version of the code and included what I think is the relevant snippet, depicting my attempt to render a JqxGauge in a table cell below: (Two different cases of cellsrenderer are shown.) (If you notice that the code shouldn’t run, trust me it does — I may have pared it down too much, but the real code runs. It’s the cellsrenderer code that doesn’t deliver for me.)

    Case 1 (using temperate literal with JqxLinearGauge):

    import * as React from "react";
    // import * as ReactDOM from "react-dom";
    
    import JqxDataTable, {
       IDataTableProps,
       jqx,
    } from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable";
    import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-react-tsx/jqxlineargauge";
    
    import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
    import "jqwidgets-scripts/jqwidgets/styles/jqx.office.css";
    
    import "../../styles/index.css";
    // import cellRendererRange52 from "../renderers/cellRendererRange52";
    
    interface MyState extends IDataTableProps {
       stockWatch?: any;
       isLoggedInToFirebase?: boolean;
       ownSource?: any[];
       ownEditorRenderer?: any;
    }
    class BodComp1 extends React.PureComponent<
       {
          auth2: any;
          loggedInWithGoogle: boolean;
          googleToken: any;
          emailAddress: any;
       },
       MyState
    > {
       stocksRef: any;
       numUpdates: number;
       numRows: number;
       columns: any[];
       dataAdapter: null;
       auth2!: gapi.auth2.GoogleAuth;
       stock: any | undefined;
       emailAddress: string | undefined;
    
       private myDataTable = React.createRef<JqxDataTable>();
       private myLinearGauge = React.createRef<JqxLinearGauge>();
    
       constructor(props: {
          auth2: any;
          loggedInWithGoogle: boolean;
          googleToken: any;
          emailAddress: any;
       }) {
          super(props);
          this.stocksRef = "";
          this.numUpdates = 0;
          this.numRows = 0;
          this.columns = [];
          this.dataAdapter = null;
    
          this.state = {
             stockWatch: [],
             isLoggedInToFirebase: false,
             editSettings: {
                cancelOnEsc: true,
                editOnDoubleClick: true,
                editOnF2: true,
                editSingleCell: true,
                saveOnBlur: true,
                saveOnEnter: true,
                saveOnPageChange: true,
                saveOnSelectionChange: true,
             },
          };
          this.getAppBodyContent = this.getAppBodyContent.bind(this);
       }
    
       componentDidMount() {}
    
       onCollectionUpdate = (querySnapshot: any) => {
          // console.log(<code>In onCollectionUpdate() <${util.inspect(querySnapshot)}></code>);
          this.numUpdates++;
          let stockWatch: any[] = [];
          this.numRows = 0;
          querySnapshot.forEach(
             (doc: {
                data: () => {
                   companyName: any;
                   latestPrice: any;
                   symbol: any;
                   range52: any;
                };
                id: any;
             }) => {
                const { companyName, latestPrice, symbol, range52 } = doc.data();
                stockWatch.push({
                   key: doc.id,
                   doc, // DocumentSnapshot
                   companyName,
                   latestPrice,
                   symbol,
                   range52,
                });
             }
          );
          this.setState({
             stockWatch,
          });
          this.numRows++;
       };
    
       getAppBodyContent() {
          const source = {
             datafields: [
                { name: "companyName", type: "string" },
                { name: "symbol", type: "string" },
                { name: "latestPrice", type: "float" },
                { name: "range52", type: "string" },
             ],
             id: "key",
             dataType: "json",
             localData: () => {
                let data: any[] = [];
                let i = 0;
    
                this.state.stockWatch.forEach((s: any) => {
                   data[i++] = {
                      key: s.key,
                      companyName: s.companyName,
                      symbol: s.symbol,
                      latestPrice: s.latestPrice,
                      range52: s.range52,
                   };
                   this.numRows++;
                });
                return data;
             },
          };
          this.dataAdapter = new jqx.dataAdapter(source);
          // --
          const columnWidths = [
             ["companyNameWidth", 200],
             ["tickerWidth", 64],
             ["currPriceWidth", 90],
             ["range52Width", 115],
          ];
    
          this.columns = [
             {
                text: "Company Name",
                datafield: "companyName",
                width: columnWidths[2][1],
                align: "center",
                editable: false,
             },
             {
                text: "Symbol",
                datafield: "symbol",
                width: columnWidths[3][1],
                editable: false,
             },
             {
                text: "Curr. Price",
                datafield: "latestPrice",
                align: "center",
                width: columnWidths[4][1],
                cellsalign: "right",
                cellsformat: "c2",
                editable: false,
             },
             {
                text: "52W Range",
                datafield: "range52",
                width: columnWidths[14][1],
                editable: false,
                align: "center",
                cellsalign: "center",
                cellsrenderer: (
                   row: any,
                   column: any,
                   value: any,
                   rowData: any
                ): any => {
                      return " <-- this is really a back-tick, but it clobbers the code formatting of this post
    
                            ${(
                               <JqxLinearGauge>
                                  ref={this.myLinearGauge}
                                  width={"99px"}
                                  height={"25px"}
                                  orientation={"horizontal"}
                                  min={0}
                                  value={66}
                                  max={100}
                                  ticksPosition={"both"}
                               </JqxLinearGauge>
                            )}
                        "; <-- this is really a back-tick, but it clobbers the code formatting of this post
                }, //cellsrenderer closing bracket
             },
          ];
          return (
             <JqxDataTable
                ref={this.myDataTable}
                width={1100}
                theme={"office"}
                source={this.dataAdapter}
                columns={this.columns}
                filterable={true}
                pageable={true}
                pagerMode={"advanced"}
                altRows={true}
                autoRowHeight={true}
                height={this.numRows > 10 ? 650 : this.numRows * 59 + 190}
                sortable={true}
                columnsReorder={true}
                columnsResize={true}
                editable={true}
                key={this.numUpdates} // this forces a re-render of the table!
                editSettings={this.state.editSettings}
                pageSizeOptions={[5, 10, 25, 30, 50]}
                pageSize={30}
             />
          );
       }
    
       public render() {
          return <div>{this.getAppBodyContent()}</div>;
       }
    }
    
    export default BodComp1;

    Running the snippet above renders the following in the cell: [object Object]
    Obviously, not what I want.

    —————————-
    Case 2 (cellsrenderer does not return anything, but it tries to render the JqxLinearGauge in the appropriate cell of the table; i.e., the parent element of the linear gauge):

                   cellsrenderer: (
                      row: any,
                      column: any,
                      value: any,
                      rowData: any
                   ): any => {
                      const theRange52Cell = document.querySelector(
    body > div:nth-of-type(1) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(4) > div:nth-of-type(2) > div > table:nth-of-type(2) > tbody > tr:nth-of-type(${row +
                            1}) > td:nth-of-type(11)
                      );
                      ReactDOM.render(
                         <JqxLinearGauge>
                            ref={this.myLinearGauge}
                            width={"99px"}
                            height={"25px"}
                            orientation={"horizontal"}
                            min={0}
                            value={66}
                            max={100}
                            ticksPosition={"both"}
                         </JqxLinearGauge>,
                         theRange52Cell
                      );
                   }, //cellsrenderer closing bracket

    Running the snippet above did not render the table because of the following error:
    Error: Minified React error #200; which translates into: Target container is not a DOM element.

    I believe it’s telling me that the cell doesn’t yet exist yet at the time I’m trying to render the JqxLinearGauge.
    (By the way, I pulled the css querySelector Xpath from the chrome inspector when the table rendered properly using the value, so I know that is correct.)

    Any suggestions? Is this even possible?

    Thanks,
    Tony

    #111466

    Marina
    Participant

    I actually recreated this issue in more simple page, but its still happening when ids of the items in both trees have the same values. If ids are different its seems working fine.

    
    <script type="text/javascript">
    
                    function movetreeviewitems(source, destination) {
                        var sourceItems = $(source).jqxTree('getCheckedItems');
                        var destinationitems = $(destination).jqxTree('getItems');
                        var bfoundparent = false;
                      
                        var assigneditemsparent;
    
                        var destinationItemsMaxID = 0;
                        for (var n = 0; n < destinationitems.length; n++) {//loop through assigned elements to find max id
                            if (Number(destinationitems[n].id) > Number(destinationItemsMaxID)) {
                                destinationItemsMaxID = Number(destinationitems[n].id);
                            }
                        }
                        mainloop:
                        for (var i = 0; i < sourceItems.length; i++) {
                            var item = sourceItems[i];
                            if (item.level > 0) {
                                destinationitems = $(destination).jqxTree('getItems');
    
                                console.log("item", item);
                                console.log("item parent element", item.parentElement);
                                console.log("parent item", $(source).jqxTree('getItem', item.parentElement));
    
                                bfoundparent = false;
    
                                var itemcompanyid, itemcategoryid, categoryelement, companyelement, categoryitem, companyitem, itemelement;
                                itemelement = item.element;
    
                                if (!bfoundparent) {
                                    loopassigned:
                                    for (var j = 0; j < destinationitems.length; j++) {//loop through assigned elements to see if parents there
                                        if (destinationitems[j].level == 0 &&
                                            destinationitems[j].label == $(source).jqxTree('getItem', item.parentElement).label &&
                                            destinationitems[j].value == $(source).jqxTree('getItem', item.parentElement).value) {
                                            assigneditemsparent = destinationitems[j].element;
                                            console.log("ASSIGNED ITEM PARENT ELEMENT", assigneditemsparent);
                                            bfoundparent = true;
                                            break loopassigned;
                                        }
                                    }
                                }
                                console.log("foundparent", bfoundparent);
                                if (bfoundparent) {
                                    destinationItemsMaxID = destinationItemsMaxID + 1;
                                    console.log("ADD DISPATCHER ITEM");
                                    var lbl = item.label;
                                    var val = item.value;
                                    $(destination).jqxTree('addTo', { label: item.label, value: item.value, id: destinationItemsMaxID }, assigneditemsparent);
                                }
    
                                $(source).jqxTree('removeItem', itemelement);
                            }
                        }
    
                    }
    
                    $(document).ready(function () {
                        var data1 = [
                    { "id": "2",
                        "parentid": "1",
                        "text": "Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "3",
                        "parentid": "1",
                        "text": "Peppermint Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "4",
                        "parentid": "1",
                        "text": "Salted Caramel Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "5",
                        "parentid": "1",
                        "text": "White Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "text": "Chocolate Beverage",
                        "id": "1",
                        "parentid": "-1",
                        "value": "0"
                    }
                    ]
    
                        var data2 = [
                   {
                       "id": "1",
                        "value": "0",
                       "text": "Chocolate Beverage",
                       "parentid": "-1"
                   }, {
                       "id": "2",
                       "text": "Caffe Vanilla Frappuccino",
                       "parentid": "1",
                       "value": "$2.3"
                   },  {
                       "id": "3",
                       "text": "Caffe Vanilla Frappuccino Light",
                       "parentid": "1",
                       "value": "$2.3"
                   }]
    
                        // prepare the data
                        var source1 =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
                        id: 'id',
                        localdata: data1
                    };
                        var source2 =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
                        id: 'id',
                        localdata: data2
                    };
    
                        var dataAdapter1 = new $.jqx.dataAdapter(source1);
                        dataAdapter1.dataBind();
                        var records1 = dataAdapter1.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    
                        var dataAdapter2 = new $.jqx.dataAdapter(source2);
                        dataAdapter2.dataBind();
                        var records2 = dataAdapter2.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    
                        $('#jqxTree1').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', source: records1 });
                        $('#jqxTree1').css('visibility', 'visible');
                        $('#jqxTree2').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', source: records2 });
                        $('#jqxTree2').css('visibility', 'visible');
    
                        $("#btnAssign").jqxButton({ width: 120, height: 40 });
                        $("#btnAssign").on('click', function () {
                            movetreeviewitems('#jqxTree1', '#jqxTree2');
                        });
    
                        $("#btnUnAssign").jqxButton({ width: 120, height: 40});
                        $("#btnUnAssign").on('click', function () {
                            movetreeviewitems('#jqxTree2', '#jqxTree1');
                        });
    
                    });
            </script>
    
    
    
         <table>
         <tr>
            <td> <div id='jqxTree1'></div></td>
            <td> 
            <input type="button" style='margin-top: 20px;'  value="Assign >>" id='btnAssign' />
            <input type="button" style='margin-top: 20px;'  value="UnAssign <<" id='btnUnAssign' />
            </td>
            <td> <div id='jqxTree2'></div></td>
         </tr>
         </table>
          
    #111465

    wpd
    Participant

    Hello,

    grid not showing data when i am adding attribute pagesizeoptions

    <jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
    [height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
    [pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesizeoptions]=”[’25’, ’50’, ’75’]” [pagesize]=”50″>
    </jqxGrid>

    it is working good when i remove this(below code is working good)
    <jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
    [height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
    [pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesize]=”20″>
    </jqxGrid>

    Any thoughts?

    #108338

    lucoe
    Participant

    I’m using a dataTable which has a dropDownList as a column. I would like that when it chosen a item in the dropDownList it was removed form the list, leaving in the list only those not chosen yet. This doesn’t work. I’ve tryed the following solutions, but none successful.
    1 – to directly remove the item from dataAdapter.records
    2 – to remove the item from the object used to assign source.localData and I’ve after create the dataAdapter with this source, assigning it to same initial reference.
    3 – to recreate the source with a new data in localData, and I’ve after create the dataAdapter with this source, assigning it to same initial reference.

    #108322

    robf
    Participant

    Hello,
    I too am trying to use this new feature. I tried to follow example and use type XLSX. I get
    a.jqx.dataAdapter.DataExporter is not a constructor

    I have

    <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/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxexport.js"></script> 

    Also running dataexport.php on my own server. Notice that mimemtype xlsx is not there.

    Ideas how to get this to work?

    Thanks.
    Rob

    #108270

    Peter Stoev
    Keymaster

    Hi chandrapraba,

    The virtual mode example of the TreeGrid indeed loads local data instead of data through Rest API. However, the approach shown in the example is the one you could use in your case, too. The data binding is through a dataAdapter. The dataAdapter can have ‘localdata’ param or ‘url’. When ‘url’ is set, the data binding is to an external data source.

    Regards,
    Peter

    #108252

    Hristo
    Participant

    Hello dan123,

    In my previous post I mentioned how you could handle this scenario and my concerns on the Client-Side.
    Instead of trying to format the dates in the cellsrenderer callback you could do this in the beforeLoadComplete callback as you prefer.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">This example shows how to auto-resize the grid columns.</title>
        <meta name="description" content="JavaScript Grid Auto Resize Grid columns" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var source = {
                    datatype: "xml",
                    datafields: [
                        { name: "ShippedDate", map: "m\\:properties>d\\:ShippedDate", type: "date" },
                        { name: "quantity", map: "m\\:properties>d\\:Freight", type: "float" },
                        { name: "lastname", map: "m\\:properties>d\\:ShipName", type: "string" },
                        { name: "productname", map: "m\\:properties>d\\:ShipAddress", type: "string" },
                        { name: "price", map: "m\\:properties>d\\:ShipCity", type: "string" },
                        { name: "total", map: "m\\:properties>d\\:ShipCountry", type: "string" },
                        { name: "orderdate", type: "string" }
                    ],
                    root: "entry",
                    record: "content",
                    id: "m\\:properties>d\\:OrderID",
                    url: "../sampledata/orders.xml",
    
                    //filter: function ()
                    //{
                    //    // update the grid and send a request to the server.
                    //    $("#jqxgrid").jqxGrid("updatebounddata", "filter");
                    //},
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (records)
                    {
                        records.map((item, index) =>
                        {
                            var day = item.ShippedDate.getDate();
                            var month = item.ShippedDate.getMonth();
                            month += 1;
                            var year = item.ShippedDate.getFullYear();
                            var result = (month < 10 ? "0" + month : month) + "/" + (day < 10 ? "0" + day : day) + "/" + year;
    
                            item.orderdate = result
                        });
    
                        return records;
                    }
                });
    
                $("#jqxgrid").jqxGrid({
                    theme: "energyblue",
                    altrows: true,
                    width: 500,
                    source: dataAdapter,
                    filterable: true,
                    showfilterrow: true,
                    columns: [{
                        text: "Order Date",
                        datafield: "orderdate",
                        width: 200,
                        //filtertype: "default",
                        filtercondition: "starts_with",
                    }, {
                        text: "Last Name",
                        datafield: "lastname",
                        width: 100
                    }, {
                        text: "Product",
                        datafield: "productname",
                        width: 180
                    }, {
                        text: "Quantity",
                        datafield: "quantity",
                        width: 80,
                        cellsalign: "right"
                    }, {
                        text: "Unit Price",
                        datafield: "price",
                        width: 90,
                        cellsalign: "right",
                        cellsformat: "c2"
                    }, {
                        text: "Total",
                        datafield: "total",
                        width: 100,
                        cellsalign: "right",
                        cellsformat: "c2"
                    }]
                });
            });
        </script>
    </head>
    <body>
        <div id="jqxgrid"></div>
    </body>
    </html>
    

    It is based on this demo (about the data source).

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    dacracot
    Participant

    I’m configuring a tree grid and using data generated by a service that can not tolerate the _=1582749028718 that jQuery ajax calls appends to prevent IE from caching. I added the cache:false to my source, but it continues to be appended.

    My code…

    
    // --------------------------------------
    var dataDefinition =
    	{
    	dataType: "json",
    	dataFields: SCL.dataColumns,
    	hierarchy: {
    		root: "children"
    		},
    	timeout: 10000,
    	root: "SCL",
    	url: "http://localhost:8080/pooka/scl/data.json",
    	cache: false,
    	id: "id"
     };
    // --------------------------------------
    var dataAdapter = new $.jqx.dataAdapter(dataDefinition, {
    	loadComplete: function(){
    	}
    });
    // --------------------------------------
    $("#scl-grid").jqxTreeGrid({
    	source: dataAdapter,
    	pageable: true,
    	pagerMode: 'advanced',
    	filterable: true,
    	filterMode: 'simple',
    	sortable: true,
    	altRows: true,
    	columnsResize: true,
    	ready: function(){
    		$("#scl-grid").jqxTreeGrid('expandRow', '111100001'); 
    		$("#scl-grid").jqxTreeGrid('expandRow', '111100007');
    		},
    	columns: SCL.tableColumns,
    	columnGroups: SCL.groupColumns
    });
    // --------------------------------------
    

    Where can I set cache to false to stop the appended parameter?

    #108221

    Hristo
    Participant

    Hello Mark,

    It is not a good practice to set all properties again and again.
    You should use its methods to update it.
    It is not a whole example but as I understand you update the jqxGrid and using customization to update it.
    For the jqxDataAdapter, I saw that you use a new instance but are you sure your data and fields are from the correct type.
    Please, check for any error message in the console.
    Also, I recommend using the methods of the jqxGrid to update it.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    Eking
    Participant

    Hey Dan123,
    You will need to pass this back to the php if you are using filters.
    var tcmdataAdapter = new $.jqx.dataAdapter(tcmsource,
    {formatData: function (data) {
    if (data.filterscount) {
    filterChanged = true;
    var filterParam = “”;
    //alert(data.filterscount);
    for (var i = 0; i < data.filterscount; i++) {
    // filter’s value.
    var filterValue = data[“filtervalue” + i];
    // filter’s condition. For the filterMode=”simple” it is “CONTAINS”.
    var filterCondition = data[“filtercondition” + i];
    // filter’s data field – the filter column’s datafield value.
    var filterDataField = data[“filterdatafield” + i];
    // “and” or “or” depending on the filter expressions. When the filterMode=”simple”, the value is “or”.
    var filterOperator = data[filterDataField + “operator”];
    var startIndex = 0;

    if (filterDataField == “date” ) {
    var sedate = new Date(filterValue);
    sedata = formatDate(sedate,’yyyy-MM-dd’);
    filterParam=sedata;
    data[“filtervalue” + i]=filterParam;

    }

    }

    return data;
    }

    }
    }

    Hope this helps….


    Hristo
    Participant

    Hello palak,

    Could you clarify your case?
    You mix two different scenarios.
    In the updaterow callback which is a member of the DataAdapter‘s source object.
    There the update of the jqxGrid is already passed (interaction of the user with it) and you just need to synchronize it with the server.
    Using commit(true); option if this permitted update in the database and with the commit(false); in other cases.

    Also, I would like to suggest you look at this demo:
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customizededitors.htm?light
    I would like to propose your attention to the cellvaluechanging callback which has arguments for the “old” value and for the new” value – fourth and fifth arguments.
    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    Hristo
    Participant

    Hello sunnysingh,

    It has a created work item for this.
    I would like to suggest one temporary solution that you could try.
    Handling the case when the first row is selected and unselect it.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">
            This example shows the set the cells and columns alignment.
        </title>
        <meta name="description" content="JavaScript Grid Columns and Cells Alignment" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/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/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
    
                var data = generatedata(500);
                var source = {
                    localdata: data,
                    datafields: [{
                        name: "firstname",
                        type: "string"
                    }, {
                        name: "lastname",
                        type: "string"
                    }],
                    datatype: "array"
                };
    
                var adapter = new $.jqx.dataAdapter(source);
                var isFirstRowSelected = false;
                var usingTab = false;
                $("#jqxgrid").jqxGrid({
                    width: 600,
                    theme: "energyblue",
                    source: adapter,
                    sortable: true,
                    editable: true,
                    handlekeyboardnavigation: function (event)
                    {
                        console.log(event);
                        if (event.keyCode == 9) {
                            // This is the "Tab" key
                            var selectedrowindexes = $("#jqxgrid").jqxGrid("selectedrowindexes");
                            usingTab = true;
                            if (selectedrowindexes.legnth > 0 && selectedrowindexes.indexOf(0) != -1) {
                                isFirstRowSelected = true
                            }
                        }
                    },
                    ready: function ()
                    {
                        console.log(isFirstRowSelected);
                    },
                    selectionmode: "checkbox",
                    columns: [{
                        text: "First Name",
                        datafield: "firstname"
                    }, {
                        text: "Last Name",
                        datafield: "lastname"
                    }]
                });
                var listSource = [{
                    label: "First Name",
                    value: "firstname",
                    checked: true
                }, {
                    label: "Last Name",
                    value: "lastname",
                    checked: true
                }];
    
                $("#jqxlistbox").jqxListBox({
                    theme: "energyblue",
                    autoHeight: true,
                    source: listSource,
                    width: 200,
                    checkboxes: true
                });
                $("#jqxlistbox").on("checkChange", function (event)
                {
                    $("#jqxgrid").jqxGrid("beginupdate");
                    if (event.args.checked) {
                        $("#jqxgrid").jqxGrid("showcolumn", event.args.value);
                    } else {
                        $("#jqxgrid").jqxGrid("hidecolumn", event.args.value);
                    }
                    $("#jqxgrid").jqxGrid("endupdate");
                });
    
                $("#jqxgrid").on("rowselect", function (event)
                {
                    // event arguments.
                    var args = event.args;
                    // row"s bound index.
                    var rowBoundIndex = args.rowindex;
                    // row"s data. The row"s data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row"s firstName, use var firstName = rowData.firstName;
                    var rowData = args.row;
                    if (usingTab && rowBoundIndex == 0) {
                        var selectedrowindexes = $("#jqxgrid").jqxGrid("selectedrowindexes");
                        var index = $("#jqxgrid").jqxGrid("getrowboundindex", 0);
                        $("#jqxgrid").jqxGrid("unselectrow", index);
                    }
                });
    
            });
        </script>
    </head>
    <body>
        <div id="jqxgrid"></div>Show/Hide Columns
        <div id="jqxlistbox"></div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    #108170

    If user change the product by selecting different value in product list drop-down then value in appForm is not reflecting.

    Could you please suggest how to connect jqxGrid with dataModel (formControlArray=”dataModel” is not working)?

    app.component.ts:

    import { Component, OnInit, ViewChild } from ‘@angular/core’;

    @Component({
    selector: ‘app-home’,
    templateUrl: ‘./home.component.html’,
    styleUrls: [ ]
    })
    export class AppComponent implements OnInit {

    @ViewChild(‘appGrid’) appGrid: jqxGridComponent;

    dataModel = [{
    firstname: ‘Lan’,
    lastname: ‘Saylor’,
    productValue: {
    code: ‘2’,
    value: ‘Cappuccino’
    }
    }, {
    firstname: ‘Peter’,
    lastname: ‘Bein’,
    productValue: {
    code: ‘1’,
    value: ‘Black Tea’
    }
    }]

    products = [{
    code: ‘1’,
    value: ‘Black Tea’
    }, {
    code: ‘2’,
    value: ‘Cappuccino’
    }]

    settings: jqwidgets.GridOptions = {
    editable: true,
    enabletooltips: true,
    columnsmenu: false,
    source: new jqx.dataAdapter({
    datatype: ‘array’,
    datafields: [
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ }
    { name: ‘productValue’, map: ‘product>value’ }
    ],
    localdata: this.dataModel
    }),
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: ‘30%’ },
    { text: ‘Last Name’, datafield: ‘lastname’, width: ‘30%’ },
    { text: ‘Product’, datafield: ‘productValue’, width: ‘40%’,
    columntype: ‘dropdownlist’,
    createeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({
    source: this.products,
    displayMember: ‘value’,
    valueMember: ‘code’
    });
    }
    }
    ]
    };

    ngOnInit(): void {
    this.appGrid.createComponent(this.settings);
    }

    constructor(private formBuilder: FormBuilder) { }

    this.appForm = this.formBuilder.group({
    dataModel: new this.formBuilder.group(this.dataModel);
    });

    }

    app.component.html:
    <form [formGroup]=”appForm”>
    <jqxGrid id=”appGrid” formControlArray=”dataModel” #appGrid></jqxGrid>
    </form>

Viewing 15 results - 421 through 435 (of 7,743 total)