[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..)

[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.

[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]));
                    }
                });

[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]);
}

[selvaParticipant]

Thanks Dimitar, but I want to set values based on onchanging dropdown values.

[selvaParticipant]

Thanks Dimitar.

[selvaParticipant]

Thanks, i found my mistake.

[selvaParticipant]

Hi Peter Stoev,

Thanks for helped me.

But in my point of view. Initially i want to display 10 dropdownlist rows. After that user wants to add more rows dynamically.

[Author]

Posts