jQuery UI Widgets Forums Angular jqxgrid loadserverdata and dropdown keyvalue binding

This topic contains 5 replies, has 2 voices, and was last updated by  rbmanian75 6 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • rbmanian75
    Participant

    Hi,

    I have checked the sample provided in

    and created the following sample

    
    export class TraducoesComponent implements AfterViewInit {
    
        @ViewChild('gridReference') myGrid: jqxGridComponent;
    
        constructor(private service: TraducoesService) {
    
        }
    
        actionsSource =
        {
            datatype: "array",
            datafields: [
                { name: 'code', type: 'string' },
                { name: 'value', type: 'string' }
            ],
            localdata: [
                { code: "N", value: "No Action" },
    
                { code: "T_ES_GOOG", value: "Trans. Spanish Google" },
                { code: "T_EN_GOOG", value: "Trans. English Google" },
                { code: "T_ES_EN_GOOG", value: "Trans. All Google" },
    
                { code: "T_ES_MS", value: "Trans. Spanish Microsoft" },
                { code: "T_EN_MS", value: "Trans. English Microsoft" },
                { code: "T_ES_EN_MS", value: "Trans. All Microsoft" },
    
                { code: "T_ES_MS_GOOG", value: "Trans. Spanish All" },
                { code: "T_EN_MS_GOOG", value: "Trans. English All" },
                { code: "T_ES_EN_MS_GOOG", value: "Trans. All" },
    
                { code: "VR", value: "Pending Verification" },
                { code: "VD", value: "Verified" }
            ]
        };
    
        actionsDropDownListAdapter = new $.jqx.dataAdapter(this.actionsSource, { autoBind: true });
    
        source = {
            datatype: "json",
            url: "traducoes",
            datafields: [
                { name: 'ACTION', type: 'string' },
                { name: 'ACTION_DISPLY', value: 'ACTION', values: { source: this.actionsDropDownListAdapter.records, value: 'code', name: 'value' } },
                { name: 'ERROR', type: 'float' },
                { name: 'DESCR', type: 'string' },
                { name: 'DESCR_ES', type: 'string' },
                { name: 'DESCR_ES_GOOG', type: 'string' },
                { name: 'DESCR_ES_MS', type: 'string' },
                { name: 'DESCR_ES_VR', type: 'string' },
                { name: 'DESCR_EN', type: 'string' },
                { name: 'DESCR_EN_GOOG', type: 'string' },
                { name: 'DESCR_EN_MS', type: 'string' },
                { name: 'DESCR_EN_VR', type: 'string' },
                { name: 'INSERTEDON', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' },
                { name: 'UPDATEDON', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' },
                { name: 'INSERTEDON_ES', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' },
                { name: 'UPDATEDON_ES', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' },
                { name: 'INSERTEDON_EN', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' },
                { name: 'UPDATEDON_EN', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' }
            ]
        };
    
        dataAdapter = new $.jqx.dataAdapter(this.source, {
            loadServerData: (serverData, source, callback) => {
                this.service.SgcMessages().subscribe((messages) => { callback({ records: messages, totalrecords: messages.length }) });
            }
        });
    
        ngAfterViewInit(): void {
            this.myGrid.createWidget(this.settings);
        }
    
        settings: jqwidgets.GridOptions = {
            width: '100%',
            height: '630px',
            columnsresize: true,
            source: this.dataAdapter,
            filterable: true,
            pageable: false,
            sortable: true,
            altrows: true,
            enabletooltips: true,
            editable: true,
            selectionmode: 'singlerow',
            columns:
            [
                {
                    width : 100,
                    text: 'Action',
                    datafield: 'ACTION',
                    displayfield: 'ACTION_DISPLAY',
                    columntype: 'dropdownlist',
                    createeditor: (row, value, editor) => {
                        editor.jqxDropDownList({ source: this.actionsDropDownListAdapter, displayMember: 'value', valueMember: 'code' });
                    }
                },
                {
                    text: 'Error',
                    datafield: 'ERROR',
                    width: 100,
                    editable: false
                },
                {
                    text: 'Description',
                    datafield: 'DESCR',
                    width: 300,
                    editable: false
                },
                {
                    text: 'Description Spanish',
                    datafield: 'DESCR_ES',
                    width: 300,
                    editable: false
                },
                {
                    text: 'Translation Spanish Google',
                    datafield: 'DESCR_ES_GOOG',
                    width: 300
                },
                {
                    text: 'Translation Spanish Microsoft',
                    datafield: 'DESCR_ES_MS',
                    width: 300
                },
                {
                    text: 'Translation Spanish Verified',
                    datafield: 'DESCR_ES_VR',
                    width: 300,
                    editable: false
                },
                {
                    text: 'Description English',
                    datafield: 'DESCR_EN',
                    width: 300,
                    editable: false
                },
                {
                    text: 'Translation English Google',
                    datafield: 'DESCR_EN_GOOG',
                    width: 300
                },
                {
                    text: 'Translation English Microsoft',
                    datafield: 'DESCR_EN_MS',
                    width: 300
                },
                {
                    text: 'Translation English Verified',
                    datafield: 'DESCR_EN_VR',
                    width: 300,
                    editable: false
                },
    
                {
                    text: 'Ins. Date',
                    datafield: 'INSERTEDON',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
    
                },
                {
                    text: 'Upd. Date',
                    datafield: 'UPDATEDON',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
                },
                {
                    text: 'Ins. Date - ES',
                    datafield: 'INSERTEDON_ES',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
    
                },
                {
                    text: 'Upd. Date - ES',
                    datafield: 'UPDATEDON_ES',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
                },
                {
                    text: 'Ins. Date - EN',
                    datafield: 'INSERTEDON_EN',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
    
                },
                {
                    text: 'Upd. Date - EN',
                    datafield: 'UPDATEDON_EN',
                    width: 150,
                    cellsformat: 'yyyy-MM-dd HH:mm:ss',
                    editable: false
                }
            ]
        };
    }
    

    When we are using loadserverdata whether the ACTION_DISPLAY will be created in the loadserverdata callback? Or we have to create the ACTION_DISPLAY field in each record to display the display memeber.

    Because we are getting empty value in the action column.

    Any help would be appreciated.


    rbmanian75
    Participant

    I am asking this because we dont have the field ACTION_DISPLAY from the data returned from server. but it is mentioned that in the link http://www.jqwidgets.com/community/topic/jqxgrid-problem-with-columntype-dropdownlist/ the dataadapter will create the column. Is that applicable when we are using loadserverdata also.


    Hristo
    Participant

    Hello rbmanian75,

    Do you have any error messages in the console?
    After testing your example with our data based on this example, I do not find any strange behavior.
    You should check your settings. Also, You could try to use beforeLoadComplete callback as in our example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    rbmanian75
    Participant

    You have not understand the question. I am asking whether json array should contain the display field as property or it will be automatically created by the callback function in the loadServerData. In the example you have provided your are creating the disply field employeename in the beforeLoadComplete.?

    So as per your suggestion u want me create the display field in json result object in loadserverdata as in beforeloadcomplete?,

    Thanks


    Hristo
    Participant

    Hello rbmanian75,

    You could set new datafield in the source for the concrete DataAdapter and this will create the new one.
    But if you do not set a new value (in beforeLoadComplete or loadServerData) will consist records with that field with value “undefined”.
    Also, I would like to suggest to look at this article, could be helpful:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    rbmanian75
    Participant

    Thank you for the reply. I will make sure that the source has the display field.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.