jQuery UI Widgets Forums Grid select value from combobox base on another cell combox value

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

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

  • selva
    Participant

    Hi,

    I have a grid with two combobox columns. If i select one value from combobox(1st column) that corresponding value is selected dynamically in 2nd combobox column.

    Here my part of code

    
    var list= [
            {value: "1", label: "One"},
            {value: "2", label: "Two"},
            {value: "3", label: "Three"}   
        ];
    
    columns:[
    {text: 'CommercialType', datafield: 'commercialType', width: 150, columntype: 'combobox', displayfield: 'commercialName',
                            createeditor: function(row, column, editor) {
                                editor.jqxComboBox({source: dataAdapter_commercial, selectedIndex: -1, dropDownHeight: 100, valueMember: 'comTyId', displayMember: 'commTypename', promptText: 'Please Choose', selectionMode: "dropDownList"});
                            },
                            cellvaluechanging: function(row, datafield, columntype, oldvalue, newvalue) {
                                var result = $.ajax({type: 'GET', data: 'comm_ty_id=' + newvalue.value, url: 'getUOMByCommercialType', async: false}).responseText;
                                $('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result);
                            }
                        },
    {text: 'Unit of Measure', datafield: 'unit', width: 120, editable: false,
    createeditor: function(row, column, editor) {
                                editor.jqxComboBox({source: list, selectedIndex: -1, dropDownHeight: 100, valueMember: 'value', displayMember: 'label', promptText: 'Please Choose', selectionMode: "dropDownList"});
                            },
    },
    ]
    

    for ex:
    In cell value change event, i am calling ajax to get the value.Assume that ajax returns “2”. that is stored in result variable.
    after that i want to select that corrresponding value from 2nd combobox column.

    this line does not work
    $('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result);
    could you please help me


    Dimitar
    Participant

    Hello selva,

    We suggest you make your Ajax and setcellvalue calls on the cellendedit event and not in the cellvaluechanging callback function.

    Best Regards,
    Dimitar

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


    selva
    Participant

    Hi Dimitar,

    could you please give code for this functionality. I tried but it not works.


    Dimitar
    Participant

    Hi selva,

    First, remove cellvaluechanging:

    columns:[
    {text: 'CommercialType', datafield: 'commercialType', width: 150, columntype: 'combobox', displayfield: 'commercialName',
                            createeditor: function(row, column, editor) {
                                editor.jqxComboBox({source: dataAdapter_commercial, selectedIndex: -1, dropDownHeight: 100, valueMember: 'comTyId', displayMember: 'commTypename', promptText: 'Please Choose', selectionMode: "dropDownList"});
                            },
                        },
    {text: 'Unit of Measure', datafield: 'unit', width: 120, editable: false,
    createeditor: function(row, column, editor) {
                                editor.jqxComboBox({source: list, selectedIndex: -1, dropDownHeight: 100, valueMember: 'value', displayMember: 'label', promptText: 'Please Choose', selectionMode: "dropDownList"});
                            },
    },
    ]

    Then bind to the cellendedit event:

    $("#agreementGrid").on('cellendedit', function (event) {
        var column = args.datafield;
        var row = args.rowindex;
        var value = args.value;
        var oldvalue = args.oldvalue;
    
        if (column == "commercialType") {
            var result = $.ajax({
                type: 'GET',
                data: 'comm_ty_id=' + value,
                url: 'getUOMByCommercialType',
                async: false
            }).responseText;
            $('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result);
        }
    });

    Best Regards,
    Dimitar

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


    selva
    Participant

    Hi Dimitar,

    Thanks. It’s working fine. But I have another one doubt. I want to add rows dynamically with data, at that time how can i call cellendedit function.

    for example:

    var result=1,2^2,4
    var temp=result.split("^");
    var localdata=new Array();
    for(int i=0;i<temp.length;i++){
    var data=temp[i].split(",");
    localdata.push({commercialType: data[0],unit: data[1]});
    }
    var source={
    datatype: 'array',
    datafields: [
    {name: 'commercialName', value: 'comTyId', values: {source: dataAdapter_commercial_edit.records, value: 'comTyId', name: 'commTypename'}},
    {name: 'commercialType', type: 'string'},
    {name: 'unitName', value: 'uomId', values: {source: list, value: 'value', name: 'label'}},
    {name: 'unit', type: 'string'},
    ],
    localdata:localdata
    }
    

    this code generates no of rows equivalent to temp.length but not loaded that corresponding value from combobox. How can i call cellendedit function for this scenario.


    Dimitar
    Participant

    Hi selva,

    cellendedit is not called when the grid is loaded. However, you can execute your code in the grid’s ready callback function or its bindingcomplete event handler.

    Best Regards,
    Dimitar

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


    selva
    Participant

    Hi Dimitar,

    If you dont mine, please provide sample code for this scenario.


    Dimitar
    Participant

    Hi selva,

    Please try the following:

    ready: function () {
        var rows = $('#agreementGrid').jqxGrid('getrows');
        for (var i = 0; i < rows.length; i++) {
            var currentValue = rows[i].commercialType;
            var result = $.ajax({
                type: 'GET',
                data: 'comm_ty_id=' + currentValue,
                url: 'getUOMByCommercialType',
                async: false
            }).responseText;
            $('#agreementGrid').jqxGrid('setcellvalue', i, 'unit', result);
        }
    }

    where ready is the grid’s callback function, which fires when the grid is initialized and the binding is complete.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.