System Config grid now uses DataTables.

2026-04-18 21:34:28 -04:00 · 2012-02-09 21:26:30 -08:00
parent 4225685715
commit 463ab0812e
9 changed files with 3146 additions and 98 deletions
@@ -1,29 +1,102 @@
-@model IEnumerable<NzbDrone.Core.Repository.Config>
+@model string
@{ViewBag.Title = "Configuration";}
-@(Html.Telerik().Grid<NzbDrone.Core.Repository.Config>()
-        .Name("Grid")
-         .TableHtmlAttributes(new { @class = "Grid" })
-        .DataKeys(keys =>
-        {
-            keys.Add(p => p.Key);
-        })
-        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
-        .DataBinding(dataBinding =>
-        {
-            dataBinding.Ajax()
-                .Select("_SelectAjaxEditing", "System")
-                .Insert("_InsertAjaxEditing", "System")
-                .Update("_SaveAjaxEditing", "System");
-        })
-        .Columns(columns =>
-        {
-            columns.Bound(p => p.Key);
-            columns.Bound(p => p.Value);
-            columns.Command(commands =>
-          {
-              commands.Edit().ButtonType(GridButtonType.Image);
-          }).Width(90).Title("Actions");
-        })
-        .Editable(editing => editing.Mode(GridEditMode.InLine))
-        .Sortable()
-)
+
+@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() {
+            $('#historyGrid').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) {
+            //e.row.style.boarder = "";
+            var id = aData["Key"];
+            $(nRow).attr("id",id);
+        }
+        
+        $('#formAddNewRow').live('keyup', function(e){
+  	        if (e.keyCode == 13) {
+  	            $('#btnAddNewRowOk').click();
+  	    }
+  	});
+    </script>
+}