![\"\"](\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/ExcelGrid1.png\" "\\"ExcelGrid\\"")
<\/p>\nSome applications may require to provide users with quick editing capabilities. While Inline Edit does just that entering inline edit mode for multiple records can be painful. It would be much easier is some or all fields appear as edit controls when page is loaded. <\/p>\n
While PHPRunner\/ASPRunner.NET\/ASPRunnerPro do not have such functionality built-in it’s fairly easy to implement it in your project. In this sample project we’ll show how to make fields ProductName, UnitPrice and Discontinued editable automatically. For now we only support text boxes and check boxes. Data is saved automatically once you leave the text box or check off check box. To see that data is actually saved in the database simply reload the page. <\/p>\n
You can also see how server-side validation works. Enter Unit Price that is less than $20 and move to the next field to see it in action. Record won’t be saved until you enter $20 or more price value. <\/p>\n
<\/p>\n
Live demo<\/a> If you do not need inline edit functionality feel free to remove the inline edit icon manually in Visual Editor. The option still needs to be turned on for this functionality to work.<\/p>\n For each field that you want to edit on the List page set ‘View as’ type ‘Custom’. The code below is for PHPRunner only now but we’ll update it with ASP\/C# code shortly. <\/p>\n PHP:<\/p>\n C#:<\/p>\n PHP:<\/p>\n C#:<\/p>\n Obvious changes are field name and key column name. You can also change field styling, width etc. <\/p>\n Changes in the code above: replace products_edit.php<\/strong> with the name of your edit page. <\/p>\n This part is optional but we post it to make example complete. This code can be pasted to BeforeEdit event and we make sure that price is $20 or greater. <\/p>\n PHP:<\/p>\n C#:<\/p>\n Some applications may require to provide users with quick editing capabilities. While Inline Edit does just that entering inline edit mode for multiple records can be painful. It would be much easier is some or all fields appear as edit controls when page is loaded. While PHPRunner\/ASPRunner.NET\/ASPRunnerPro do not have such functionality built-in it’s fairly easy to implement it in your project. In this sample project we’ll show how to make fields ProductName, UnitPrice and Discontinued editable automatically. For now we only support text boxes…<\/span>Continue Reading “Excel like grid in PHPRunner applications”<\/span>
\n
\nHere is how this can be done. <\/p>\n1. Enable ‘Inline Edit’ for the table in question<\/h2>\n
2. ‘View as’ Custom<\/h2>\n
Check box field code<\/h3>\n
\r\n$field=\"Discontinued\";\r\n$keyField=\"ProductID\";\r\n\r\n$value = \"<input data-fieldname='\".$field.\"' type=checkbox data-editid='\".\r\n$data[$keyField].\"' class='chAutoUpdate' \";\r\nif ($data[$field]) \r\n\t$value.=\"checked \";\r\n$value.=\">\";\r\n<\/pre>\n
\r\ndynamic field = null, keyField = null;\r\n\t\t\tfield = new XVar(\"Discontinued\");\r\n\t\t\tkeyField = new XVar(\"ProductID\");\r\n\t\t\tvalue = XVar.Clone(MVCFunctions.Concat(\"\");\r\n\t\t\treturn null;\r\n<\/pre>\n
Text box field code<\/h3>\n
\r\n$field=\"ProductName\";\r\n$keyField=\"ProductID\";\r\n$value = \"<input data-fieldname='\".$field.\"' data-editid='\".$data[$keyField].\"' \r\ntype=text class='txtAutoUpdate' value=\\\"\".runner_htmlspecialchars($data[$field]).\"\\\">\";\r\n<\/pre>\n
\r\ndynamic field = null, keyField = null;\r\n\t\t\tfield = new XVar(\"ProductName\");\r\n\t\t\tkeyField = new XVar(\"ProductID\");\r\n\t\t\tvalue = XVar.Clone(MVCFunctions.Concat(\"\"));\r\n\t\t\treturn null;\r\n<\/pre>\n
3. List page Javascript OnLoad code<\/h2>\n
\r\nvar elem;\r\n$(document).ready(function() {\r\n $('.chAutoUpdate').change(function() {\r\n\tvar id = $(this).attr(\"data-editid\");\r\n\tvar field=$(this).attr(\"data-fieldname\");\r\n\tvar val=\"\";\t\r\n\telem = $(this);\t\r\n if($(this).is(\":checked\")) {\r\n val=\"on\";\r\n }\r\n\r\n\tvar data = { \r\n\t\tid: 1,\r\n\t\teditType: \"inline\",\r\n\t\ta: \"edited\",\r\n\t\teditid1: id,\r\n page: \"list\"\t \r\n\t};\r\n\tdata[\"value_\"+field+\"_1\"]=val;\r\n\tdata[\"type_\"+field+\"_1\"]=\"checkbox\";\r\n\r\n\t\/\/ save data\r\n\r\n\t$.ajax({\r\n\t type: \"POST\",\r\n\t url: \"products_edit.php?submit=1\",\r\n\t data: data\r\n\t\t}).done(\tfunction(jsondata) {\r\n\t\t\tvar decoded = $('<div\/>').html(jsondata).text();\r\n\t\t\tresponse = jQuery.parseJSON( decoded );\r\n\t\t\tif (response[\"success\"]==false) {\r\n\t\t\t\t$(\"<div class=rnr-error\/>\").insertAfter(elem).html(response[\"message\"]);\t\r\n\t\t\t}\r\n\t\t});\r\n\t});\r\n\r\n $('.txtAutoUpdate').change(function() {\r\n\t\t\r\n\tvar id = $(this).attr(\"data-editid\");\r\n\tvar val=$(this).val();\t\t\r\n\tvar field=$(this).attr(\"data-fieldname\");\r\n\telem = $(this);\r\n\tvar data = { \r\n\t\tid: 1,\r\n\t\teditType: \"inline\",\r\n\t\ta: \"edited\",\r\n\t\teditid1: id,\r\n page: \"list\"\t \r\n\t};\r\n\tdata[\"value_\"+field+\"_1\"]=val;\r\n\r\n\t\/\/ clear error message if any\r\n\tif ($(this).next().attr('class')==\"rnr-error\")\r\n\t\t\t$(this).next().remove();\r\n\r\n\t\/\/ save data\r\n\t$.ajax({\r\n\t type: \"POST\",\r\n\t url: \"products_edit.php?submit=1\",\r\n\t data: data\r\n\t\t}).done(\tfunction(jsondata) {\r\n\t\t\tvar decoded = $('<div\/>').html(jsondata).text();\r\n\t\t\tresponse = jQuery.parseJSON( decoded );\r\n\t\t\tif (response[\"success\"]==false) {\r\n\t\t\t\t$(\"<div class=rnr-error\/>\").insertAfter(elem).html(response[\"message\"]);\t\r\n\t\t\t}\r\n\t\t});\r\n });\r\n});\r\n<\/pre>\n4. Validation part<\/h2>\n
\r\nif (array_key_exists(\"UnitPrice\", $values) ) {\r\n\tif ($values[\"UnitPrice\"]<20.0) {\r\n\t\t$message=\"Price should be greater than 20.0\";\r\n\t\treturn false;\r\n\t}\r\n}\r\nreturn true;\r\n<\/pre>\n\r\nif(XVar.Pack(values.KeyExists(\"UnitPrice\")))\r\n\t\t\t{\r\n\t\t\t\tif(values[\"UnitPrice\"] < 20.0)\r\n\t\t\t\t{\r\n\t\t\t\t\tmessage = new XVar(\"Price should be greater than 20.0\");\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn true;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"