set value dynamically in jqxgrid custom dropdownlist

[selvaParticipant]

Hi,

I want to set value dynamically instead of static in jqxGrid custom dropdownlist column. In this example shows static initialization.

var gridSource =
            {
                datatype: "array",
                localdata: 
                [
                    { countryCode: "UK" },
                    { countryCode: "US" },
                    { countryCode: "DE" },
                    { countryCode: "FR" },
                    { countryCode: "IN" },
                    { countryCode: "HK" }
                ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source. 
                    // values.name - specifies the field's name in the foreign source. 
                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'countryCode', type: 'string'}
                ]
            };

instead of dynamic Initialization for example

var codes="US:IN:HK";
var code=codes.split(":");
var gridSource =
            {
                datatype: "array",
                localdata: 
                [
                    for(var i=0;i<code.length;i++){
                     {countryCode:code[i]}
                    } 
                ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source. 
                    // values.name - specifies the field's name in the foreign source. 
                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'countryCode', type: 'string'}
                ]
            };

how can I do like this.Please help me

[selvaParticipant]

Could you please help me.

[DimitarParticipant]

Hello selva,

Here is how to populate localdata dynamically:

var codes = "US:IN:HK";
var code = codes.split(":");
var localdata = new Array();
for (var i = 0; i < code.length; i++) {
    localdata.push({
        countryCode: code[i];
    });
};
var gridSource = {
    datatype: "array",
    localdata: localdata,
    datafields: [
        // name - determines the field's name.
        // value - the field's value in the data source.
        // values - specifies the field's values.
        // values.source - specifies the foreign source. The expected value is an array.
        // values.value - specifies the field's value in the foreign source. 
        // values.name - specifies the field's name in the foreign source. 
        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
        { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
        { name: 'countryCode', type: 'string'}
    ]
};

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

when I wrote this line
localdata.push({comTyId:temp[i];});

I got below error.
Uncaught SyntaxError: Unexpected token }

Here is my Code:

var source =
                        {
                            datatype: "json",
                            datafields:
                                    [
                                        {name: 'comTyId', type: 'string'},
                                        {name: 'commTypename', type: 'string'}
                                    ],
                            id: 'id',
                            url: 'getCommercialType'
                        };
                var dataAdapter = new $.jqx.dataAdapter(source, {autoBind: true});

var localdata = new Array();
                $('#jqxgrid_dealType').bind('rowselect', function(event) {
                    var rows = event.args.rowindex;
                    var deal_ty_id_edit = $('#jqxgrid_dealType').jqxGrid('getcellvalue', rows, 'dealTyId');
                    var result = $.ajax({type: "GET", url: "getCommercialTypeByDealType", data: "deal_ty_id=" + deal_ty_id_edit, async: false}).responseText;
                    var temp = result.split(":");
                    for (var i = 0; i < temp.length; i++) {
                        localdata.push({comTyId:temp[i];});
                    }
                });
                var gridSource_edit =
                        {
                            datatype: "array",
                            localdata: localdata,
                            datafields: [
                                {name: 'commTypename', value: 'comTyId', values: {source: dataAdapter.records, value: 'comTyId', name: 'commTypename'}},
                                {name: 'comTyId', type: 'string'}
                            ]
                        };
                var gridAdapter_edit = new $.jqx.dataAdapter(gridSource_edit);
                $('#jqxGrid_commercial_edit').jqxGrid(
                        {
                            width: '250',
                            height: '250',
                            theme: theme_name,
                            source: gridAdapter_edit,
                            editable: true,
                            showtoolbar: true,
                            toolbarheight: 25,
                            rendertoolbar: function(toolbar) {
                                var me = this;
                                var container = $("<div style='margin: 5px;'></div>");
                                var addButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Add Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/add.png'/></div>");
                                var deleteButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Delete Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/minus.png'/></div>");
                                toolbar.append(container);
                                container.append(addButton);
                                container.append(deleteButton);
                                addButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                deleteButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                addButton.click(function(event) {
                                    var datarow = generaterow();
                                    var commit = $("#jqxGrid_commercial_edit").jqxGrid('addrow', null, datarow);
                                });
                                deleteButton.click(function() {
                                    var selectedrowindex = $("#jqxGrid_commercial_edit").jqxGrid('getselectedrowindex');
                                    var rowscount = $("#jqxGrid_commercial_edit").jqxGrid('getrows');
                                    if (selectedrowindex >= 0 && selectedrowindex < rowscount.length) {
                                        var id = $("#jqxGrid_commercial_edit").jqxGrid('getrowid', selectedrowindex);
                                        var commit = $("#jqxGrid_commercial_edit").jqxGrid('deleterow', id);
                                    }
                                });
                            },
                            columns: [
                                {text: 'Commercial ID', columntype: 'dropdownlist', width: 230, datafield: 'comTyId', displayfield: "commTypename",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter, displayMember: "commTypename", valueMember: 'comTyId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                }
                            ]
                        });

where jqxgrid_dealType is a outer Grid. set inner grid values dynamically while rowselect event.

[DimitarParticipant]

Hi selva,

I am sorry, in the code I provided you there is an extra ;

Try as follows:

localdata.push({comTyId:temp[i]});

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

I have one more doubt.Those inserted row is make to disabled. How can I do this.

[DimitarParticipant]

Hi selva,

Please check out the demo Disable Editing of Rows. In it, change the cellbeginedit callback to:

var cellbeginedit = function (row, datafield, columntype, value) {
    if (rowAdded == true) {
        var rows = $('#jqxgrid').jqxGrid('getrows');
        if (row == rows.length - 1) return false;
    };
}

rowAdded is a flag that initially should be false and should be set to true when you click the “add” button.

Best Regards,
Dimitar

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

[fresherParticipant]

Hi Dimitar Same Isssue For me ,

I would Like to add Two columns Add and Delete , I have around 45Thousand Records , So Is there any alternative other than looping through it and adding the column to json

Can I add Statically???

$(“#jqxgrid”).jqxGrid(
columns: [
{ text: ‘Add’, cellsrenderer: linkrenderer },
{ text: ‘Delete’, cellsrenderer: linkrenderer },
// Other Columns
]

});

I have written like this In linkReneder Function I can get Value from data that is binded using Row number but in

I can only see column header but not rows with columns (Add,Delete )

[DimitarParticipant]

Duplicate post: http://www.jqwidgets.com/community/topic/adding-static-columns-to-grid-with-dynamic-columns/#post-83633.

[Author]

Posts