Add new row in grid

[sathiyaseelan8Participant]

hi

i display data from database in a grid. then i did on row update function and its working fine.
now i am trying to add new row on the grid but its not working. when i clicked on the “add new row button”, its not calling the “addrow” function.

can anyone help me on this? thanks in advance

here is my code

<script type="text/javascript" src="../main_include/jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="../main_include/js/jquery.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="../main_include/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxgrid.edit.js"></script>  
<script type="text/javascript" src="../main_include/jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../main_include/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/globalization/globalize.js"></script>

<script type="text/javascript" src="../main_include/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../main_include/jqwidgets/jqxpanel.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
		var theme = 'ui-redmond';
		
		var maint_no = $('#input').attr('value');
		
		$(function() {
			$.getJSON("include/view_maint_main.php?maint_no="+maint_no, function(data) {
				$('#client_info').html(data);
			});		 
		});
		
		var general = function () {
            $.get('include/view_maint_tab_content.php?general=true&maint_no='+maint_no, function (data) {
                $('#general').html(data);
				});
            }
		
			
		var activity = function () {
			var data = {};
			
            var source =
            {
                datatype: "json",
				id: 'sq_no',
				url: 'include/view_maint_tab_content.php?activity=true&maint_no='+maint_no,
								
                datafields:
                [
					{ name: 'act' },
                    { name: 'plan_mth' },
					{ name: 'act_dt' },
					{ name: 'rmk' },
					{ name: 'se' },
					{ name: 'stat' },
					{ name: 'scr_no' },
					{ name: 'comp_date' }
                ],
				updaterow: function (rowid, rowdata, position, commit) {
                    var data = "update=true&row_id="+rowid+"&task="+rowdata.act+"&plan_month="+rowdata.plan_mth+"&act_dt="+rowdata.act_dt+"&rmk="+rowdata.rmk+"&se="+rowdata.se+"&scr_no="+rowdata.scr_no;
					alert(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'include/view_maint_tab_content.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
							activity();
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
				addrow: function (rowid, rowdata, position, commit) {
				alert("lala");
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                }
            };
			
			var cellbeginedit = function (row, datafield, columntype, value) {
                if (datafield == 'comp_date' || datafield == 'stat') return false;
            }
			
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 868,
				height: 600,
				//autoheight: true,
                source: dataAdapter,
                editable: true,
                theme: theme,
                //selectionmode: 'singlecell',
                columns: [
					{ text: 'Task', columntype: 'dropdownlist', datafield: 'act', width: 100,
						createeditor: function (row, column, editor) {
                        // assign a new data source to the dropdownlist.
						var list  = [<?php
						
							$res = $md->getActivity();
							while($row = mysql_fetch_array($res))
							{
								echo "'".$row['mt06_act_desc']."'".",";
							}
						?>
						];
                        editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
						},
						 validation: function (cell, value) {
							if (value == "") {
								return false;
							}
							else{
								return true;
							}
						}
					},
					
					{ text: 'Period', columntype: 'dropdownlist', datafield: 'plan_mth', width: 100, 
						createeditor: function (row, column, editor) {
                        // assign a new data source to the dropdownlist.
						
						<?php
							$array = $md-> getMaintDetails($maint_no);
							$res = mysql_fetch_array($array);
						
							$date1 = $res['mt04_st_dt'];
							$date2 = $res['mt04_end_dt'];

						   $time1  = strtotime($date1); 
						   $time2  = strtotime($date2); 
						   $my     = date('n-Y', $time2); 

						   $months = array(); 
						   $f      = ''; 

						   while($time1 < $time2) { 
							  if(date('n-Y', $time1) != $f) { 
								 $f = date('n-Y', $time1); 
								 if(date('n-Y', $time1) != $my && ($time1 < $time2)) {
									 //$str_mese=$mesi[(date('n', $time1)-1)];
									$months[] = date('M Y', $time1); 
								 }
							  } 
							  $time1 = strtotime((date('Y-n-d', $time1).' +15days')); 
						   } 

						   //$str_mese=$mesi[(date('n', $time2)-1)];
						   $months[] = date('M Y', $time2); 
						?>
						
						var list1  = [<?php
						
							for($i = 0; $i < count($months); $i++)
							{
								echo "'".$months[$i]."'".",";
							}
						?>
						];
                        //var list  = ['Germany', 'Brazil', 'France'];
                        editor.jqxDropDownList({ autoDropDownHeight: true, source: list1 });
						},
						
						validation: function (cell, value) {
							if (value == "") {
								return false;
							}
							else{
								return true;
							}
						}
					},
					{ text: 'Schedule Date', columntype: 'datetimeinput', cellsformat: 'dd-MM-yyyy', datafield: 'act_dt', width: 110 },
					{ text: 'SI', datafield: 'se', columntype: 'dropdownlist', width: 60,
					createeditor: function (row, column, editor) {
                        // assign a new data source to the dropdownlist.
						var list_se  = [<?php
						
							$res = $md->getSEList();
							while($row_se = mysql_fetch_array($res))
							{
								echo "'".$row_se['Abbreviation']."'".",";
							}
						?>
						];
                        //var list  = ['Germany', 'Brazil', 'France'];
                        editor.jqxDropDownList({ autoDropDownHeight: true, source: list_se});
						},
						 validation: function (cell, value) {
							if (value == "") {
								return false;
							}
							else{
								return true;
							}
						}
					},
					{ text: 'CSR No', datafield: 'scr_no', width: 100 },
					{ text: 'Date', datafield: 'comp_date', cellbeginedit: cellbeginedit, width: 100 },
					{ text: 'Status', datafield: 'stat', cellbeginedit: cellbeginedit, width: 110 },
					{ text: 'Remarks', datafield: 'rmk', width: 200 }
                ]
            });
        } 
		
		// create new row.
		$("#addrowbutton").on('click', function () {
			//var datarow = generaterow();
			var commit = $("#jqxgrid").jqxGrid('addrow', null, null);
		});
					
		// init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        general();
                        break;
					case 1:
                        activity();
                        break;
                }
            }
            $('#jqxTabs').jqxTabs({ width: 873, height: 'auto', theme: theme, initTabContent: initWidgets });
			
		/*$(function(){
			$("#addrowbutton").css("display", "block");
		});*/
    });
