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

Thank you so much Peter Stoev.

[selvaParticipant]

Hi Peter Stoev,

var commit = $("#jqxgrid").jqxGrid('addrow', "first", {});

this code also adds last row of the grid.

[selvaParticipant]

Hi Peter Stoev,

var commit = $("#jqxgrid").jqxGrid('addrow', "first", {});

this is correct.

[selvaParticipant]

Hi Dimitar,

I checked that using alert() function.If i removed this below code,

$('#brand_grid_edit').jqxGrid('setcellvalue', i, 'advertiserId', data[0]);
$('#brand_grid_edit').jqxGrid('setcellvalue', i, 'advertiserName', data[1]);

for example if temp.length is equvalent to 2,two empty row was generated successfully.

[selvaParticipant]

Hi Dimitar,

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

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

[selvaParticipant]

Could you please help me.

[selvaParticipant]

Hi Peter Stoev,

Anyway thank you so much for spending your valuable times with me.Once again thanks a lot.

[selvaParticipant]

Hi Peter Stoev,

That’s the matter.I dont know why its not working in my app. Could you please suggest me if any other way to show my records like jqxGrid.

[selvaParticipant]

Hi Peter Stoev,

This is my code in JSFiddle for your reference.

“http://jsfiddle.net/smpskumar/fZhEc/161/”

[selvaParticipant]

Hi Peter Stoev,

I am using jqx-all.js (v3.2.1).But nothing to be changed.same error occurs.even headers is not displayed in Grid.
Uncaught TypeError: Cannot call method ‘height’ of undefined

[selvaParticipant]

Hi Peter Stoev,

My code is working fine in JSFiddle but it doesn’t works in my application.
Here is for your reference.

[selvaParticipant]

Hi Peter Stoev,

I just initialize height and width property for jqxWindow.

$("#break_pattern_window").jqxWindow({resizable: false, autoOpen: false, width: 500, height: 300, theme: theme_name, isModal: true});

Already I did same scenario for outer grid also.But I used onclick to add rows for outer grid instead of rowdoubleclick event.

[selvaParticipant]

Hi Peter Stoev,

Thanks for helped me. I got it.

[Author]

Posts