Future Of Technology - Django

Introduction

• This document helps you to reuse Django admin part FilteredSelectMultiple widget in our application. For that we need to do the following simple steps.

• Here model Student has many to many field to Subjects. In this case a student can have infinite subjects.

class Student(models.Model):
    name=models.CharField(max_length=100)
    subject=ManyToManyField(Subjects)
class Subjects(models.Model):
    sub_name=models.CharField(max_length=100)
    desc=models.CharField(max_length=100)

from django.contrib.admin.widgets import FilteredSelectMultiple
from django.forms import ModelForm
from django import forms

class StudentForm(ModelForm):
    subject=forms.ModelMultipleChoiceField(Subjects.objects.all(),widget=
FilteredSelectMultiple("Subjects",False,attrs={'rows':'10'}))
    class Meta:
        model= Student
def Form(request):
    stud_form=StudentForm()
    if request.POST:
        stud_form=StudentForm(request.POST)
        stud_form.save()
        return render_to_response("success.html")
    else:
        return render_to_response("form.html",{' stud_form': stud_form}

• You can load the above script from admin part. please check the url http://localhost/yourproject/admin/jsi18n/. The problem is only admin user can load tis url, so i copied this script in our js folder, since all out enduser need to use this widget.

/* gettext library */
// This function is copied from django admin path

var catalog = new Array();

function pluralidx(count) { return (count == 1) ? 0 : 1; }


function gettext(msgid) {
var value = catalog[msgid];
if (typeof(value) == 'undefined') {
return msgid;
} else {
return (typeof(value) == 'string') ? value : value[0];
}
}

function ngettext(singular, plural, count) {
value = catalog[singular];
if (typeof(value) == 'undefined') {
return (count == 1) ? singular : plural;
} else {
return value[pluralidx(count)];
}
}

function gettext_noop(msgid) { return msgid; }

function interpolate(fmt, obj, named) {
if (named) {
return fmt.replace(/%\(\w+\)s/g, function(match){return String(obj[match.slice(2,-2)])});
} else {
return fmt.replace(/%s/g, function(match){return String(obj.shift())});
}
}

• css for load default style with images for the widget. Please copy all necessary images(names mentioned in css) form django admin media path to your image directory.
  

/*css for admin widgets*/

/*for FilteredSelectMultiple*/
.selector {
width: 580px;
float: left;
}

.selector select {
width: 270px;
height: 8em;
}

.selector-available, .selector-chosen {
float: left;
width: 270px;
text-align: center;
margin-bottom: 5px;
}

.selector-available h2, .selector-chosen h2 {
border: 1px solid #ccc;
font-family:"Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
font-size:11px;
}

.selector .selector-available h2 {

background: #a6a077 url(/images/admin/nav-bg.gif) bottom left repeat-x;
color: white;
}
.selector .selector-chosen h2 {
background: #A29A63 url(/images/admin/default-bg.gif) repeat-x scroll left top;
color: white;
}


.selector .selector-filter {
background: white;
border: 1px solid #ccc;
border-width: 0 1px;
padding: 3px;
color: #999;
font-size: 10px;
margin: 0;
text-align: left;
}

.selector .selector-chosen .selector-filter {
padding: 4px 5px;
}

.selector .selector-available input {
width: 230px;
}

.selector ul.selector-chooser {
float: left;
width: 22px;
height: 50px;
background: url(/admin/chooser-bg.gif) top center no-repeat;
margin: 8em 3px 0 3px;
padding: 0;
}

.selector-chooser li {
margin: 0;
padding: 3px;
list-style-type: none;
}

.selector select {
margin-bottom: 5px;
margin-top: 0;
}

.selector-add, .selector-remove {
width: 16px;
height: 16px;
display: block;
text-indent: -3000px;
}

.selector-add {
background: url(/images/admin/selector-add.gif) top center no-repeat;
margin-bottom: 2px;
}

.selector-remove {
background: url(/images/admin/selector-remove.gif) top center no-repeat;
}

a.selector-chooseall, a.selector-clearall {
display: block;
width: 6em;
text-align: left;
margin-left: auto;
margin-right: auto;
font-weight: bold;
color: #666;
padding: 3px 0 3px 18px;
}

a.selector-chooseall:hover, a.selector-clearall:hover {
color: #036;
}

a.selector-chooseall {
width: 7em;
background: url(/images/admin/selector-addall.gif) left center no-repeat;
}

a.selector-clearall {
background: url(/images/admin/selector-removeall.gif) left center no-repeat;
}

.selector select {
font-family:"Lucida Grande",Verdana,Arial,sans-serif;
font-size:11px;
font-weight:normal;
}
.selector h2 {
margin-bottom:0; /*override dojo style*/
}

<!-- Here ADMIN_MEDIA_PREFIX is path to django admin media -->
<script type="text/javascript" src="{{ADMIN_MEDIA_PREFIX}}js/core.js"></script>
<script type="text/javascript" src="{{ADMIN_MEDIA_PREFIX}}js/getElementsBySelector.js"></script>
<script type="text/javascript" src="{{ADMIN_MEDIA_PREFIX}}js/actions.js"></script>
<script type="text/javascript" src="{{ADMIN_MEDIA_PREFIX}}js/SelectBox.js"></script>
<script type="text/javascript" src="{{ADMIN_MEDIA_PREFIX}}js/SelectFilter2.js"></script>
<script type="text/javascript" src="/{{MEDIA_URL}}/js/jsi18n.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" >
<body>
    <form action="." method="POST">
        {{form_as.table}}
        <button type="SUBMIT">Submit</button>
    </form>
</body>