How do I store kendoMultiSelect selected values in an array variable? - javascript

I want to store selected values from the dropdown into an array but getting null values.
Is this a correct way to store selected values in an array?
var selecteddeliverableLists = ko.observableArray();
function loadDeliverableKeyValuePairs() {
deliverableKeyValuePairLists.removeAll();
$.get("/common/packagestatus/get/pairs", function (responseData) {
var dataArray = deliverableKeyValuePairLists();
responseData.forEach(function (o) {
dataArray.push({
Id: o.key,
Name: o.value
});
});
deliverableKeyValuePairLists.valueHasMutated();
}).done(function () {
selecteddeliverableLists = $("#deliverable__kendo__selection").kendoMultiSelect({
dataTextField: "Name",
dataValueField: "Id",
optionLabel: " -- Select All -- ",
dataSource: deliverableKeyValuePairLists(),
index: 0,
change: filterdeliverable
//onChangeDeliverableFilter
});
});
selecteddeliverableLists.valueHasMutated();
}
function filterdeliverable() {
var newval = selecteddeliverableLists.val();
console.log(newval);
}

You get the value as element_name.data("kendoMultiSelect").value();
function filterdeliverable() {
var newval = $("#deliverable__kendo__selection").data("kendoMultiSelect").value();
console.log(newval);
}

You can use the change event of the kendoMultiSelect to store the new values array when the change is made.
You can use the new array right in the change event's callback function or use it later.
See a simple example in the following snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>
</head>
<body>
<select id="multiselect" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
</select>
<button onclick="$('#output').html(values.map(function (value) {return '<li>' + value + '</li>'}))">Update</button>
<ul id="output"></ul>
<script>
var values = [];
$("#multiselect").kendoMultiSelect({
change: function(e) {
values = this.value();
}
});
</script>
</body>
</html>

Related

Setting local storage for Datepicker

