This example demonstrates how to use sorting in the Soby Data Grid.
"AddOrderByField" method takes two parameters. First one is the name of the field. Second one is a boolean value to state whether it should be sorted as ascending or descending. This method does not trigger data population, it just adds the orderbyfield which will be used on population.
Below functionality uses "SortResult" method which takes two parameters. First one is the name of the field. Second one is a boolean value to state whether it should be sorted as ascending or descending. This method triggers the data population.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Soby Web DataGrid Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="/media/js/jquery-3.1.0.js" type="text/javascript"></script>
<link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" />
<script src="/media/js/soby.service.js"></script>
<script src="/media/js/soby.ui.components.js"></script>
</head>
<body>
<div id='soby_SaleRangeSelectionDiv'></div>
</body>
</html>
var today = new Date();
var sixMonthsAgo = new Date();
sixMonthsAgo.setDate(sixMonthsAgo.getDate() - 7*15);
var selectedStartDate = new Date();
selectedStartDate.setMonth(selectedStartDate.getMonth() - 2);
var selectedEndDate = new Date();
selectedEndDate.setMonth(selectedEndDate.getMonth() - 1);
var rangeSelection = new soby_RangeSelection("#soby_SaleRangeSelectionDiv", "Sale range selection", SobyRangeSelectionViewTypes.DateRange, "600", "200", sixMonthsAgo, today, "day", "week", [selectedStartDate,selectedEndDate]);
rangeSelection.Initialize();
This example displays all array values
Want to learn more about the date range selection component? Check out the
API documentation.