i have a drop down using dijit/form/FilteringSelect which is not supporting in mobile but it is working on web. i need my drop down to work in both web and mobile.can any one help
require(
[ "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"],
function(Memory, FilteringSelect) {
var filteringSelect = new FilteringSelect({
id : "statusList",
value : "id",
style : "width: 150px;",
maxLength: "50",
placeHolder : "-- select one --",
displayedValue : defaultStatus,
onChange : setStatusId,
store : dataStore,
}, "statusList");
filteringSelect.startup();
});
You should have a look to dojox/mobile/SearchBox widget.
It'll do the same job than dijit/form/FilteringSelect with approximately the same configuration (You can pass to it the same datastore).
Related
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
Currently i am getting the values upon sliding but I want to display the values along with the handle in dojo horizontal slider.
I am creating the slider like this
var slider = new HorizontalRangeSlider({
name : "slider",
value : startValue,
//starting and end values to the slider
minimum : endValue,
maximum : endValue,
intermediateChanges : true,
showButtons : false,
onChange : lang.hitch(this, "setValues")
}, this.slider).startup();
var sliderLabelsRule = new HorizontalRule({
container : "topDecoration",
style:"height:5px",
count : 2,
numericMargin: 1
}, this.sliderRule);
this.sliderLabelsRule.startup();
//create the labels object
var sliderLabelsTop = new HorizontalRuleLabels({
container : "topDecoration",
style : "font-size: 14px;",
//array that contains the label values
labels : array,
}, this.sliderLabelsTop);
sliderLabelsTop.startup();
And the template is like this
<div>
<div data-dojo-attach-point="slider">
<div data-dojo-attach-point="sliderRule"></div>
<ol data-dojo-attach-point="sliderLabelsTop"></ol>
</div>
</div>
Now i have to display the value upon sliding the slider rule just below the slider handle, How to do this in dojo?
We can make use of the HorizontalRangeSlider attach points and we can place the value that you want to show by placing there.
HorizontalSRangeSlider has two attach point sliderHandle and sliderHandleMax,we can place the value there like this,
this.horizontalSlider = new HorizontalRangeSlider({
name : "slider",
value : this.sliderMinMax,
minimum : this.sliderMinMax[0],
maximum : this.sliderMinMax[1],
intermediateChanges : false,
showButtons : false,
onChange : lang.hitch(this, "callOnchange")
}, this.slider);
this.horizontalSlider.startup();
this.horizontalSliderRule = new HorizontalRule({
container : "topDecoration",
style:"height:5px",
count : 2,
numericMargin: 1
}, this.sliderRule);
this.horizontalSliderRule.startup();
this.horizontalSliderRule.sliderHandle.innerHTML = value //your value to show
I'm using a FilteringSelect that use an FilteringSelect as store.
I want to ignore the accented characters that users can enter, and to return all the elements with or without accents. But i don't know what event i have to catch.
Here's my code :
var ccppMemory = new dojo.store.FilteringSelect({
data: centrosPoblado,
idProperty: "id"
});
sboMunicipio = new dijit.form.FilteringSelect({
id: "soMunicipioSelect",
hasDownArrow: false,
placeholder: i18n.tools.searches.ordinary.departmentTown,
store: ccppMemory,
searchAttr: "unitario",
intermediateChanges : true,
queryExpr: "*${0}*",
autoComplete: false,
highlightMatch: "all",
style:"margin-right:5px;width:170px;"
}, "soMunicipioSelect");
sboMunicipio.startup();
To explain better, centrosPoblado is an array that i populate as :
centrosPoblado.push({
id: value.attributes.CODIGO_DANE,
label: value.attributes.NOMBRE_CENTRO_POBLADO,
unitario: value.attributes.DEPTO + " / " + value.attributes.NOMBRE_CENTRO_POBLADO
});
In 'unitario' i have store strings like 'Medellín', ' Bogotá', ....
What i want is that when a user enter medellín, the filterselect ignore and returns 'Medellín' . So what i think i have to do it's to substitute medellin for something like m[eé]d[eé]ll[íi]n, but i don't know where.
Thanks
if anyone is interested, here is the answer :
http://dojo-toolkit.33424.n3.nabble.com/FilteringSelect-avoid-Accented-characters-td4004099.html
You have to overwrite the 'queryEngine' of the Memory that its linked to the FilteringSelect
We have an extJs4 - spring MVC application.
I would like to declare a variable with user information (name, firstname, role). With role we can set field in read only or to hidde some part of the application.
In my app.js:
Ext.application({
name: 'appname',
appFolder: 'js/app',
enableQuickTips:true,
controllers: [
'MainController',....
],
autoCreateViewport: true,
globals:
var1 : 5 //it works for simple variable
});
I would like to create store variable with this
var appglobalstore = Ext.getStore('MyStore');
This is not possible :
globals:
appglobalstore : Ext.getStore('MyStore');
And to get value in extjs like that (I guess)
var role= appname.app.globals.role
Is it possible ? Or if it's not possible, whereever I need the role do I have to declare ? like that
var role = Ext.getStore('myStore').getAt(0).raw.role;
The name given to your app is the name of the global variable that ExtJS provides to you.
So, you can do that:
appname.role = role = Ext.getStore('myStore').getAt(0).raw.role;
Then you can access to your role by:
var x = appname.role;
And you can assign your value to "appname.role" in the launch attribute of your application:
Ext.application({
name: 'appname',
appFolder: '/extjs-app/app',
controllers: [
'MainController', ..
],
requires: [
'appname.utils.Logger', ...
],
autoCreateViewport: true,
launch: function() {
appname.role = role = Ext.getStore('myStore').getAt(0).raw.role;
}
});
May I know if it is possible to put pictures or images into the rows of DataTables (http://datatables.net/) and how does one goes in doing it?
yes, simple way (Jquery Datatable)
<script>
$(document).ready(function () {
$('#example').dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax":{
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable" : true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true },
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="Content/Images/'+JsonResultRow.ImageSrcDB+'">';
}
}
],
"order": [[0, "asc"]]
});
});
</script>
[edit: note that the following code and explanation uses a previous DataTables API (1.9 and below?); it translates easily into the current API (in most cases, just ditch the Hungarian notation ("fnRowCallback" just becomes "rowCallback" for example) but I have not done so yet. The backwards compatibility is still in place I believe, but you should look for the newer conventions where possible]
Original reply follows:
What Daniel says is true, but doesn't necessarily say how it's done. And there are many ways. Here are the main ones:
1) The data source (server or otherwise) provides a complete image tag as part of the data set. Don't forget to escape any characters that need escaping for valid JSON
2) The data source provides one or more fields with the information required. For example, a field called "image link" just has the Images/PictureName.png part. Then in fnRowCallback you use this data to create an image tag.
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['imageLink']; // if your JSON is 3D
// var imgLink = aData[4]; // where 4 is the zero-origin column for 2D
var imgTag = '<img src="' + imgLink + '"/>';
$('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-origin visible column in the HTML
return nRow;
}
3) Similar to above, but instead of adding a whole tag, you just update a class that has the image as a background. You would do this for images that are repeated elements rather than one-off or unique pieces of data.
You mean an image inside a column of the table?
Yes, just place an html image tag
like this
<img src="Images/PictureName.png">
instead of putting data (some string) into a column just put the above html tag....
Asp.net core DataTables
The following code retrieve the image from a folder in WWWroot and the path in the DB field ImagePath
{
"data": "ImagePath",
"render": function (data) {
return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
}
}
In case the Name of the picturefile is put together out of one or more informations in the table, like in my case:
src="/images/' + Nummer + Belegnummer + '.jpg"
you can make it that way:
var table = $('#Table').DataTable({
columnDefs: [
{
targets: 0,
render: getImg
}
]
});
function getImg(data, row, full) {
var Nummer = full[1];
var Belegnummer = full[4];
return '<img src="/images/' + Nummer + Belegnummer + '.jpg"/>';}
The picture is in the first column, so Targets = 0 and gets the Information from the same row.
It is necessary to add the parameters data and row.
It is not necessary to outsource it into a seperate function, here getImg, but it makes it easier to debug.