Duration: 16 minutes
Summary: In this video, we discuss the selectable and sortable functionalities within jQuery UI. As you will see in the video, these functionalities are easy to implement. Most of the work that we did is in the html and the css. For our case, we created an ordered list of elements (Tomato, Apple…). We added css classes from the Dark Hive folder. We also added some styles on the page. Specifically we added the ui-selecting and ui-selected classes to show the effect when an item is selected. We changed the list style type to none to remove the numbering on the list and we added spaces between the list elements. Finally, to get the selectable functionality to work, we called the selectable() function and to get the sortable functionality to work, we called the sortable function.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, selectable, sortable.
Transcript: welcome back everyone. This is Ayad Boudiab. I'm a senior .NET application developer. And we've been discussing jQuery UI. There are a few elements that I have already discussed with you. We talked about the jQuery UI widgets that we can use. And we also talked about the effects that we can illustrate, some animation stuff. Also, we talked about how we can resize a div on the page and also, how we can drag and drop some divs on a page. I illustrated that to you in the previous video. In this video today, I'd like to talk about a couple of things. The first thing is the selectable and the sortable. Selectable as the name implies you need to select some element of the page and sortable, you need to rearrange those elements on the screen.
A lot of those illustrations I'm just getting from the jQuery UI page and how we can work with them. All the events, all the descriptions, all the documentation, all the code is there to help illustrate this further if you need to dig deeper into how we can work with jQuery UI. Because it's very powerful, you know, it's on the client-side so you don't have that performance hit of hitting the server o work with some data, almost everything is done on the client side. Unless, of course, you need some data and you can get it from the server using AJAX and other codes to retrieve that data. But, at least right now for our case, we need to talk about selectable and sortable. Right now, I have a page that's empty. I have the one we've been using all along. I have a reference to the link, that's the custom CSS that you see here that's coming from the Dark Hive folder and also I have the jQuery and the jQuery UI references in here in the js folder. The function that we call when the dom is ready is empty right now and there are no styles. Inside the div, I have a class named demo and in that class, I'd like to put some ordered list elements, give it an id and that id will be called selectable.
For that ordered list, I'm going to put some list items, probably like, let's go with fruits and vegetables. Let's copy that and make a few more, maybe apple, orange, cucumber, lettuce, onion, and he last one, let's go with banana. So this is a list of elements that I have in my div. If I take this list of elements and try to preview it in the browser, that's what I end up with, a list of seven elements. Now, one thing that I'd like to do with this is add a class or a couple of classes for these items. The first one that I'd like to add. Here's a class = so this is the content of the class. And inside the class, I will actually add two classes. The first one is ui-widget-content and the second one is ui-corner-all. Now, we're going to take this class and apply it to the rest of the elements that you see here. OK, a couple more. And one more here. By adding those two classes that I already got from the custom.CSS on Dark Hive, I preview that in the browser and now they look like this. OK? So far so good. Then, we're just messing with some HTML, nothing else. And now, let's go ahead and just apply some CSS. We know it's called selectable, so I'm going to change some of those properties or some of those options for CSS. I use the # since it's an id and for that selectable and for the class you are selecting, I'm going to change the background while we are selecting. That's the selecting option, right? The background would be #C0C0C0. OK? So, that's the color I'd like to choose for the background color for the selectable element, right?
Let me copy this and paste it here. And now instead of ui-selecting, it's ui-selected class. So, for that selectable element where we have ui- selected, I'm going to change the background in this case to #808080 and then also, I'd like to change the color of the text and make that as follows. So these are just simply, did I put too many zeros? Yes, I did. FF0000. So, this basically for the selectable element when you are selecting and selected. OK? View that in the browser. Nothing happened, right? So, I don't have anything based on my changes right now. You notice when I highlight it, the actual numbering starts showing, because it's hidden with the background color the same as the foreground color.
Now, let's scroll up and go back to the actual jQuery function. In this case, I'm going to reference my selectable element, right? And then, I'm going to call that selectable on it. What's going to happen when I apply selectable on it? It's going to use some of the classes that I showed you down here. By simply doing selectable on this object, when I preview it, when I select something, and click on it, it actually did change the background and the font-text. You notice, remember here when I said we changed the color to FF0000 which is red and here the background greyish. Here the background is different. Right? So when I select an element, what's happening to them? Right, it's changing the background and also the text. If I click and I drag, it's selecting all of them, anything that I dragged on is selected. I can select one at a time. Now, I'm holding the ctrl key and I'm selecting them all. OK?
So this is how we can work with a selectable, as far as jQuery UI is concerned. Again, all we did is call selectable on that object. But of course, of course, we implemented what we would like to see that specific selectable div or we would like to see when we have ui-selecting and ui- selected.
These are not events. These are classes, CSS classes that are implemented in the jQuery folder we downloaded when we went to dark-hive and we select that as our option. We get down the jQuery, the jQuery UI, and the custom CSS. I changed the background color for those and the color of the text and I applied that to the selectable div and that's what gave me, when I try to preview it in the browser, now I'm able to select those elements. For illustration, I changed the background color to red. OK?
Let's go ahead now and implement the sortable option. For the sortable option, as the name implies, I should be able to sort those elements somehow. Now, those elements are pretty much the same ones like the one that you saw on the previous video. So right now, I have, let's just make sure that I have the right values, for the tomato, apple, orange, cucumber, lettuce, onion, and banana. I want these to be the sortable ones. So let's get the div, we already have the div for the demo. Let's go ahead and paste the ordered list of sortable elements. Again, if I tried to save that first, preview it in the browser, you end up with this because I applied the classes to it. Now, there are a couple of things that I also would like to change. The first thing that I would like to change is actually the styles. I would like to change the styles to make sortable with list-type, margin, and padding like we've done in the previous one. So I will take the sortable element, apply the style to it, make the list-style-type none. So we don't see the numbering with the styles, margin is 0, padding is 0, width is 60% so that it doesn't take up the whole page. And then the margin for every one of those list elements, the margin, the padding, the font- size and the height.
Save this. View it in the browser. You'll end up with something like that. OK? Now, I can't do anything with it yet. It's not selectable and it's not sortable either.
Let's scroll up to the code where we can write our jQuery ui option element. Now, we need to refer to the actual element. Right? So we have # and it's called sortable, and we're going to call the sortable functionality on it. Sortable. And now when I try to preview that in the browser, I can move banana up above lettuce, above cucumber, and all the way to the top. I can take onion and do the same thing, I can take apple all the way under banana and orange under apple. See that? We can move the elements and make them sortable by moving them up and down. All that we've done in this case, is basically making it sortable. What we've done down below is we just added some HTML, applied some CSS classes that came from the dark-hive folder and also applied some styles to look nice with some spacing in between. I don't want them to be stuck together. But the core of the functionality, you're just calling sortable on it. That makes the elements sortable. Same thing over here with the selectable. We did some HTML, we added some styles, right? But, all that we've done up here is calling selectable. That makes the elements selectable and I can select one or more at the same time.
This functionality is powerful. It adds a lot of power to your client-side function of the web site. I highly recommend that you can use this function back in your web applications. And that will be it for our video. We'll proceed in the next video. I'll discuss the jQuery grid and all the details of the jQuery grid and see how we can display some of those data in a grid format, the same way we do with ASP.NET. But in this case all happening on the client side. OK? So, please drop us a line on our MSRBL website if you have any questions. Thank you very much for listening. I am Ayad Boudiab and you take care.