Cannot set value for dropdownlist type column in jqxGrid

[selvaParticipant]

Hi,
I have jqxGrid. It has four columns like 2 dropdownlist type columns and 2 DateTimeInput type columns.The dropdownlist type column has list of values. My problem is I can’t set value dynamically in dropdownlist type columns. for ex.
In my dropdownlist type column has
valuemember–>display member
1 –>first break
2 –>second break
3 –>end break
I am using ‘setcellvaluebyid’ method to set the values in dropdownlist type columns.
$(“#jqxgrid”).jqxGrid(‘setcellvaluebyid’,0,’breakFormtId’,’1′) where 0 is row index,breakFormtId is column name and 1 is value.

[DimitarParticipant]

Hello selva,

If you want to set a cell value using the row index, use setcellvalue instead of setcellvaluebyid (which requires the row id):

$(“#jqxgrid”).jqxGrid(‘setcellvalue’,0,’breakFormtId’,’1′)

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

I tried it also.but its not working.This is my code.
for (var i = 0; i < temp.length; i++) {
var datarow = generaterow(i);
var commit = $(“#break_pattern_footer_edit”).jqxGrid(‘addrow’, null, datarow);
var data = temp[i].split(“^”);
$(“#break_pattern_footer_edit”).jqxGrid(‘setcellvalue’, i, ‘breakRltvtyId’, data[2]);
$(“#break_pattern_footer_edit”).jqxGrid(‘setcellvalue’, i, ‘breakFormtId’, data[3]);
}

[DimitarParticipant]

Hi selva,

Please post a larger code sample, so that we may be able to determine the source of the issue. Remember to format it by selecting it and clicking the code button in the toolbar.

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,
This is the code for your reference.

var source_break_pattern =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'client', type: 'string'},
                                {name: 'prgbrkptnid', type: 'string'},
                                {name: 'prgbrkptnnm', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakPattern"
                        };
                var dataAdapter_break_pattern = new $.jqx.dataAdapter(source_break_pattern);
                $("#jqxgrid_breakPattern").jqxGrid(
                        {
                            width: 500,
                            theme: theme_name,
                            height: 400,
                            source: dataAdapter_break_pattern,
                            filterable: true,
                            autoshowfiltericon: true,
                            sortable: true,
                            pageable: true,
                            columnsresize: true,
                            showtoolbar: true,
                            toolbarheight: 40,
                            rendertoolbar: function(toolbar) {
                                var me = this;
                                var container = $("<div style='margin: 5px;'></div>");
                                var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'><font color='#fff' style='font:bold 14px Arial, Helvetica;'>Break Pattern</font></span>");
                                var addButton = $("<div style='float: right; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='jqx/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                                var editButton = $("<div style='float: right; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='jqx/images/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
                                toolbar.append(container);
                                container.append(span);
                                container.append(editButton);
                                container.append(addButton);
                                addButton.jqxButton({width: 60, height: 20, theme: theme_name});
                                editButton.jqxButton({width: 65, height: 20, theme: theme_name});
                                addButton.click(function(event) {
                                    $("#break_pattern_new").jqxWindow('open');
                                });
                                editButton.click(function(event) {
                                    var rowindexes = $("#jqxgrid_breakPattern").jqxGrid('getselectedrowindexes');
                                    if (rowindexes.length > 0) {
                                        $("#break_pattern_edit").jqxWindow('open');
                                    } else {
                                        alert("Please select a row to edit");
                                        return false;
                                    }
                                });
                            },
                            columns: [
                                {text: 'Client', datafield: 'client', width: 100, hidden: true},
                                {text: 'Break Pattern Id', width: 250, datafield: 'prgbrkptnid'},
                                {text: 'Break Pattern Name', width: 250, datafield: 'prgbrkptnnm'}
                            ]
                        });
                var generaterow = function(i) {
                    var row = {};
                    return row;
                };
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, {autoBind: true});
                var dataAdapter_break_format = new $.jqx.dataAdapter(source_break_format, {autoBind: true});
                var gridSource =
                        {
                            datatype: "array",
                            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: 'breakRltvtyNam', value: 'breakRltvtyId', values: {source: dataAdapter_break_relativity.records, value: 'breakRltvtyId', name: 'breakRltvtyNam'}},
                                {name: 'breakRltvtyId', type: 'string'},
                                {name: 'breakFrmtName', value: 'breakFormtId', values: {source: dataAdapter_break_format.records, value: 'breakFormtId', name: 'breakFrmtName'}},
                                {name: 'breakFormtId', type: 'string'},
                                {name: 'startTime', type: 'string'},
                                {name: 'duration', type: 'string'}
                            ]
                        };
                var gridAdapter = new $.jqx.dataAdapter(gridSource);
$('#break_pattern_footer_edit').jqxGrid(
                        {
                            width: '600',
                            height: '250',
                            theme: theme_name,
                            source: gridAdapter,
                            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() {
                                    var rows = $('#break_pattern_footer_edit').jqxGrid('getrows');
                                    var prgbrkpatnnm_edit = $('#prgbrkpatnnm_edit').val();
                                    var rlvnt_drtn_edit = $('#rlvnt_drtn_edit').jqxDateTimeInput('getText');
                                    rlvnt_drtn_edit = rlvnt_drtn_edit.toString();
                                    if (prgbrkpatnnm_edit.length === 0 || rlvnt_drtn_edit === "00:00:00") {
                                        alert("Please Enter Header Level");
                                    } else if (rows.length === 0) {
                                        var datarow = generaterow();
                                        var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);
                                    } else if (rows.length === 1) {
                                        var break_rltvty_id = $('#break_pattern_footer_edit').jqxGrid('getcellvaluebyid', rows.length - 1, 'breakRltvtyId');
                                        var break_formt_id = $('#break_pattern_footer_edit').jqxGrid('getcellvaluebyid', rows.length - 1, 'breakFormtId');
                                        var start_time = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 1, 'startTime');
                                        var duration = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 1, 'duration');
                                        break_formt_id = String(break_formt_id);
                                        break_rltvty_id = String(break_rltvty_id);
                                        duration = String(duration);
                                        start_time = String(start_time);
                                        if (duration === "undefined") {
                                            duration = "00:00:00";
                                        }
                                        var relevant_time = convertToSeconds(rlvnt_drtn_edit);
                                        var format_time = convertToSeconds(duration);
                                        if ((break_formt_id === "" || break_formt_id === "undefined") || (break_rltvty_id === "" || break_rltvty_id === "undefined") ||
                                                (start_time === null || start_time === "undefined") || (duration === null || duration === "undefined" || duration === "00:00:00")) {
                                            alert("Line Item Can't be Empty");
                                        } else if (relevant_time < format_time) {
                                            alert("Break Format duration not exceeds Relevant Duration");
                                        } else {
                                            var datarow = generaterow();
                                            var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);
                                        }
                                    } else {
                                        var break_rltvty_id = $('#break_pattern_footer_edit').jqxGrid('getcellvaluebyid', rows.length - 1, 'breakRltvtyId');
                                        var break_formt_id = $('#break_pattern_footer_edit').jqxGrid('getcellvaluebyid', rows.length - 1, 'breakFormtId');
                                        var start_time = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 1, 'startTime');
                                        var duration = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 1, 'duration');
                                        var break_rltvty_id_pre = $('#break_pattern_footer_edit').jqxGrid('getcellvaluebyid', rows.length - 2, 'breakRltvtyId');
                                        var start_time_pre = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 2, 'startTime');
                                        var duration_pre = $('#break_pattern_footer_edit').jqxGrid('getcelltext', rows.length - 2, 'duration');
                                        break_formt_id = String(break_formt_id);
                                        break_rltvty_id = String(break_rltvty_id);
                                        break_rltvty_id_pre = String(break_rltvty_id_pre);
                                        duration = String(duration);
                                        start_time = String(start_time);
                                        start_time_pre = String(start_time_pre);
                                        duration_pre = String(duration_pre);
                                        var start_time_to_seconds = convertToSeconds(start_time);
                                        var total_time_to_seconds = parseInt(convertToSeconds(start_time_pre)) + parseInt(convertToSeconds(duration_pre));
                                        if (duration === "undefined") {
                                            duration = "00:00:00";
                                        }
                                        var relevant_time = convertToSeconds(rlvnt_drtn_edit);
                                        var format_time = 0;
                                        for (var i = 0; i < rows.length; i++) {
                                            var total_duration = $('#break_pattern_footer_edit').jqxGrid('getcelltext', i, 'duration');
                                            total_duration = String(total_duration);
                                            format_time += parseInt(convertToSeconds(total_duration));
                                        }
                                        if ((break_formt_id === "" || break_formt_id === "undefined") || (break_rltvty_id === "" || break_rltvty_id === "undefined") ||
                                                (start_time === null || start_time === "undefined") || (duration === null || duration === "undefined" || duration === "00:00:00")) {
                                            alert("Line Item Can't be Empty");
                                        } else if (relevant_time < format_time) {
                                            alert("Break Format duration not exceeds Relevant Duration");
                                        } else if ((start_time === start_time_pre) || (break_rltvty_id === break_rltvty_id_pre) ||
                                                (total_time_to_seconds >= start_time_to_seconds)) {
                                            alert("Break Time Overlap, Please change accordingly");
                                        } else {
                                            var datarow = generaterow();
                                            var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);
                                        }
                                    }
                                });
                                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: '1'});
                                    }
                                },
                                {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: '1'});
                                    }
                                },
                                {text: 'Start Time', columntype: 'datetimeinput', datafield: 'startTime', cellsformat: 'HH:mm:ss', width: 100,
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDateTimeInput({showCalendarButton: false});
                                    }
                                },
                                {text: 'Duration', columntype: 'datetimeinput', datafield: 'duration', cellsformat: 'HH:mm:ss', width: 100, editable: false}
                            ]
                        });
