Sortable Grid, with Move Up and Down buttons
Is there a good way on implementing a grid that has a list of items in a specific order, but where I can select a row and use move up/down buttons to move that specified row in that direction so that once it's all ordering how the user wants it, I can pass that ordered list of values into a sub-reports link parameters?
0
-
I have used Sortable javascript plugin for its flexibility.
https://github.com/SortableJS/SortableSuper simplified example
<Report ID="Sharetec.Sortable">
<StyleSheet StyleSheet="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<StyleSheet StyleSheet="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
<IncludeScriptFile IncludedScriptFile="sortable.js" />
<IncludeScriptFile IncludedScriptFile="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js" />
<Body>
<IncludeHtml Html="<style>
.handle {
 cursor: grab;
}


</style>
" />
<InputText ID="finalorder" />
<DataTable ID="items-2" Width="100" WidthScale="%">
<DataLayer Type="Static">
<StaticDataRow Desc="Item 1" />
<StaticDataRow Desc="Item 2" />
<StaticDataRow Desc="Item 3" />
<StaticDataRow Desc="Item 4" />
<StaticDataRow Desc="Item 5" />
<GroupFilter GroupColumn="SortOrder" ID="gfSortOrder" KeepGroupedRows="True" />
<SequenceColumn ID="SortOrder" />
</DataLayer>
<DataTableColumn Header="SortOrder">
<Label Class="fa fa-arrows handle" />
<Spaces Size="5" />
<Label Caption="@Data.SortOrder~" ID="sortorder" Class="sortorder" />
</DataTableColumn>
</DataTable>
<IncludeScript IncludedScript="// List 2
$('#items-2 tbody').sortable({

 animation: 100,
 handle: '.handle',
 onEnd: function(evt) {
 console.log('from: ' + evt.oldIndex + ' to ' + evt.newIndex);
 var list = [];
 $('.sortorder').each(function() {
 list.push($(this).text());
 });
 $('#finalorder').val(list.toString());
 }

});


" />
</Body>
<ideTestParams />
</Report>0
Please sign in to leave a comment.
Comments
1 comment