</script>	

</head>
<body style="font-family:verdana, arial; 
		font-size:11px;
		line-height:17px;">
	<div id="header_tall">
		<div id="main">
			<!--header -->
			<div id="header">
				<div class="h_logo">
					<div class="left">
					<div id="AppBanner">
					<div>U-TRACK</div><br>
					</div>
					</div>
					<div class="clear"></div>
				</div>
				<div id="welcome">
				<strong>Welcome|Logout</strong>
				</div>
				<div>
				    <?php include("../main_include/menu_bar/menu_bar.html"); ?>
					<div class="clear"></div>
				</div>
			</div>
			<!--header end-->
			<div>
				<input type="hidden" id="input" value="<?php echo $maint_no; ?>">
				<strong>Maintenance Detail</strong> 
				<div class="line_x"></div>
			</div>
			<div id="middle">
				<div class="indent">
					<div class="column30">
						<div class="border">
							<div class="btall">
								<div class="ltall">
									<div class="rtall">
										<div class="tleft">
											<div class="tright">
												<div class="bleft">
													<div class="bright">
														<div class="ind">
															<div id="client_info">
															<img src='../main_include/jqwidgets/images/ajax-loader.gif' />
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			
			<div id='jqxWidget'>
			<div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">General</li>
                <li>Activity</li>
                <li>Attachment</li>
            </ul>
            <div id="general">
                <img src='../main_include/jqwidgets/images/ajax-loader.gif' />
            </div>
            <div id="activity">
				<div id="jqxgrid">
					<img src='../main_include/jqwidgets/images/ajax-loader.gif' />
				</div>
				<input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div id="content3">
                <img src='../main_include/jqwidgets/images/ajax-loader.gif' />
            </div>
			</div>
			</div>
	<br>
			<!--footer -->
			<div id="footer">
				<div class="indent"><?php include("../main_include/footer.php"); ?></div>
			</div>
			<!--footer end-->
		</div>
	</div>	
</body>
</html>

[Peter StoevKeymaster]

Hi sathiyaseelan8,

var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, null); is Invalid function call. The second parameter could not be null. If your idea is to add an empty row, use {} as parameter.

Best Regards,
Peter Stoev

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

[sathiyaseelan8Participant]

hi peter

i tried, but still not working.

// create new row.
		$("#addrowbutton").on('click', function () {
			//var datarow = generaterow();
			var commit = $("#jqxgrid").jqxGrid('addrow', {}, null);
		});

[Peter StoevKeymaster]

Hi sathiyaseelan8,

You’ve modified the first parameter, not the second.

Best Regards,
Peter Stoev

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

[sathiyaseelan8Participant]

thanks peter. its working now.

i changed both null value to ().

var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, {}, {});

[Peter StoevKeymaster]

Hi sathiyaseelan8,

You should change only the second parameter. If you want to Grid to auto-generate ID’s for your new rows, the first parameter should be null.

$(“#jqxgrid”).jqxGrid(‘addrow’, null, {});

Best Regards,
Peter Stoev

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

[sathiyaseelan8Participant]

hi peter

it works. thanks for your help.

i would like to ask you one more thing. is there a way to refresh the grid after new row is added??

[Peter StoevKeymaster]

Hi sathiyaseelan8,

You may look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?arctic.

Best Regards,
Peter Stoev

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

[sathiyaseelan8Participant]

hi peter

thanks you. it works.

how if i want to get a datafield value on a selected row. i have tried but its on giving index of d row.

var clnt = $('#customersGrid').jqxGrid('getselectedrowindexes', "ClientCode");

ClientCode is the datafield.

[Peter StoevKeymaster]

Hi sathiyaseelan8,

Rows do not have datafields. Columns have datafields. The “getcellvalue” method of jqxGrid allows you to get the value of a given cell.

var value = $(“#grid”).jqxGrid(‘getcellvalue’, 1, ‘firstname’);

Best Regards,
Peter Stoev

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

[sathiyaseelan8Participant]

hi peter

var value = $(“#grid”).jqxGrid(‘getcellvalue’, 1, ‘firstname’);

it works. but i dont want to specified the value ‘1’. i want it automatically get selected cell value without specifying. is it possible?

[Author]

Posts