jQWidgets Forums

jQuery UI Widgets Forums Grid jqxDropdownlist – inline Editing Grid

This topic contains 11 replies, has 2 voices, and was last updated by  Nadezhda 10 years ago.

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

  • user3i
    Participant

    Hi,

    I am using the jqxDropdownList for the jqxGrid inline editing and Once a value is selected from the jqxDropdownList inside the grid, it updates the value to json with displaymember instead of valuemember.

    So, How can we get the valumember value in the josn for the above scenario.


    Nadezhda
    Participant

    Hello user3i,

    You can find how to set/get ‘valuemember’ in API Documentation.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    user3i
    Participant

    Hi ,

    Please refer the following example and if we try to select and set the value for column “shipcountry” as Germany then the row data should be “G” for the column shipcountry but it gives “Germany” for that.

    Example:
    ———-
    <div id=”jqxgrid”></div>

    $(document).ready(function () {
    // prepare the data
    var data = new Array();
    var firstNames = [
    “Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”];
    var lastNames = [
    “Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”];
    var productNames = [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”];
    var priceValues = [
    “2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”];
    for (var i = 0; i < 100; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row[“productname”] = productNames[productindex];
    row[“price”] = price;
    row[“quantity”] = quantity;
    row[“total”] = price * quantity;
    data[i] = row;
    }
    var source = {
    localdata: data,
    datatype: “array”
    };
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    source: source,
    selectionmode: ‘singlecell’,
    editable: true,
    pageable: true,
    autoheight: true,
    columns: [
    {
    text: ‘Ship City’, datafield: ‘ShipCity’, width: 150, columntype: ‘combobox’,
    createeditor: function (row, column, editor) {
    // assign a new data source to the combobox.
    var list = [‘Stuttgart’, ‘Rio de Janeiro’, ‘Strasbourg’];
    editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: “Please Choose:” });
    },
    // update the editor’s value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == “”) return oldvalue;
    }
    },
    {
    text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150, columntype: ‘dropdownlist’,

    createeditor: function (row, column, editor) {
    // assign a new data source to the dropdownlist.
    var val = ‘G,B,F’;
    var dis = ‘Germany,Brazil,France’;
    var listval =val.split(“,”) ;
    var listdis =dis.split(“,”);
    var children=new Array();
    for(var i=0;i<listval.length;i++)
    {
    var obj=new Object();
    if(typeof(listval[i])!=”undefined”)
    {
    obj.dropdownLabel=listdis[i];
    obj.dropdownValue=listval[i];
    children.push(obj);
    }
    }

    editor.jqxDropDownList({ autoDropDownHeight: true, source: children, displayMember: ‘dropdownLabel’, valueMember: ‘dropdownValue’ });
    },
    // update the editor’s value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == “”) return oldvalue;
    }
    },
    { text: ‘Ship Name’, datafield: ‘ShipName’, columntype: ‘combobox’ }
    ]
    });
    });

    Result:

    $(“#jqxgrid”).jqxGrid(‘getrowdata’, 0);
    ShipCountry: “Germany” // it should be G
    firstname: “Andrew”
    lastname: “Petersen”
    price: 3.8
    productname: “Cramel Latte”
    quantity: 8
    total: 30.4
    uid: 0


    Nadezhda
    Participant

    Hi user3i,

    Please, find the following part of code which shows how to use ‘valueMember’ and ‘displayMember’ in editor.jqxDropDownList. I hope it would be helpful to you.

    {
        text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
        createeditor: function (row, column, editor) {
            // assign a new data source to the dropdownlist.
            var list = [
                {    
                    text: "Germany",
                    value: "G"
                },
                {   
                    text: "Brazil",
                    value: "B"
                },
                {
                    text: "France",
                    value: "F"
                }
            ];
            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, displayMember: 'text', valueMember: 'value' });
            editor.on('change', function (event) {
                alert("label: " + event.args.item.label + ", value: " + event.args.item.value);
            });
        },

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    user3i
    Participant

    Hi Nadezhda,

    Thanks for your reply. I can understand the working terminology.

    We can get the event.args.item.label as well as event.args.item.value inside the change() function.

    In my case the datagrid cell should show the displaymember value and the mapped json should contain the valuemember value but it will not happen automatically, is it right?

    If then, we have to do some coding to set the valuemember value to the mapped-json once the dropdownlist selected, correct?

    regards,
    user3i.


    Nadezhda
    Participant

    Hi user3i,

    Yes, you can use mapping with JSON Data. For more information you may refer to the jqxDataAdapter’s “Getting Started” help topic.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    user3i
    Participant

    Hi Nadezhda,

    Thanks for you reply. I had read the same links.

    Please see the example below, Once we selected the value from the shipcountry column with value “Brazil”, it updates the json with “Brazil” instead of “B” why this is happening, it should update the valumember “B” and display the displaymember “Brazil”.

    Code:-

    $(document).ready(function() {
    // prepare the data
    var data = new Array();
    var firstName = [
    “Andrew”, “Nancy”, “Shelley”, “Regina”
    ];
    var shipCountry = [
    “Germany”, “Brazil”, “France”, “Italy”
    ];
    var shipproduct = [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”
    ];
    var children = new Array();
    for (var i = 0; i < 4; i++) {
    var row = {};
    row.firstName = firstName[i];
    row.shipCountry = shipCountry[i];
    row.shipproduct = shipproduct[i];
    children.push(row);
    }
    var obj = new Object();
    obj.children = children;
    var source = {
    datatype: “json”,
    localdata: obj,
    datafields: [{
    name: ‘firstName’,
    type: ‘string’
    }, {
    name: ‘shipCountry’,
    type: ‘string’
    }, {
    name: ‘shipproduct’,
    type: ‘string’
    }]
    };
    $(“#jqxgrid”).jqxGrid({
    width: 850,
    source: source,
    selectionmode: ‘singlecell’,
    editable: true,
    pageable: true,
    autoheight: true,
    columns: [{
    text: ‘first Names’,
    datafield: ‘firstName’,
    width: 150,
    columntype: ‘combobox’,
    createeditor: function(row, column, editor) {
    // assign a new data source to the combobox.
    var list = [‘Stuttgart’, ‘Rio de Janeiro’, ‘Strasbourg’];
    editor.jqxComboBox({
    autoDropDownHeight: true,
    source: list,
    promptText: “Please Choose:”
    });
    }

    }, {
    text: ‘ship Country’,
    datafield: ‘shipCountry’,
    width: 150,
    columntype: ‘dropdownlist’,
    createeditor: function(row, column, editor) {
    var list = [{
    text: “Germany”,
    value: “G”
    }, {
    text: “Brazil”,
    value: “B”
    }, {
    text: “France”,
    value: “F”
    }];

    editor.jqxDropDownList({
    autoDropDownHeight: true,
    source: list,
    displayMember: ‘text’,
    valueMember: ‘value’
    });
    editor.on(‘change’, function(event) {
    alert(“label: ” + event.args.item.label + “, value: ” + event.args.item.value);
    });
    }

    }, {
    text: ‘product Name’,
    datafield: ‘shipproduct’,
    columntype: ‘combobox’
    }]
    });
    });

    Result:-

    $(‘#jqxgrid’).jqxGrid(‘source’).records
    [ObjectfirstName: “Andrew”shipCountry: “Brazil”shipproduct: “Black Tea”uid: 0__proto__: Object, ObjectfirstName: “Nancy”shipCountry: “Brazil”shipproduct: “Green Tea”uid: 1__proto__: Object, ObjectfirstName: “Shelley”shipCountry: “Germany”shipproduct: “Caffe Espresso”uid: 2__proto__: Object, ObjectfirstName: “Regina”shipCountry: “Brazil”shipproduct: “Doubleshot Espresso”uid: 3__proto__: Object]


    Nadezhda
    Participant

    Hi user3i,

    Please, find the following example where it is shown data fields mapping with JSON Data. I hope it would be helpful to you.

    var data = [
        {
            "state": {
                "id": "x526",
                "city": {
                    "name": "Beverly Hills",
                    "id": 90210,
                    "value": "Beverly Hills"
                }
            }
        }
    ];
    
    var source = {
        datatype: 'json',
        localdata: data,
        datafields:
        [
            {
                name: 'cityName', map: 'state>city>name'
            }
        ]
    };
    
    var dataAdapter = new $.jqx.dataAdapter(source);

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    jqxDropdownlist – inline Editing Grid #70437

    user3i
    Participant

    Hi Nadezhda,

    Thanks for your reply.

    I made an example with your sample, after selection Still I am getting displaymember value in json not getting the valuemember in the json.
    Please refer the below example.

    Code:-

    $(document).ready(function() {
    // prepare the data
    var data = [
    {
    “Employee”: {
    “id”: “x526”,
    “Details”: {
    “shipproduct”: “Black Tea”,
    “shipCountry”: “D”
    }
    }
    }
    ];

    var source = {
    datatype: ‘json’,
    localdata: data,
    datafields:
    [
    {
    name: ‘id’, map: ‘Employee>id’,
    name: ‘shipCountry’, map: ‘Employee>Details>shipCountry’,
    name: ‘shipproduct’, map: ‘Employee>Details>shipproduct’
    }
    ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var source = dataAdapter;
    $(“#jqxgrid”).jqxGrid({
    width: 850, source: source,selectionmode: ‘singlecell’,editable: true,pageable: true,autoheight: true,
    columns: [{
    text: ‘id’,datafield: ‘id’,width: 150,columntype: ‘combobox’},
    {
    text: ‘ship Country’, datafield: ‘shipCountry’,width: 150,columntype: ‘dropdownlist’,
    createeditor: function(row, column, editor) {
    var list = [{
    text: “Germany”,value: “G”}, {
    text: “Brazil”,value: “B” }, {
    text: “France”,value: “F” }];

    editor.jqxDropDownList({
    autoDropDownHeight: true, source: list,displayMember: ‘text’,valueMember: ‘value’
    });
    editor.on(‘change’, function(event) {
    alert(“label: ” + event.args.item.label + “, value: ” + event.args.item.value);
    });
    }

    }, {
    text: ‘product Name’,datafield: ‘shipproduct’
    }]
    });
    });

    Result:-

    $(‘#jqxgrid’).jqxGrid(‘source’).records
    [ObjectshipCountry: “Brazil”shipproduct: “Black Tea”uid: 0__proto__: Object]

    jqxDropdownlist – inline Editing Grid #70440

    Nadezhda
    Participant

    Hi user3i,

    You may take a look at the demo Keys/Values Column. It shows how to get the cell’s label and value.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    user3i
    Participant

    Hi Nadezhda,

    Thanks for your help and continuous reply.

    I can understand the above example and it works fine, for this scenario where we have the display and value field in Json.

    columns: [
    {text: ‘Employee Name’, datafield: ‘EmployeeID’, displayfield: ‘EmployeeName’, columntype: ‘dropdownlist’, width: 150}
    ]

    But in my secnario,

    I don’t have the display-field in json but i have a data-field (“Type”) with values “L,R,C” and I should display this to user as “Left,Right,Center” like this.

    If the dropdown is selected with “Left” then the data-field “Type” should get updated with “L” and the grid should display “Left” where I dont have a displayfield in my json which needs to be hardcoded in the page level.

    This is my scenario which is not matching with the above examples you porvided.

    Please help us on this.

    Thanks,
    User3i.


    Nadezhda
    Participant

    Hi User3i,

    Please, provide us with jsfiddle example so that we may get a better understanding of your scenario and be able to help.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.