I have a J query code which shows the date picker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<div id = "date">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
I have tried local storage to save the date inside the textfield, but it seems to erase on page refresh. Please help. Thanks a lot for your time.
My local storage code
<script type="text/javascript">
document.getElementById("datepicker").value = getSavedValue("datepicker"); // set the value to this input
/* Here you can add more inputs to set value. if it's saved */
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue (v){
if (!localStorage.getItem(v)) {
return "";// You can change this to your defualt value.
}
return localStorage.getItem(v);
}
</script>
Check the below snippet to store and update data with localStorage
Update localStorage with the selected date when datepicker is closed, with onClose event
Set back the date from localStorage to datepicker on load of the document
Note: Snippet is throwing an error as localStorage is not accessible within the below sandbox.
var storage = {
saveDate: function (dateText, instance) {
// If not valid date take last selected value
var validDateText = dateText ? (dateText.match(/\d{2}\/\d{2}\/\d{4}/) || [instance.lastVal])[0] : "";
var data = JSON.parse(localStorage.getItem('jq-ui-datepicker') || "{}");
data[instance.id] = validDateText;
localStorage.setItem('jq-ui-datepicker', JSON.stringify(data));
instance.input.val(validDateText);
},
getDate: function () {
var data = JSON.parse(localStorage.getItem('jq-ui-datepicker') || "{}");
$(".datepicker").each(function () {
var $this = $(this),
dateText = data[$this.attr('id')];
if (dateText) {
// Set date to datepicker
$this.datepicker('setDate', dateText);
}
})
}
}
$(function () {
$(".datepicker").datepicker({
onClose: storage.saveDate
});
storage.getDate();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<div id="date">
<p>Date - 1: <input type="text" id="date1" class="datepicker"></p>
<p>Date - 2: <input type="text" id="date2" class="datepicker"></p>
</div>

jQuery autocomplete dynamic ajax

I'm trying to build a search input with the autocomplete feature. However, the suggestions depend on the input and are not static - which means that I have to retrieve the list every time the user types into the field. The suggestions are based on Google autosuggest: "http://google.com/complete/search?q=TERM&output=toolbar".
I'm currently using http://easyautocomplete.com.
This is my code:
var array = [];
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
$("#basics").on("keyup",function() {
var keyword = $(this).val();
array = [];
updateSuggestions(keyword);
});
function updateSuggestions(keyword) {
$.ajax({
type: "POST",
url: "{{ path('suggestKeywords') }}",
data: {keyword:keyword},
success: function(res){
var res = JSON.parse(res);
for(var i in res)
{
var suggestion = res[i][0];
array.push(suggestion);
console.log(suggestion);
}
}
});
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
}
I know this is not a very good way to do this - so do you have any suggestions as to how to do it?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
];
$("#automplete-1").autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class="ui-widget">
<p>Type "a" or "s"</p>
<label for="automplete-1">Tags:</label>
<input id="automplete-1">
</div>
</body>
</html>

How do I fill tournament brackets with team names, then make the team names uneditable?

I'm working on a tournament bracketing system, and I found a library called "JQuery bracket" which can help a lot. But there are some problems:
I was planning to retrieve team names (and possibly match scores) from a PostgreSQL database and put them on the brackets. However, the data must be in JSON, and the parser is in Javascript. I can't seem to figure out a workaround.
Original code:
<html>
<head>
<title>jQuery Bracket editor</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />
<style type="text/css">
.empty {
background-color: #FCC;
}
.invalid {
background-color: #FC6;
}
</style>
<script type="text/javascript">
function newFields() {
return 'Bracket name [a-z0-9_] <input type="text" id="bracketId" class="empty" /><input type="submit" value="Create" disabled />'
}
function newBracket() {
$('#editor').empty().bracket({
save: function(data){
$('pre').text(jQuery.toJSON(data))
}
})
$('#fields').html(newFields())
}
function refreshSelect(pick) {
var select = $('#bracketSelect').empty()
$('<option value="">New bracket</option>').appendTo(select)
$.getJSON('rest.php?op=list', function(data) {
$.each(data, function(i, e) {
select.append('<option value="'+e+'">'+e+'</option>')
})
}).success(function() {
if (pick) {
select.find(':selected').removeAttr('seleceted')
select.find('option[value="'+pick+'"]').attr('selected','selected')
select.change()
}
})
}
function hash() {
var bracket = null
var parts = window.location.href.replace(/#!([a-z0-9_]+)$/gi, function(m, match) {
bracket = match
});
return bracket;
}
$(document).ready(newBracket)
$(document).ready(function() {
newBracket()
$('input#bracketId').live('keyup', function() {
var input = $(this)
var submit = $('input[value="Create"]')
if (input.val().length === 0) {
input.removeClass('invalid')
input.addClass('empty')
submit.attr('disabled', 'disabled')
}
else if (input.val().match(/[^0-9a-z_]+/)) {
input.addClass('invalid')
submit.attr('disabled', 'disabled')
}
else {
input.removeClass('empty invalid')
submit.removeAttr('disabled')
}
})
$('input[value="Create"]').live('click', function() {
$(this).attr('disabled', 'disabled')
var input = $('input#bracketId')
var bracketId = input.val()
if (bracketId.match(/[^0-9a-z_]+/))
return
var data = $('#editor').bracket('data')
var json = jQuery.toJSON(data)
$.getJSON('rest.php?op=set&id='+bracketId+'&data='+json)
.success(function() {
refreshSelect(bracketId)
})
})
refreshSelect(hash())
$('#bracketSelect').change(function() {
var value = $(this).val()
location.hash = '#!'+value
if (!value) {
newBracket()
return
}
$('#fields').empty()
$.getJSON('rest.php?op=get&id='+value, function(data) {
$('#editor').empty().bracket({
init: data,
save: function(data){
var json = jQuery.toJSON(data)
$('pre').text(jQuery.toJSON(data))
$.getJSON('rest.php?op=set&id='+value+'&data='+json)
}
})
}).error(function() { })
})
})
</script>
</head>
<body>
Pick bracket: <select id="bracketSelect"></select>
<div id="main">
<h1>jQuery Bracket editor</h1>
<div id="editor"></div>
<div style="clear: both;" id="fields"></div>
<pre></pre>
</div>
</body>
</html>
After the data is retrieved, upon display, you are going to want to add disabled to the html input element. For instance:
<input type="text" id="bracketId" class="empty" disabled>
This will render your text field uneditable.
If you are looking to do this as people are filling out their brackets, I would suggest you either add a <button> after each bracket or fire a jquery event with the mouseout() listener that adds the disabled attribute to your input fields.

Getting the Value from an editable row

I am working on an application where I need to update the the table cell value So I make that table column editable as below.
I am getting these values from the stackMob database(cloud) .Now I want to Update this Device-nickname(editable table column) from the front-end as from the picture. You can see I am getting the Device-nickname as Undefined. So i want to put the name as I want (as I put alpesh for 352700051252111) .Now when editing is done I means when I complete the editing for first row then I want to call a function which will update the Device-nickname for the correspondence IMEI .
For printing and growing the list I used:
for(var i=0; i<=count; i++)
{
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td><div contenteditable >"+array[i].device_nickname+"</div></td><tr>");
}
Now My question is:
How can I call a function to update the values when the editing is done for each row. and How can I get the IMEI of that in which editing got done and i want to get also the value after editing of Device-nickname
thanks in advance !!!
full code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dashboard</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.8.0-bundled-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<!-- <link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/redmond/jquery-ui.css" />-->
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="style/js/bootstrap.js"></script>
<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
<link type="text/css" rel="stylesheet" href="style/css/bootstrap.css"></link>
<script type="text/javascript">
/* <![CDATA[ */
// Initialize StackMob object
// Copy your init data from here: https://dashboard.stackmob.com/sdks/js/config
// Your other app information is here: https://dashboard.stackmob.com/settings
StackMob.init({
appName: "swara_sangam",
clientSubdomain: ".........",
publicKey: "....",
apiVersion: 0
});
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
result();
function result() {
var device = StackMob.Model.extend({ schemaName: 'device' });
var mydevice = new device({organization_id:'1' });
var q = new StackMob.Collection.Query();
//q.lt('age', 50)..orderAsc('username');
q.setRange(0,15).orderDesc('lastmoddate');
mydevice.query(q, {
success: function(modal) {
//After StackMob returns "Bill Watterson", print out the result
var array = modal.toJSON();
// console.debug(array);
//$('#data').html(array[0].user_name);
var val = array[0].lastmoddate;
$('#last_mod_date').attr('value', val);
var key;
var count = 0;
for(key in array) {
if(array.hasOwnProperty(key)) {
count ++;
}
}
//alert(count);
for(var i=0; i<=count; i++)
{
// if(array[i].org_img == localStorage.getItem("stackmob.oauth2.user"))
//alert(array[i].org_img);
//$('#last_mod_date').html(array[0].lastmoddate);
//alert(val);
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td ><div class="device-name" contenteditable>"+array[i].device_nickname+"</div></td><td>"+array[i].device_org+"</td><td>"+ new Date(array[i].lastmoddate)+"</td><tr>");
//alert("save");
//$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td><div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' >"+array[i].device_nickname+"</div></td><tr>");
alert("save");
//end if condition
} // end for loop
$('.device-name').on('blur', function(event){
alert(event.target.textContent);
alert($(event.target).closest('tr').find('.imei').text());
alert($(event.target).closest('tr').find('.model').text());
})
} //end success
}); // end imagesearch schema query
} // end result function
setInterval(check_newentry,1000);
function check_newentry() {
var device = StackMob.Model.extend({ schemaName: 'device' });
var mydevice = new device({ });
var q = new StackMob.Collection.Query();
q.orderDesc('lastmoddate');
mydevice.query(q, {
success: function(modal) {
//After StackMob returns "Bill Watterson", print out the result
var array = modal.toJSON();
// console.debug(array);
//$('#data').html(array[0].user_name);
// alert(lastmod_date_old +"..."+ lastmod_date);
if(lastmod_date_old < lastmod_date)
{
var val = array[0].lastmoddate;
$('#last_mod_date').attr('value', val);
var key;
var count = 0;
var counter=0;
for(key in array) {
if(array.hasOwnProperty(key)) {
count ++;
}
}
//alert(count);
for(var i=0; i<=count; i++)
{
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td>"+array[i].device_nickname+"</td><td>"+array[i].device_org+"</td><td>"+new Date(array[i].lastmoddate)+"</td><tr>");
//------------------------------------------- end device schema code
counter++;
exit();
}
}
}
});
}
});
</script>
</head>
<body>
<div class="modal-body" style=''>
<table class="data table-bordered table table-striped" id="ui" >
<tr style="background-color:blue;color:white;"><td width="25%">Device-imei</td><td>Device-Model</td><td>device-nickname</td><td>Device-org</td><td>Time</td></tr>
</table>
</div>
<!--<div id="last_mod_date" value=""></div>
<div id="latlng" value=""></div> -->
</script>
</body>
</html>
$('.device-name').on('blur', function(event){
alert(event.target.textContent);
alert($(event.target).closest('tr').find('.imei').text());
alert($(event.target).closest('tr').find('.model').text());
})
See http://jsfiddle.net/Jke9J/3/
To get other data you can assign classes for each column, get closest tr after data was changed, and find data by these classes inside found tr
Edit:
See http://jsfiddle.net/Jke9J/7/
SCRIPT:
var editable = document.querySelectorAll('div[contentEditable]');
for (var i=0, len = editable.length; i<len; i++){
editable[i].setAttribute('data-orig',editable[i].innerHTML);
editable[i].onblur = function(){
if (this.innerHTML == this.getAttribute('data-orig')) {
// no change
}
else {
// change has happened, store new value
this.setAttribute('data-orig',this.innerHTML);
}
};
}
Copied from onChange event with contenteditable
You can simplify the above code like
for(var i=0; i<=count; i++)
{
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td><div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' >"+array[i].device_nickname+"</div></td><tr>");
}
$(document).on('blur','.divEditable',function(){
if($(this).html()!=$(this).data('orig'))
// innnerHTML is changed then reassign the data-orig attr
{
$(this).data('orig',$(this).html());
// code to get closest imei for that row
imei=$(this).closest('tr').find('td:first-child').html();
console.log(imei);// to test
}
});

