Loading the dynamic value in grid

[selvaParticipant]

Hi,

I have grid which contains drop list column,In which the dynamic value has been assigned to the drop down list
which should be the initial value…

[DimitarParticipant]

Hello selva,

Please tell us what issue do you experience?

For initial value of a custom editor, please refer to the forum topic How to set default combobox value inside jqxgrid.

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

When I click the add button to add a new row with data.These data should be dynamically assigned to the drop down list.

This is my code

var source_break_relativity =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakRltvtyId', type: 'string'},
                                {name: 'breakRltvtyNam', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakRelativity"
                        };
var source_break_format =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakFormtId', type: 'string'},
                                {name: 'breakFrmtName', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakFormat"
                        };
var dataAdapter_break_relativity = new $.jqx.dataAdapter(source_break_relativity);
var dataAdapter_break_format = new $.jqx.dataAdapter(source_break_format);
var gridSource = {
                    datatype: "array",
                    datafields: [
                        {name: 'breakRltvtyId', type: 'string', value: 'breakRltvtyId', values: {source: dataAdapter_break_relativity.records, value: 'breakRltvtyId', name: 'breakRltvtyNam'}},
                        {name: 'breakFormtId', type: 'string', value: 'breakFormtId', values: {source: dataAdapter_break_format.records, value: 'breakFormtId', name: 'breakFrmtName'}}
                    ]
                };
var gridAdapter = new $.jqx.dataAdapter(gridSource);
('#break_pattern_footer_edit').jqxGrid(
                        {
                            width: '600',
                            height: '250',
                            theme: theme_name,
			    source: gridAdapter,
                            editable: true,
                            altrows: 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() {
				<strong>var datarow={};
				datarow["breakRltvtyId"]="2";
				datarow["breakFormtId"]="3";
				var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);</strong>
				});
				deleteButton.click(function() {
                                    var selectedrowindex = $("#break_pattern_footer_edit").jqxGrid('getselectedrowindex');
                                    var rowscount = $("#break_pattern_footer_edit").jqxGrid('getrows');
                                    if (selectedrowindex >= 0 && selectedrowindex < rowscount.length) {
                                        var id = $("#break_pattern_footer_edit").jqxGrid('getrowid', selectedrowindex);
                                        var commit = $("#break_pattern_footer_edit").jqxGrid('deleterow', id);
                                    }
                                });
                            },
                            columns: [
                                {text: 'Break Relativity', columntype: 'dropdownlist', width: 200, datafield: 'breakRltvtyId', displayfield: "breakRltvtyNam",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_relativity, displayMember: "breakRltvtyNam", valueMember: 'breakRltvtyId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                },
                                {text: 'Break Format', columntype: 'dropdownlist', width: 200, datafield: 'breakFormtId', displayfield: "breakFrmtName",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_format, displayMember: "breakFrmtName", valueMember: 'breakFormtId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                }
				]
				});

for ex:
breakRltvtyId–>breakRltvtyNam
1–>One
2–>Two
3–>Three

breakFormtId–>breakFrmtName
1–>1 min break
2–>2 min Break
3–>3 min break

suppose if I pass “2” to breakRltvtyId and “3” to breakFormtId, the grid add new row with corresponding label to be shown.

[selvaParticipant]

Hi Dimitar,

Could you please help me.

[selvaParticipant]

Hi Dimitar,

When I click the add button to add a new row with data.These data should be dynamically assigned to the drop down list.

This is my code

var source_break_relativity =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakRltvtyId', type: 'string'},
                                {name: 'breakRltvtyNam', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakRelativity"
                        };
var source_break_format =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakFormtId', type: 'string'},
                                {name: 'breakFrmtName', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakFormat"
                        };
var dataAdapter_break_relativity = new $.jqx.dataAdapter(source_break_relativity);
var dataAdapter_break_format = new $.jqx.dataAdapter(source_break_format);
var gridSource = {
                    datatype: "array",
                    datafields: [
                        {name: 'breakRltvtyId', type: 'string', value: 'breakRltvtyId', values: {source: dataAdapter_break_relativity.records, value: 'breakRltvtyId', name: 'breakRltvtyNam'}},
                        {name: 'breakFormtId', type: 'string', value: 'breakFormtId', values: {source: dataAdapter_break_format.records, value: 'breakFormtId', name: 'breakFrmtName'}}
                    ]
                };
var gridAdapter = new $.jqx.dataAdapter(gridSource);
('#break_pattern_footer_edit').jqxGrid(
                        {
                            width: '600',
                            height: '250',
                            theme: theme_name,
			    source: gridAdapter,
                            editable: true,
                            altrows: 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() {
				<strong>var datarow={};
				datarow["breakRltvtyId"]="2";
				datarow["breakFormtId"]="3";
				var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);</strong>
				});
				deleteButton.click(function() {
                                    var selectedrowindex = $("#break_pattern_footer_edit").jqxGrid('getselectedrowindex');
                                    var rowscount = $("#break_pattern_footer_edit").jqxGrid('getrows');
                                    if (selectedrowindex >= 0 && selectedrowindex < rowscount.length) {
                                        var id = $("#break_pattern_footer_edit").jqxGrid('getrowid', selectedrowindex);
                                        var commit = $("#break_pattern_footer_edit").jqxGrid('deleterow', id);
                                    }
                                });
                            },
                            columns: [
                                {text: 'Break Relativity', columntype: 'dropdownlist', width: 200, datafield: 'breakRltvtyId', displayfield: "breakRltvtyNam",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_relativity, displayMember: "breakRltvtyNam", valueMember: 'breakRltvtyId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                },
                                {text: 'Break Format', columntype: 'dropdownlist', width: 200, datafield: 'breakFormtId', displayfield: "breakFrmtName",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_format, displayMember: "breakFrmtName", valueMember: 'breakFormtId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                }
				]
				});

for ex:
breakRltvtyId–>breakRltvtyNam
1–>One
2–>Two
3–>Three

breakFormtId–>breakFrmtName
1–>1 min break
2–>2 min Break
3–>3 min break

suppose if I pass “2″ to breakRltvtyId and “3″ to breakFormtId, the grid add new row with corresponding label to be shown.

[DimitarParticipant]

Hello selva,

Here is an example, based on the demo Customized Editors. Note the initeditor callback function of the first two columns. The third column does not need any customization (it is a default “combobox” column and new values are automatically added to its editor source).

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: "../sampledata/orders.xml",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                },
                updaterow: function (rowid, rowdata, result) {
                    // synchronize with the server - send update command
                    // call result with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    result(true);
                }
            };
            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);

            var cityList = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
            var countryList = ['Germany', 'Brazil', 'France'];

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: ordersAdapter,
                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.
                            editor.jqxComboBox({ autoDropDownHeight: true, source: cityList, promptText: "Please Choose:" });
                        },
                        initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            editor.jqxComboBox({ source: cityList });
                        },
                        // 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.
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: countryList });
                        },
                        initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            editor.jqxDropDownList({ source: countryList });
                        },
                        // 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' }
                ]
            });

            $("#addRow").click(function () {
                var newRow = { "ShipCity": "Boston", "ShipCountry": "USA", "ShipName": "Dauntless" };
                $("#jqxgrid").jqxGrid("addrow", null, { "ShipCity": "Boston", "ShipCountry": "USA", "ShipName": "Dauntless" });
                cityList.push(newRow.ShipCity);
                countryList.push(newRow.ShipCountry);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <br />
        <button id="addRow">
            Add row</button>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts