We Keep Coding

Make multiselect selected elements appear outside textbox

Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?

A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);

Custom functionality: Editing Read Only Kendo UI Grid cell when it has dirty cell class applied

I have a Kendo UI Grid. If the field has some value in it then it should appear as read only (not editable) otherwise it will be an editable cell.
Now, I have implemented the below given solution.
[http://jsfiddle.net/NX96g/175/][1]
It’s working fine. If the field has not a value or 'blank/Empty/Null' then that cell is editable.
But problem is if user enters some value in Empty/blank/Null cell, the cell becomes read only instantly and user not able to edit it.
How to let the user edit cell when it has dirty cell class applied ?

Not sure this is really an answer but...
Your DataSource has autoSync: true. If you do not set it to true, then kendo will add a "k-dirty-cell" class to the cell/td which is persisted and used to append the k-dirty span that adds the red marker.
http://dojo.telerik.com/#Stephen/uvaGI
This shows what you want working with autoSync: false and an extra check for the "k-dirty-cell" class:
if (!isEditable(fieldName, e.model) && !e.container.hasClass("k-dirty-cell")) {
When autoSync is true, the "k-dirty-cell" class is not used and then there is nothing to look for as if the changes are always saved immediately, then technically the cell is never dirty.
If you must have autoSync: true...I haven't been able to figure anything out yet. I've played with adding a check on model.dirty but with autoSync on the model isn't dirty the second time in the editor as the autoSync saves the change immediately.
It is possible that you could use a variation of the technique here:
http://www.telerik.com/support/code-library/preserve-the-dirty-indicator-in-incell-editing-and-client-operations
to keep track of the dirty cells manually in the model and integrate that check into your isEditable().
But, I would probably just turn off autoSync if you don't really need it.

Multy-filter page with transitions - Isotope & Quicksand JS problems

(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!

You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.

Highlighting bars as the mouse hovers on the table rows in Protovis

I am new at protovis and I am having a problem.
I have a html table which has the data and Bar Chart made in protovis using the table's data. Now what I want is to change the color of the individual bars as mouse is hovers on that particular row.
Can anyone help me how it can be done? Thanks in advance.

I've set up a working example here. You can't do what you're asking using just Protovis, because Protovis can't set event handlers on the HTML table. In order to achieve this, you generally need to:
Set up a variable to hold the state (in this case, which of the rows should be highlighted)
Set the visual parameter you want to change in your Protovis code (in this case, fillStyle) to a function that checks the state variable:
.fillStyle(function(d) { return hilighted == d.name ? "orange" : "blue" });
Set an event handler on the HTML table (I used jQuery, as your tag indicated you were using this too) that changes the state variable and re-renders the vis.
In jQuery:
$('#myTable tr').mouseover(function() {
// set the state variable
hilighted = $(this).data('name');
// re-render the vis
vis.render();
});
There are other ways to do this as well, but this is generally the easiest, and for interactions involving other parts of the page it's generally a good idea to hold the state in a separate variable outside your Protovis code.

I've not used Protovis before but the interaction documentation leads me you could do it by adding something like this to your object:
.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore

Wiring up javascript events and passing parameters

A bit background:
I've got a page with a table and a number of checkboxes. The page is generated in asp.net.
Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).
Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.
so you have something like:
<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>
Not much of a surprise there then.
Ok so the here's the problem:
So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.
I know what you're thinking: easy just call that Javascript function highlightRow.
But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)
So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.
(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)
Update:
Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)
The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.
In the end went with a bit of a hack:
// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
if (element.click)
{
element.click();
}
else
{
// We don't have a click on this element, so add our own.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
Think that could be somewhat improved but it does the business for now.
Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.

you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.
thats how you can define alternate row color for the table using jquery
$("table tr:nth-child(even)").addClass("striped");
<style>
.striped{
background-color:#efefef;
}
</style>

I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.

If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?
I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.
I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.
I would also use jQuery to easily create the js-code.
I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.