@model string @{ViewBag.Title = "Configuration";} @section HeaderContent{ <style> #configGrid td { padding: 2px 8px 2px 8px; } </style> } <div class="grid-container"> <button id="btnAddNewRow">Add</button> <table id="configGrid" class="dataTablesGrid hidden-grid no-details"> <thead> <tr> <th>Key</th> <th>Value</th> </tr> </thead> <tbody> </tbody> </table> </div> <form id="formAddNewRow" action="#"> <label for="key">Key</label> <input type="text" name="key" id="key" class="required" rel="0" /> <br /> <label for="value">Value</label> <input type="text" name="value" id="value" class="required" rel="1" /> <br /> </form> @section Scripts{ <script type="text/javascript"> addUrl = '../System/InsertConfigAjax'; updateUrl = '../System/SaveConfigAjax'; function reloadHistoryGrid() { var grid = $('#history').data('tGrid'); grid.ajaxRequest(); } $(document).ready(function() { $('#configGrid').removeClass('hidden-grid'); oTable = $('.dataTablesGrid').dataTable({ "bShowAll": true, "aaData": @Html.Raw(Model), "bPaginate": false, "bLengthChange": false, "bFilter": false, "bSort": true, "bInfo": false, "bAutoWidth": false, "sPaginationType": "four_button", "aoColumns": [ { sWidth: 'auto', "mDataProp": "Key", "bSortable": false }, //Key { sWidth: 'auto', "mDataProp": "Value", "bSortable": false } //Value ], "aaSorting": [[0, 'asc']], "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) { fnRowCallback(nRow, aData); } }).makeEditable({ sAddURL: addUrl, sUpdateURL: updateUrl, "aoColumns": [ null, // column 0. this column is primary key, not editable { // col1 indicator: 'Saving...', tooltip: 'Double Click to edit' } ], oAddNewRowButtonOptions: { label: "Add", icons: {primary:'ui-icon-plus'} }, oDeleteRowButtonOptions: { label: "Remove", icons: {primary:'ui-icon-trash'} }, oAddNewRowFormOptions: { title: 'Add new value', show: "blind", hide: "explode", modal: true } }); }); function fnRowCallback(nRow, aData) { var id = aData["Key"]; $(nRow).attr("id",id); } $('#formAddNewRow').live('keyup', function(e){ if (e.keyCode == 13) { $('#btnAddNewRowOk').click(); } }); </script> }