$('#jqxgrid_breakPattern').bind('rowselect', function(event) {
                    var selectedRowIndex = event.args.rowindex;
                    var client = $('#jqxgrid_breakPattern').jqxGrid('getcelltext', selectedRowIndex, 'client');
                    var prgbrkptnid_edit = $('#jqxgrid_breakPattern').jqxGrid('getcelltext', selectedRowIndex, 'prgbrkptnid');
                    var prgbrkpatnnm_edit = $('#jqxgrid_breakPattern').jqxGrid('getcelltext', selectedRowIndex, 'prgbrkptnnm');
                    $('#break_pattern_client').val(client);
                    $('#prgbrkptnid_edit').val(prgbrkptnid_edit);
                    $('#prgbrkpatnnm_edit').val(prgbrkpatnnm_edit);
                    var rlvnt_time = $.ajax({type: "GET", url: "getRelevantTime", data: "prgbrkptnid_edit=" + prgbrkptnid_edit, async: false}).responseText;
                    var temp = rlvnt_time.split("~");
                    var data = temp[0].split("^");
                    data[0] = data[0].toString();
                    data[0] = ConvertToDate(data[0]);
                    $('#rlvnt_drtn_edit').jqxDateTimeInput({disabled: true});
                    $('#rlvnt_drtn_edit').jqxDateTimeInput('setDate', new Date(data[0]));
                    $('#language_id_edit').val(data[1]);
                    for (var i = 0; i < temp.length; i++) {
                        var datarow = generaterow(i);
                        var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);
                        var data = temp[i].split("^");
                        $("#break_pattern_footer_edit").jqxGrid('setcellvalue', i, 'breakRltvtyId', data[2]);
                        $("#break_pattern_footer_edit").jqxGrid('setcellvalue', i, 'breakFormtId', data[3]);
                        data[4] = data[4].toString();
                        data[4] = ConvertToDate(data[4]);
                        $("#break_pattern_footer_edit").jqxGrid('setcellvalue', i, 'startTime', new Date(data[4]));
                        data[5] = data[5].toString();
                        data[5] = ConvertToDate(data[5]);
                        $("#break_pattern_footer_edit").jqxGrid('setcellvalue', i, 'duration', new Date(data[5]));
                    }
                });

[DimitarParticipant]

Hi selva,

Please check out the JSFiddle example about setcellvalue.

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

I tried everything but its not working.Please review my code and suggest me if you found any mistake in my code.

[DimitarParticipant]

Hi selva,

Is the grid empty by the time you call setcellvalue? If not, then the indexes will not be correct (i.e. if the grid has five rows and you add a new one it will be the sixth, but you will change the cell of the first, because i = 0).

We suggest you set the row data directly when you add it (in addrow) so that there is no need to change it after that with setcellvalue.

Best Regards,
Dimitar

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

[selvaParticipant]

Hi Dimitar,

Yeah that’s correct. But in this scenario initially my grid was empty.That’s why I am using setcellvale or setcellvaluebyid. I add no of rows and set corresponding values dynamically.
(i.e if temp.length is equivalent to 3, I add one row and set the values for cells and so..)

[DimitarParticipant]

Hi selva,

Please try setting the values of row cells in the addrow method.

Best Regards,
Dimitar

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

[Author]

Posts