I am trying to sort a table which has column like 01 Apr 2010. I am using below to apply sort
$(document).ready(function()
{
$("#dataTable").tablesorter();
});
But its not working for the dates of format dd MMM yy. Can any one suggest how can i apply this format for sorting?
Check out the example parsers page, it shows you how to create a custom parser. You can parse dates like that with new Date(date) or Date.parse(date). I don't have the means to test it, but something like this should work:
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'ddMMMyy',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// parse the string as a date and return it as a number
return +new Date(s);
},
// set type, either numeric or text
type: 'numeric'
});
All that's left for you to do is specify the sorting method using the headers option:
$(document).ready(function() {
$("dataTable").tablesorter({
headers: {
6: { // <-- replace 6 with the zero-based index of your column
sorter:'ddMMMyy'
}
}
});
});
Related
I have a query that takes input params, say date
const { loading, data, error } = useQuery(GET_LIST, {
variables: {
input: {
date: date,
},
},
});
export const GET_LIST = gql`
query list($input: ListParams) {
list(input: $input) {
totalCount
recordCount
list {
listId
date
qty
amount
currency
}
}
}
`;
input ListParams {
date: String
}
I need to fetch the list, where the user can filter based on date. Now on initial load, date is not set, query is called. The user sets a date, no issues, the query is called again with the the date value, now when the user removes the date filter, the date value becomes undefined, and I would expect useQuery to be called again with no variables this time, but it is never called.
I have tried setting empty string as well, even then useQuery does not get called which is not the intended behaviour
input: {
date: date||'',
},
Apollo-Cilent has a cache mechanism when query variable you pass into the useQuery hook is the same to a previous value.
Doc:
https://www.apollographql.com/docs/react/data/queries/
Sandbox:
https://codesandbox.io/embed/usequery-example-apollo-client3-dx626
You can solve this by either using a refetch or polling mechanism built into the useQuery hook:
function Date({ date }) {
const { loading, data, error, refetch } = useQuery(GET_LIST, {
variables: {
input: {
date: date,
},
},
});
//...
return (<div>
<Component data={data} onDateChange={() => refetch()}/>
</div>)
}
Or, if having the empty/undefined variable in the query doesn't specific purpose, you should probably not render the component by adding {!input.date && <Date /> } or not sending any query by adding skip variable in your useQuery hook:
const { loading, data, error, refetch } = useQuery(GET_LIST, {
variables: {
input: {
date: date,
},
},
skip: !input?.date // <------ Skip the query when input.date is missing or empty
});
Late answer (I think you have probably resolved this issue), I am writing some notes here in case someone else runs into this problem.
I'm trying to use Kendo UI MultiSelect to select some stuff from an API. The API won't return all items because they are too much. It will only return those that contains the searchTerm.
I'm trying to figure out how to send the input text in a Kendo UI Multiselect. When I say the input text, I mean what the user typed in the input before selecting anything from the list. That text has to be passed on to the DataSource transport.read option.
See this Codepen to understand
https://codepen.io/emzero/pen/NYPQWx?editors=1011
Note: The example above won't do any filtering. But if you type "bre", the console should log searching bre.
Use the data property in the read transport options, this allows you to modify the query being sent by returning an object that will later on be serialized in the request.
by default read are GET requests so it will be added to the queryString of your url specified.
If it were to be a POST it would be added to the POST values.
<div id="multiselect"></div>
<script>
$('#multiselect').kendoMultiSelect({
dataTextField: 'first_name',
dataValueField: 'id',
filter: "startswith",
dataSource: {
serverFiltering: true, // <-- this is important to enable server filtering
schema: {
data: 'data'
},
transport: {
read: {
url: 'https://reqres.in/api/users',
// this callback allows you to add to the request.
data: function(e) {
// get your widget.
let widget = $('#multiselect').data('kendoMultiSelect');
// get the text input
let text = widget.input.val();
// what you return here will be in the query string
return {
text: text
};
}
}
}
}
});
</script>
I am unable to get the built-in search for Kendo DropDownList to use the templated text instead of the raw text from the dataSource. I want to strip off the leading slash from the dataSource name for display, value, and search purposes.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ "/Apples", "/Oranges" ],
// None of these templates appear to fix the search text.
// Kendo is using the dataSource item to search instead of the template output.
// I want to be able to search using 'a' (for Apples) or 'o' (for Oranges).
// If I use '/' then it cycles through the items which proves to me that the search is not using templated text.
template: function(t) { return t.name.slice(1); },
valueTemplate: function(t) { return t.name.slice(1); },
optionLabelTemplate : function (t) { return t.name.slice(1); },
});
</script>
Here is a non-working sample in Kendo's UI tester:
http://dojo.telerik.com/#Jeremy/UvOFo
I cannot easily alter the dataSource on the server side.
If it's not possible to change how the search works then maybe there is a way to alter the dataSource after it's been loaded into the client from the server?
I'm not sure if this will help you at all, but I was able to force it to work. The control allows for you to subscribe to the filtering event on init. From here, you can set the value of the filter before it is submitted.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: ["/Apples", "/Oranges"],
template: function(t) { return t.slice(1); },
valueTemplate: function(t) { return t.slice(1); },
optionLabelTemplate : function (t) { return t.slice(0); },
filter: "startswith",
filtering: function(e) {
e.filter.value = '/'+e.filter.value;
}
});
</script>
I have handsontable and I don't know what event that I need to validate a specific cell if its empty or not.
technically I have specific cell to be a required cell, if the cell is empty then it will call a callback or return false after executing a post.
I have used beforeChange() function before and I think it is not appropriate event for the issue.
Here's an image link.
What you want to do is use the validator option in the columns setting.
Here is some more information on validators and an example but below is the code that would go with it.
emptyValidator = function(value, callback) {
if (isEmpty(value)) { // isEmpty is a function that determines emptiness, you should define it
callback(false);
} else {
callback(true);
}
}
Then in the columns setting, supply each column and if that column should have all its cells be non-empty, supply this as the validator, just like they show in the handonstable example page.
Here is my work around: http://jsfiddle.net/Yulinwu/s6p39uje/
Firstly, you can add a custom property named required to the column settings.
hot = new Handsontable(container, {
...
columns: [{
...
}, {
type: 'numeric',
format: '$ 0,0.00',
required: true, // Add a new setting named required
validator: Handsontable.NumericValidator
}]
});
Then, you can add a listener to beforeValidate event using addHook, which returns false if a cell is required but empty.
hot.addHook('beforeValidate', function(value, row, prop, source) {
var ifRequired = this.getCellMeta(row, prop).required;
console.log(ifRequired);
if (ifRequired && value === '') {
return false
} else {
return 0
}
});
Use allowEmpty:false for that column like:-
{
data: 'EmpNo',
type: 'numeric',
allowInvalid: false,
allowEmpty:false
}
And in the setting of handsontable use afterValidate as below-
afterValidate: function (isValid, value, row, prop, source) {
if (!isValid) {
$("#submitBtn").prop("disabled", true);
alert('Only non empty numbers are allowed');
}
else {
$("#submitBtn").prop("disabled", false);
}
}
I have a PHP-script to handle the AJAX-Requests of many different jqGrid's.
I generate the "ORDER BY" statement with the 'sidx' and 'sord' parameters and the "LIMIT" statement with the 'page' and 'rows' parameters.
Similar to the PHP-example here.
The problem is, that in the PHP-script I can not determine if the loadonce-parameter of the current jqGrid is set or not.
But only if it is not set, I have to filter the returned data (LIMIT by page and rows).
How can I force jqGrid to send an additional parameter?
I dont want to change all my Grids. Is there a global way of doing it?
------ EDIT ------
With the help from this answers (here and here) i got this now.
$.extend($.jgrid.defaults, {
postData: {
loadingType: function() {
var isLoadonce = $("#list1").jqGrid('getGridParam', 'loadonce');
console.log('isLoadonce: ' + isLoadonce);
return isLoadonce ? 'loadAll' : 'loadChunk';
},
},
});
This works, if the Grid has the ID "list1". How can I reference the current Grid without ID?
------ EDIT 2 ------
This seems to work. It looks to me a bit like a hack. Is there a better way?
$.extend($.jgrid.defaults, {
serializeGridData: function(postData) {
var isLoadonce = $(this).jqGrid('getGridParam', 'loadonce');
var newPostData = $.extend(postData, {
loadingType: isLoadonce ? 'loadAll' : 'loadChunk'
});
return $.param(newPostData);
},
});
To pass in an extra parameter you can add:
postData: { ExtraDataName: ExtraDataValue },
then whenever jqGrid goes to get data it will pass that name pair to your controller.
With serializeGridData, jqGrid provides an event to modify the data sent with the Request. The event is called in the context of the current Grid, so we can access the current Grid with this.
By exdending $.jgrid.defaults we can make all Grids sending their loadonce parameter as additional requestparameter without changing any Grid.
$.extend($.jgrid.defaults, {
serializeGridData: function(postData) {
var isLoadonce = $(this).jqGrid('getGridParam', 'loadonce');
var newPostData = $.extend(postData, {
loadingType: isLoadonce ? 'loadAll' : 'loadChunk'
});
return $.param(newPostData);
},
});