I so rarely ever get pulled into dojo related work that I don't know it as well as I should (I mostly do perl work).
Anyway, the short question is that I have a dojo.form.ComboBox where some of the values need to have a small icon placed next to them (they are special variables) when you dropdown. I"m not sure in dojo.form.ComboBox if this is even possible.
Am I even using the right control? (For the record I am generating my pages with Template::Toolkit and my app is in dojo's framework).
I need to keep the ComboBox functionality of being able to add values if they don't already exist. Even if I can't use an icon, some way of highlighting the line would be fine too or changing the color of the box if a certain value is selected would work.
Any clues would be appreciated.
Janie
Consider using a dijit.form.DropDownButton. The link contains examples with code on how to add icons to the values.
Notice that the DropDownButton uses dijit.MenuItem's as elements, as such your goal is to set the icons you want on these menu items. Dojo has several icon classes ready for use, but if you want to use your own custom icons, take a look at this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito',
label:"<img width='16px' height='16px' src='images/one.jpg'/>Ecuador"
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo',
label:"<img width='16px' height='16px' src='images/two.jpg'/>Egypt"
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador',
label:"<img width='16px' height='16px' src='images/three.jpg'/>El Salvador"
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo',
label:"<img width='16px' height='16px' src='images/four.jpg'/>Equatorial Guinea"
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara',
label:"<img width='16px' height='16px' src='images/five.jpg'/>Eritrea"
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn',
label:"<img width='16px' height='16px' src='images/six.jpg'/>Estonia"
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa',
label:"<img width='16px' height='16px' src='images/seven.jpg'/>Ethiopia"
}]
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dojo.data.ItemFileReadStore" data="storeData" jsId="countryStore">
</div>
<div dojoType="dijit.form.ComboBox" store="countryStore" labelAttr="label" labelType="html">
</div>
</body>
For archival purposes should someone else have this problem, just cut and paste the above to see this in action. You will have to find your own images for the icons of course but this works. Janie
Set the values of the parameters:
searchAttr='name', labelAttr='label', labelType='html'.
searchAttr - the value of the parameter that is displayed when it is selected.
labelAttr - here place html. The value of this parameter is displayed in the dropdown menu.
e.g.
require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function(Memory, ComboBox){
var iconsStore = new Memory({
data: [
{id: 'stack-overflow', name: 'stack-overflow', label: '<i class="fa fa-stack-overflow"/>'},
{id: 'user', name: 'user', label: '<i class="fa fa-user"/>'},
{id: 'group', name: 'group', label: '<i class="fa fa-groupr"/>'}
]
});
var cb_icons = new ComboBox({
id: "iconSelect",
name: "isons",
value: "stack-overflow",
store: iconsStore,
searchAttr: "name",
labelAttr: "label",
labelType: "html"
}, "stateSelect").startup();
});
Related
This is the code
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- problem lays here -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "{{ route('users.index') }}",
dom: '<l<"toolbar">f>rtip',
initComplete: function(){
$("div.toolbar").html('<div style="float:left;margin-left:4px;"><select class="form-control select2bs4 select2-hidden-accessible trash_all" style="width:140px;height:32px;margin-left:10px;" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19">Bulk Actions</option><option data-select2-id="38" value="trashAll">Trash</option></select></div><div style="float:left;margin-left:20px;"><select onchange="window.location = this.options[this.selectedIndex].value" class="form-control select2bs4 select2-hidden-accessible download-doc" style="width:140px;height:32px;margin-left:10px;padding-bottom:5px"" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19" value="{{route('users.index')}}">Download</option><option data-select2-id="38" value="{{route('users.pdf')}}">PDF</option><option data-select2-id="39" value="{{route('users.excel')}}">XLS</option><option data-select2-id="39" value="{{route('users.word')}}">Doc</option></select></div>');
},
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'roles', name: 'roles'},
{data: 'status', name: 'status'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$("div.toolbar").css("float", "left");
$('#roles').select2({
ajax: {
url: '{{ url('searchrole') }}',
processResults: function(data){
return {
results: data.map(function(item){return {id: item.id, text: item.name} })
}
}
}
});
When I remove this code
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
Custom toolbar is working
But, when I let the code above exist, custom toolbar element is gone. I should make it exist because select2 not working if I remove code above.
You can display those select controls by doing this:
(1) Un-comment your select2.min.css resource again.
(2) Remove this class from your code: select2-hidden-accessible. It appears in 2 places in your initComplete function and is causing your controls to be hidden.
(There may be other tweaks you need to make, depending on how the remaining classes in that block of HTML code interact with the select2 CSS.)
Please have a look at http://jsfiddle.net/43Nh9/2/
row template is working when using declarative approach but when i initialize a div to kendo Grid it doesn't work for text box. Help me getting this work.
here is my code
<div id="grid" data-role="grid" data-editable="inline" data-bind="source: data" data-row-template="row-template"></div>
<script id="row-template" type="text/x-kendo-template">
<tr class="k-grid-edit-row" data-uid="#= uid #">
<td>
<input class='k-textbox' data-bind="value:Name" />
</td>
<td>
<span>#:Name#</span>
</td>
</tr>
</script>
var viewModel = kendo.observable({
data: [{
Name: "1Chai",
Price: 18.00
}, {
Name: "2Chai",
Price: 18.00
}, {
Name: "3Chai",
Price: 18.00
}, {
Name: "4Chai",
Price: 18.00
}, {
Name: "5Chai",
Price: 18.00
}, ]
});
kendo.bind(document.body, viewModel);
var grid = $("#grid2").kendoGrid({
dataSource: {
data: [{
Name: "1Chai",
Price: 18.00
}, {
Name: "2Chai",
Price: 18.00
}, {
Name: "3Chai",
Price: 18.00
}, {
Name: "4Chai",
Price: 18.00
}, {
Name: "5Chai",
Price: 18.00
}, ]
},
rowTemplate: kendo.template($("#row-template").html())
}).data("kendoGrid");
Thanks in advance.
You will need to manually bind the row models to the TR elements of the Grid. You can do this in the dataBound event handler.
e.g.
dataBound: function(){
var grid = this;
this.tbody.find('tr').each(function(){
var tr = $(this);
kendo.bind(tr, grid.dataItem(tr));
})
},
Fiddle
I am struggling to get a custom edit command link working for kendo ui grid. Say I have following grid
<div id="request-grid" style="height: 400px;"></div>
<script type="text/javascript">
$("#request-grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "Id", title: "Id", width: 20
}, {
field: "FromName", title: "Req Name", width: 150
....
}, {
command: [{ name: "edit", template: kendo.template('#Html.ActionLink("Edit","_SoftwareRequestEdit","SoftwareRequest",new {id = "#= Id #"}, null)') }]
}],
});
</script>
I have used the code above for the edit link, but I don't remember the specifics. I have been scratching my head for the correct syntax for 2 hours now and still couldn't figure out. The above edit command template generates following link
Edit
whereas I was expecting this
Edit
for grid row with Id equal to 3
Any ideas how to correctly generate edit links with correct Id values
Remove kendo.template() from the definition of the template, KendoUI already knows that it has to be a template so it expects a string and not a kendo.template` object. See documentation and examples in their documentation here.
Example:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>
I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>
How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");
Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.
I am trying to code two filteringselects which should both change according to data entered into any of the forms.
So data entered into fs1 should trigger changes in fs2.
Data entered into fs2 should trigger changes in fs1.
I am in a spring environment which in my case means that the dojo code is in a jsp file and the filtering select fields are populated through a Controller class on the server side using #ModelAttribute annotations to make the data available as a variable in the jsp file.
I have the relation data on the Java side so it's available through the controller.
Here is what confuses me at the moment.
I am new to DOJO and the documentation on the DOJO support site is a little hard to grasp for me. I would like to see a conceptual list of what is needed to accopmplish and connect the separate stores of my filteringselects.
When there is a change in one of the filteringselects, how do I inform the controllerclass of the changes and send the data that remains in the filteringselect?
This question could also be read as: how can I call a method with input parameters that hold the data available in the edited filteringselect?
I suggest we work on this in two incremental parts:
Get the first FilteringSelect's onChange event working
Wire them up to use server data stores
The following code sample takes a Dojo Campus' codependent FilteringSelect example and simplifies it so that its data stores are local. It shows how to programmatically instantiate two FilteringSelects with the second being dependent on the first by an onChange event handler.
Can you please try running it and let me know if you get it working?
Once we get your first FilteringSelect triggering filtering on the second, I will edit to add an explanation on how to convert them to use server side data stores.
<html>
<head>
<title>Test File</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<label for="state">State:</label>
<input id="state">
<label for="city">City:</label>
<input id="city">
<script type="text/javascript" src="dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
var cityJson = {
label: 'name',
items: [{ name: 'Albany', state: 'NY' },
{ name: 'New York City', state: 'NY' },
{ name: 'Buffalo', state: 'NY' },
{ name: 'Austin', state: 'TX' },
{ name: 'Houston', state: 'TX' }]
};
var stateJson = {
identifier: 'abbreviation',
label: 'name',
items: [ { name: 'New York', abbreviation: 'NY' },
{ name: 'Texas', abbreviation: 'TX' } ]
};
new dijit.form.ComboBox({
store: new dojo.data.ItemFileReadStore({
data: cityJson
}),
autoComplete: true,
query: {
state: "*"
},
style: "width: 150px;",
required: true,
id: "city",
onChange: function(city) {
dijit.byId('state').attr('value', (dijit.byId('city').item || {
state: ''
}).state);
}
},
"city");
new dijit.form.FilteringSelect({
store: new dojo.data.ItemFileReadStore({
data: stateJson
}),
autoComplete: true,
style: "width: 150px;",
id: "state",
onChange: function(state) {
dijit.byId('city').query.state = state || "*";
}
},
"state");
});
</script>
</body>
</html>
in the namespace of the jsp:
xmlns:springform="http://www.springframework.org/tags/form"
sample form:
<springform:form action="#" >
<label for="country">Country:</label>
<springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/>
<div id="citySelectDiv"></div>
</springform:form>
javascript code:
<script type="text/javascript">
<![CDATA[
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
function countryChanged(dataFromServer){
//convert json to dojo filteringSelect options
var options = {
identifier: 'id',
label: 'city',
items: dataFromServer
};
var cityStore =new dojo.data.ItemFileReadStore({data : options});
// create Select widget, populating its options from the store
if (!dijit.byId("citySelectDiv")) {
//create city selction combo
new dijit.form.FilteringSelect({
name: "citySelectDiv",
store: cityStore,
searchAttr : "city",
}, "citySelectDiv");
}else{
//if already created the combo before
dijit.byId('citySelectDiv').set('value',null);
dijit.byId('citySelectDiv').store = cityStore;
}
}
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "country",
widgetType : "dijit.form.FilteringSelect",
widgetAttrs : {
promptMessage: "Select a Country",
required : true,
onChange : function(){
var xhrArgs = {
url: "ajax/country/" +dijit.byId('country').get('value'),
handleAs: 'json',
load: function(dataFromServer) {
countryChanged(dataFromServer);
}
};
//make the ajax call
dojo.xhrGet(xhrArgs);
}
}
}));
Sample Controller method:
#ResponseBody
#RequestMapping("/ajax/country/{country}")
public List<City> clientSelection(#PathVariable("country") String country ) {
log.info("Country = {} ",country);
return cityService.findCitiesByCountry(country);
}