@using NzbDrone.Services.Service.Helpers @model string @{ViewBag.Title = "Pending";} @section HeaderContent{ @Html.IncludeCss("Grid.css") <style> .buttonContainer { margin-bottom: 15px; } </style> } <div class="grid-container"> <div class="buttonContainer"> <button id="btnAddNewRow">Add</button> <button id="btnPromoteAll">Promote All</button> </div> <table id="mappingsGrid" class="dataTablesGrid hidden-grid no-details"> <thead> <tr> <th>Clean Title</th> <th>TvDb ID</th> <th>Title</th> <th>Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> <form id="formAddNewRow" action="#"> <label for="cleanTitle">Clean Title</label> <input type="text" name="cleanTitle" id="cleanTitle" class="required" rel="0" /> <br /> <label for="id">TvDb ID</label> <input type="text" name="id" id="id" class="required" rel="1" /> <br /> <label for="title">Title</label> <input type="text" name="title" id="title" class="required" rel="2" /> <br /> <input type="hidden" name="commands" id="commands" rel="3" /> </form> @section Scripts{ <script type="text/javascript"> addUrl = '../SceneMapping/AddPending'; updateUrl = '../SceneMapping/UpdatePending'; promoteUrl = '../SceneMapping/Promote'; promoteAllUrl = '../SceneMapping/PromoteAll'; deleteUrl = '../SceneMapping/Delete'; $(document).ready(function() { $('#mappingsGrid').removeClass('hidden-grid'); $('#btnPromoteAll').button({ icons: { primary: "ui-icon-arrowthick-1-n" } }); oTable = $('.dataTablesGrid').dataTable({ "bShowAll": true, "aaData": @Html.Raw(Model), "bPaginate": true, "bLengthChange": false, "bFilter": false, "bSort": true, "bInfo": true, "bAutoWidth": false, "iDisplayLength": 20, "sPaginationType": "four_button", "aoColumns": [ { sWidth: 'auto', "mDataProp": "CleanTitle", "bSortable": false }, //CleanTitle { sWidth: 'auto', "mDataProp": "Id", "bSortable": false }, //ID { sWidth: 'auto', "mDataProp": "Title", "bSortable": false }, //Title { sWidth: '40px', "mDataProp": "Commands", "bSortable": false, "fnRender": function (row) { var promoteImage = "<img src=\"../../Content/Images/Promote.png\" alt=\"Promote\" title=\Promote to Active\" class=\"gridAction\" onclick=\"promoteMapping(this.parentNode.parentNode, " + row.aData["MappingId"] + ")\">"; var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete\" class=\"gridAction\" onclick=\"deleteMapping(this.parentNode.parentNode, " + row.aData["MappingId"] + ")\">"; return promoteImage + deleteImage; } } //Commands ], "aaSorting": [[0, 'asc']], "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) { fnRowCallback(nRow, aData); } }).makeEditable({ sAddURL: addUrl, sUpdateURL: updateUrl, 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["MappingId"]; $(nRow).attr("id",id); } $('#formAddNewRow').live('keyup', function(e){ if (e.keyCode == 13) { $('#btnAddNewRowOk').click(); } }); function promoteMapping(row, mappingId) { $.ajax({ type: "GET", url: promoteUrl, data: { mappingId: mappingId }, success: function() { oTable.fnDeleteRow(oTable.fnGetPosition(row)); } }); } $(document).on('click', '#btnPromoteAll', function() { $.ajax({ type: "GET", url: promoteAllUrl, success: function() { oTable.fnClearTable(); } }); }); function deleteMapping(row, mappingId) { $.ajax({ type: "GET", url: deleteUrl, data: { mappingId: mappingId }, success: function() { oTable.fnDeleteRow(oTable.fnGetPosition(row)); } }); } </script> }