jqxgrid loadserverdata and dropdown keyvalue binding

[rbmanian75Participant]

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.

[rbmanian75Participant]

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.

[HristoParticipant]

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

[rbmanian75Participant]

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

[HristoParticipant]

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

[rbmanian75Participant]

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

[Author]

Posts