Lidarr/NzbDrone.Web/Views/System/Config.cshtml

@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>
}