I want to set up the kendo filter something like filter we have on online sales websites.
Image for reference
In here programs will be associated with Groups and Schools and will have a start and end date. I was setting up the filter using custom code, can we somehow update kendo grid filter menu to get this type of layout for the filtering?
Here None of the information in filter area is visible in the grid (School, dates and groups).
Thanks in advance
Please find below proof of concept.
This is just a concept that it is possible to achieve what you doing , there is certainly more research need to be done and better way to handle checkboxes checking and unchecking the purpose is to provide a concept on how to achieve it
You will need to learn more about filtering in case both checkboxes are checked and other possibilities and for sure you can find help on that either in telerik documentation or stackoverflow.
Here is the JSBIN http://jsbin.com/bakediseci/edit?html,js,output
FOR HIDDEN COLUMN Filter SEE THIS FILTER HIDDEN COLUMN
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<span> Group1 <input type="checkbox" id="group1"/><br/>
<span> Group2 <input type="checkbox" id="group2"/>
<br/>
<br/>
Date: <input id="date" />
<br/>
<br/>
<br/>
<br/>
<div id="grid"></div>
</html>
JavaScript:
var data = [
{ name: "Paul", birthDate: new Date("1948/12/08"),Group:"Group1" },
{ name: "Janet", birthDate: new Date("1952/02/19"),Group:"Group1" },
{ name: "Nancy", birthDate: new Date("1963/08/30"),Group:"Group2" },
{ name: "Steven", birthDate: new Date("1937/09/19"),Group:"Group2" }
];
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: data,
columns: [
{field: "birthDate", format: "{0:d}" },
{field:"name"},
{field:"Group"}
]
}).data("kendoGrid");
$(document).ready(function() {
//set initial state.
$('#group1').val($(this).is(':checked'));
$('#group2').val($(this).is(':checked'));
$('#group1').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group1"});
}else {
grid.dataSource.filter({});
}
});
$('#group2').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group2"});
}else {
grid.dataSource.filter({});
}
});
});
$("#date").kendoDatePicker({
change: function() {
var value = this.value();
if (value) {
grid.dataSource.filter({
field: "birthDate",
operator: "eq",
value: value
});
} else {
grid.dataSource.filter({});
}
}
});
});
OUTPUT
Research and Helpfull links that you will need down the road
There was definitely research and source used you will need to go through
them again to make it solid .
http://www.telerik.com/forums/how-to-implement-a-custom-filter#2296030
http://www.telerik.com/forums/adding-filters-to-grid-s-source
user contributions licensed under cc-wiki with attribution required.
Related
When using <input type="month"> with min and max, for example:
<input type="month" min="2020-01" max="2020-12">
Is it possible to disable certain months between them?
You could try a custom JavaScript library or a third-party date picker component. I had something on my pc about this one. Modify it to work as you want.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<input type="text" id="date-picker" />
<script>
const disabledMonths = [5, 6, 7];
flatpickr("#date-picker", {
minDate: "2020-01",
maxDate: "2020-12",
mode: "month",
disable: [
function(date) {
return disabledMonths.includes(date.getMonth());
}
]
});
</script>
</body>
</html>
Such widgets are built into browsers. Of course, in different cases a certain control is given. In this case, the maximum possible is to use the native argument step. For example:
<input type="month" min="2020-01" max="2021-02" step="2" />
This question already has answers here:
jQuery UI Autocomplete use startsWith
(6 answers)
Closed 2 years ago.
Context
I'm using autocomplete function to search through 360 or more client email address.
I want it to only suggest addresses that begin with the letters typed in by the user.
For example, if the user types "thomas" the function should return suggestions that begin with "thomas" were as at the moment it shows matches which have the word Thomas anywere in their name.
Question
How can I modify either jquery to make sure that items that begin with whats being typed in are returned?
<div class="ui-widget"> </div>
</fieldset>
</form>
<p> </p>
<meta charset="utf-8" />
<meta content="width=200, initial-scale=1" name="viewport" />
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>
$( function() {
var availableTags = [
"testemail#yahoo.co.uk, ",
"helloemail#gmail.co.uk, ",
];
$( "#tags" ).autocomplete({
source: availableTags
});
$( "#tags" ).autocomplete("option", "position",
{ my : "right-1 top+35", at: "right top" })
$( "#tags" ).autocomplete({
minLength:4,
source: availableTags
});
} );
</script>
<p><label for="tags">Emails: </label>
<input id="tags" maxlength="120" size="80" type="text" /></p>
<style>
input[type='text'] { font-size: 24px; }
</style>
<div class="ui-widget"> </div>
You can define your own filtering within the Source option.
The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
See more: https://api.jqueryui.com/autocomplete/#option-source
With your example, this could be something like the following.
$(function() {
var myData = [
"smith#matrix.net",
"testemail#yahoo.co.uk",
"helloemail#gmail.co.uk",
"homer#simpsons.tv"
];
$("#tags").autocomplete({
minLength: 4,
source: function(req, resp) {
var results = [];
$.each(myData, function(i, el) {
if (el.indexOf(req.term) == 0) {
results.push(el);
}
});
resp(results);
},
position: {
my: "right-1 top+35",
at: "right top"
}
});
});
input[type='text'] {
font-size: 24px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="tags">Emails:</label>
<input id="tags" maxlength="120" size="80" type="text" />
</p>
This uses the .indexOf() to identify the position. So if you want to see if the Term is at the beginning, the position would be 0.
You may want to adjust your minLength incase there is an email like jt#universal.com
So I want to try to make a website that includes charts. I used chart.js for it. Now i try to make two charts so i copied the one i make before and changed its variable but it doesn't shown up on my html page. What i want to ask is, is it possible to make 2 charts using chart.js and I did it the wrong way or i only can make one chart? Thank you.
By the way, here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
You are using the same variable name for both of the charts that is massPopChart. You just need to change the variable name to massPopChart1 and massPopChart2.
Just check out the proper working here https://jsfiddle.net/4gdtujve/
I'm trying to reproduce the Social Security Number example provided by the polymer demo here. How can I set a default/initial value for paper-input-container with its ssn-input component inside? The running version is here.
I tried to add the attribute value to both paper-input-container and ssn-input, but it does not display as initial default value.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Element Test Case</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input-container.html">
<link rel="import" href="paper-input/paper-input-error.html">
<link rel="import" href="paper-input/demo/ssn-input.html">
</head>
<body>
<paper-input-container always-float-label auto-validate attr-for-value="value">
<label>Social Security Number</label>
<ssn-input class="paper-input-input"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
</body>
</html>
I checked the original implementation of the <ssn-input>, and it seems to me that there is no code to split the provided value in its three substrings and provide it to the three paper-input. Instead when the user types something within the paper-inputs, each string becomes a _ssnX and a computeValue function links them together storing the result in the value property. Here the piece of code from ssn-input.html:
properties: {
value: { notify: true, type: String },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
ssn-input is the component that reads the content typed by the user and puts everything in the value property. Hence, the first thing is to initialise the value attribute of this element, as follows:
<paper-input-container always-float-label auto-validate>
<label>Social Security Number</label>
<ssn-input class="paper-input-input" value="102-12-1233"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
The attribute value initialises the relevant property in the ssn-input. ssn-input has three internal input element, which show and take the user input. Therefore, the initial value must be split on the "-" character. The best place to do it is in the value property observer. So, the modified ssn-input element code is the following:
Polymer({
is: 'ssn-input',
behaviors: [
Polymer.IronValidatableBehavior
],
properties: {
value: { notify: true, type: String, observer: '_handleValueChanged' },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
_handleValueChanged: function(value) {
var arr = value.split("-");
this._ssn1 = arr[0];
this._ssn2 = arr[1];
this._ssn3 = arr[2];
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
});
Here, the jsbin running example.
Heyho!
I tried all the day to bind the data of a JSON file to the data model of a SAPUI5 chart but without success. I miss the link between the JSON file and the dataset by path.
Added is the file containing the standalone code but without the json file which just contains calday and counter with some data. There seems no problem by defining the data directly in the script as data and refering in the dataset to it. Which I tried lately as you recognize at the /data path.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with filter</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var oModelJSON = new sap.ui.model.json.JSONModel();
oModelJSON.loadData(file.json);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Calendar Day',
value: "{calday}"
}],
measures: [{
name: 'Counter',
value: '{counter}'
}],
data: {
path: "/data"
}
});
var oChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Counter per Calendar Day'
},
dataset: oDataset
});
oChart.setModel(oModelJSON );
oChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>