How do you style a dojox.grid.DataGrid row?

I have the following example code (you can cut'n'paste it if you want):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
function init() {
var lData = {
items: [
{"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var grid = dijit.byId("theGrid");
grid.setStore(dataStore);
dojo.connect(dijit.byId("theGrid"), 'onStyleRow', this, function (row) {
var theGrid = dijit.byId("theGrid")
var item = theGrid.getItem(row.index);
if(item){
var type = dataStore.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
}
}
theGrid.focus.styleRow(row);
theGrid.edit.styleRow(row);
});
}
var plugins = {
filter: {
itemsName: 'songs',
closeFilterbarButton: true,
ruleCount: 8
}
};
dojo.ready(init);
function filterGrid() {
dijit.byId("theGrid").filter({band: dijit.byId('filterText').get('value')+'*'});
console.log(dijit.byId('filterText').get('value')+'*');
}
function resetFilter() {
dijit.byId("theGrid").filter({band: '*'});
dijit.byId('filterText').set('value','');
}
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto" plugins="plugins">
<thead>
<tr>
<th field="position" width="200px">Position</th>
<th field="band" width="200px">Band</th>
<th field="conductor" width="200px">Conductor</th>
</tr>
</thead>
</table>
</body>
</html>
The onStyleRow only gets fired when I click a row. Is there any way to have a button format rows based on their content? Either by having classes assigned to rows at creation time and then change the class values or loop through the rows and directly changing the style element of each based on it's contents.
EDIT
I have also tried creating the grid programmatically. While when created this way it does fire the onStyleRow at creation time it does not provide the same level of hightlighting the other method does.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<style>
#grid {
height: 20em;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
function init() {
var lData = {
items: [
{"position":"1","music":"Opera","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","music":"Opera","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","music":"Classical","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","music":"Classical","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","music":"Opera","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var layout = [[
{'name':'Position','field':'position','width':'50px'},
{'name':'Music Type','field':'music','width':'150px'},
{'name':'Band','field':'band','width':'200px'},
{'name':'Conductor','field':'conductor','width':'200px'}
]];
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: dataStore,
structure: layout,
rowSelector: false,
selectionMode: 'extended',
onStyleRow: function(row) {
var item = this.getItem(row.index);
if(item){
var type = this.store.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
}
}
}
});
grid.placeAt("gridDiv");
grid.startup();
}
var plugins = {
filter: {
itemsName: 'songs',
closeFilterbarButton: true,
ruleCount: 8
}
};
dojo.ready(init);
function filterGrid() {
dijit.byId("grid").filter({band: dijit.byId('filterText').get('value')+'*'});
console.log(dijit.byId('filterText').get('value')+'*');
}
function resetFilter() {
dijit.byId("grid").filter({band: '*'});
dijit.byId('filterText').set('value','');
}
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>
Method 1 (doesn't format when grid is created, nice highlighting)
Method 2 (formats when grid created, no row highlighting)
A simple re-ordering of the init() function makes sure the onStyleRow function is bound before the data is added to the grid works.
function init() {
var lData = {
items: [
{"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
{"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
{"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
{"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
{"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
],
identifier: "position"
};
var dataStore = new dojo.data.ItemFileReadStore({data:lData});
var grid = dijit.byId("theGrid");
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if(item){
var type = dataStore.getValue(item, "band", null);
if(type == "Rothwell Temperance"){
row.customStyles += "color:red;";
//row.customClasses += " dismissed";
}
}
//theGrid.focus.styleRow(row);
//theGrid.edit.styleRow(row);
});
grid.setStore(dataStore);
}
Have you tried any of the following:
Style Dojox Grid Row depending on data
dojox DataGrid onStyleRow works first time, then not again
dojox.grid.DataGrid - onStyleRow needs update? (dojo 1.2.0)
You can also use Firebug to see if rows are getting assigned an ID and then change background of each row using onStyleRow.

Categories