Drag and drop ordering of formset with extra entries - javascript

I have been looking for a way to allow the user to easily change the order of entries in a formset. I found a StackOverflow question that addresses this subject, with the accepted answer referencing a Django Snippet that uses a JQuery tool to allow drag 'n drop of the entries. This is nifty and cool, but I have a problem with 'extra' entries. If an 'extra' entry is modified and then dragged I get an error on the submit:
(1048, "Column 'order' cannot be null")
I believe Django keeps the 'extra' entries separate, since they have to be inserted instead of updates. So the reordering probably confuses matters. Is there a way to make this work, or are there other suggestions for reordering and/or adding new entries?
Edit: Added some relevant code excerpts. I'm trying this out in the admin, as the snippet shows. I'd like to put it in my own page ultimately, however.
models.py:
class Section(models.Model):
section_id = models.AutoField(primary_key=True)
section_name = models.CharField(max_length=135)
score_order = models.IntegerField()
def __unicode__(self):
return self.section_name
class Meta:
db_table = u'section'
ordering = [u"score_order"]
class Chair(models.Model):
chair_id = models.AutoField(primary_key=True)
member = models.ForeignKey(Member, null=True, blank=True,
limit_choices_to={'current_member': True})
section = models.ForeignKey(Section)
description = models.CharField(max_length=135)
order = models.IntegerField(blank=True, null=True)
def __unicode__(self):
return "%s - %s" % (self.description, self.member)
class Meta:
db_table = u'chair'
ordering = (u'section', u'order')
admin.py
class SectionForm(forms.ModelForm):
model = Section
class Media:
js = (
'/scripts/jquery.js',
'/scripts/ui.core.js',
'/scripts/ui.sortable.js',
'/scripts/section-sort.js',
)
class ChairInline(admin.StackedInline):
model = Chair
admin.site.register(Section,
inlines = [ChairInline],
form = SectionForm,
)

I found my own solution. The snippet was setting the order for every row that had a non-empty primary key value. But the extra rows have an empty primary key, and I believe they have to stay empty for Django to know that they are to be inserted instead of updated. I modified the function to check for the other fields being empty (fortunately, I only have a couple) as well as the primary key:
jQuery(function($) {
$('div.inline-group').sortable({
items: 'div.inline-related',
handle: 'h3:first',
update: function() {
$(this).find('div.inline-related').each(function(i) {
if ($(this).find('input[id$=chair_id]').val() ||
$(this).find('select[id$=member]').val() ||
$(this).find('select[id$=description]').val()) {
$(this).find('input[id$=order]').val(i+1);
}
});
}
});
$('div.inline-related h3').css('cursor', 'move');
$('div.inline-related').find('input[id$=order]').parent('div').hide();
});
This did the trick for me. I could maybe improve it by adding a hidden field to the form that gets set whenever any field on a row gets modified. But at this point I'm still a jQuery n00b, so this will do. If anybody has better ideas, feel free to comment or add another answer.

I do sortable formsets in one of my apps. I use this jQuery drag and drop plugin:
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
I bind the plugin's onDrop event to a function that resets the value of all "order" fields.
Additionally, I pass initial data to the formset so the formset's extra "order" fields always have a value in cases where there is no javascript available - the user won't be able to re-order rows, but they can edit and post changes without the null error you described.

Related

How to make selection on drop down list (DynamicForm) using JavaScript in SmartClient?

Here is a drop down list in SmartClient: http://www.smartclient.com/#dropdownGrid.
I want to make a selection using JavaScript. Like, I run some JavaScript in console, and the drop list will select a specific item.
I did some research, found a code snap to do this (the code is in Java, but I think there should be similar functions in JavaScript):
Record rec = perdomainGrid.getRecordList().find("domaine_id", domaine_id);
perdomainGrid.selectSingleRecord(rec);
If I want to make selection, first I need to obtain perdomainGrid object. In my above giving link, the drop down list id in GWT is exampleForm (can be seen in dropDownGrid.js tab). I try to get the object by:
var form = isc.DynamicForm.getById("exampleForm");
form does exist, but there is no getRecordList() function on it, there is selectSingleRecord() function on it though.
I try to check form's class by form.className, its value is normal. I don't know what does that mean.
I'm kind of confused now. Could somebody help me on this?
isc_SelectItem_5 has a function called pickValue(), it takes one parameter SKU. This function can be used to select item.
var itemName = "Letter Tray Front Load Tenex 200 Class Blk #23001";
var data = isc_SelectItem_5.optionDataSource.cacheData;
var targetSKU = data.find(function(e) {
if (e.itemName == itemName) {
return e;
}
}).SKU;
isc_SelectItem_5.pickValue(targetSKU);

How can I move a person from a DropDownList (the ddl is on table 1 ) to another table (table 2) using AngularJS?

This is my first post so please be kind with me. :D
What i want is to select a person from a DropDownList (which is on table 1) and when i press a button, I want to move the selected person to another table (on table 2).
I will post some screens from my PC because i cant add code (i receive some error where say is too much code or something like that...)
Here is the link with Photos. I dont have 10 reputation so i cant post different URL with description...:D
http://postimg.org/gallery/13lmzz4kq/
I write description in every photo :D
Ty in advance !
In your plunker you have a method moveAudit. This method receives an item:
$scope.moveAudit = function (item) //Function for moving the unassigned audits
{
//var assignedAudit = $scope.assignedAudit; //--> you dont need this here
//var audit = $scope.unassignedAudit; //--> unused variable
//var auditId = $scope.unassignedAudit.IdUnassignedAudit; //--> unused variable
//TODO: here you need to add the selected 'expert' to item
// inspect/debug how your form POST passes this information to the controller
// ideally put it in a scoped var or pass it in the method: $scope.moveAudit = function (item, selectedExpert)
item.AssignedExpert = $scope.selectedExpert
//add to AssignedAudit
$scope.assignedAudit.push(item);
console.log("Row added: ", $scope.assignedAudit);
//TODO: probably you want to remove the item from $scope.assignmentExperts
};
I cannot debug the plunker since it is incomplete, but this should do the trick.
Upon further inspection of your code it looks like $scope.ddSelection is the selected expert.

Refresh to repeat control not working normal after deleting 1 row

I have a field named "selectedTime" in a document, this fields stores the selected timings added by user.Adding times is working perfect.This is back-end.
Now I will explain this issue of selecting date from front end.I have given a button add to add times.The custom control of date-time gets added to repeat control on click of Add button.Even if I check in document it shows the list of selected times.Even this works fine.
Now if I want to delete a selected time from repeat control randomly, it deleted that particular record from document, but on the page the last record of the repeat gets disappears,
I was assuming that this is the issue with partial refresh of repeat control,I have even tried that but no result.Full refresh breaks the page.
java script code for the delete button
`var doc:NotesDocument = database.getDocumentByUNID(context.getUrlParameter("refId"))
var selectedTimes:java.util.Vector = doc.getItemValue("selectedTimes");
if(selectedTimes != null){
var sdtString = getComponent("inputHidden1").getValue();
if(selectedTimes.contains(sdtString))
selectedTimes.remove(sdtString);
doc.replaceItemValue("selectedTimes",selectedTimes);
doc.save();
};
var url:XSPUrl = context.getUrl();
view.postScript("window.refresh('"+url+"')");`
I know it is difficult to understand what i want to explain but any suggestion on this will be appreciated.
Even if anybody have any idea to delete the a field values of a documents,In my case field name is "selectedTimes" and the values are added times in repeat control, Please share.
Edit 1:
//Repeat Control
var doc:NotesDocument = database.getDocumentByUNID(context.getUrlParameter("refId"))
var selectedTimes:java.util.Vector = doc.getItemValue("selectedTimes");
return selectedTimes;
Another try could be link the repeat with a viewScope instead of the document:
1) In the event beforeLoadPage/afterLoadPage: Get the value from the document, and put it in a viewScope variable:
// beforeLoadPage event:
// ... get the doc
viewScope.selectedTimes = doc.getItemValue("selectedTimes");
2) In the repeat control, use the viewScope:
<xp:repeat value="#{viewScope.selectedTimes}"...
3) When an update is done, update both the viewScope and the document:
//...update the View Scope variable and get the document:
doc.replaceItemValue("selectedTimes", viewScope.selectedTimes);
This could be a hint if the document would be added as DataSource:
Do you have the document included in the XPage as a DataSource? In that case, try to get and update the NotesXspDocument instead of the Document from the DB:
XPage:
<xp:this.data>
<xp:dominoDocument var="xspDocument"
action="editDocument"
documentId="#{param.unid}">
</xp:dominoDocument>
</xp:this.data>
SSJS code: work directly with the XspDocument
var selectedTimes:java.util.Vector = xspDocument.getItemValue("selectedTimes");
...
xspDocument.replaceItemValue("selectedTimes", selectedTimes);
This could be a hint if the value would not be removed from the document:
In sdtString you are getting a String value:
var sdtString = getComponent("inputHidden1").getValue();
If you have the time values stored as NotesDateTimes, you will get this type of value inside the Vector and the remove method won't find the String and nothing will be removed.
// In a Vector<NotesDateTime> the String cannot be found:
selectedTimes.remove(sdtString);
Be sure you remove the same type of value you get in the Vector

Task "Regarding" field not populating from subgrid in CRM 2013

I am using CRM 2013 on-premise with UR1 installed
I have a custom entity with a subgrid on it looking at related "tasks" which looks like this:
Whenever I create a task from the subgrid using the "+" button in the top right hand corner of the subgrid; the "Regarding" field of the newly created task remains blank. When it should be populated by a lookup to the record it was created from.
I have javascript on the task entity which checks the "Regarding" field to check what kind of entity it was created from (if it was created from one) and gets certain field values from the calling entity to populate fields on the task.
Since the "Regarding" field is never filled the Javascript never fires - and the fields do not populate.
When the record is saved, if the regarding field is blank (I have not manually filled it in) - it will eventually be populated by the correct record about 10 - 15 seconds later if you refresh the page. Then the correct fields will be populated and the user is able to edit the option set values and save again. This is not ideal for the user as they would like it to be one fluid action.
Is there any way around this problem?
EDIT for future browsers of this question:
Found a partial work around. If you use an "Activity" subgrid rather than a "Task" subgrid the field will populate. This has a drawback though as you cannot edit the "Activity" subgrid's view to show "Task" specific fields.
Ran into this same issue. The way I got around it was to add a look-up to the custom entity on the form (we put this on a hidden tab). When the Task gets created from the custom entity the look-up will be populated. You can then use that look-up to grab the values that you need to populate, including the regarding field. Not the most elegant, but it works.
I also ran into this problem and went with a pure JS approach to resolving. On load of the task form, call populateRegarding().
This works because even though the regarding lookup doesn't populate by default, the query string parameters include _CreateFromType and _CreateFromId values.
This works in 2015, didn't test on earlier versions. Note that it is unsupported.
function populateRegarding() {
var regarding = Xrm.Page.getAttribute("regardingobjectid"),
createFromType = Xrm.Page.context.getQueryStringParameters()._CreateFromType,
createFromId = Xrm.Page.context.getQueryStringParameters()._CreateFromId;
if (!createFromId || !createFromType ||
!regarding || regarding.getValue() !== null) {
return;
}
var entityLogicalName = getEntityLogicalNameFromObjectTypeCode(createFromType);
regarding.setValue([{
id: createFromId,
entityType: entityLogicalName,
name: "Hardcoded Name" // TODO: retrieve name dynamically
}]);
}
// This method uses an undocumented object and is therefore unsupported.
// You could implement a supported version of this function by querying for
// metadata, but that would be very expensive.
function getEntityLogicalNameFromObjectTypeCode(otc) {
var map = Mscrm.EntityPropUtil.EntityTypeName2CodeMap,
logicalName;
otc = Number(otc); // convert string to number
for (logicalName in map) {
if (!map.hasOwnProperty(logicalName)) { continue; }
if (map[logicalName] === otc) {
return logicalName;
}
}
}

how to extend asp.net application in this scenario

I have asp.net web application.where i am creating the User as registration for a particular Firm.In this firm there are 3 type of user as of now. as Admin, Dealer, Manager. so according to this I am changing the UI page.
Means When Admin (Admin is default entry) going create let say Dealer, then there is different UI except General information fields (like name ,contact details and all). and when creating the manager there is different UI fields, except than General information fields.
To reuse the page i am using this way , when selected Manager then related his UI fields get only visible, same for dealer. obviously there is a dropdown control from where i am selecting User type.
But some how , later on if one more User type get added by firm, I need to generate functionality according to New User type. how can i handle if I don not want to change existing code. sense is how can i write the generic code so that I should not need to change in code behind or in javascript again.
Where as all this things are in planning and under implementation for now. but before to go a head I must clear this thing. I am planning to change the UI structure in javascript as usual way , i means
if selected User Type is "Dealer then make visible these div's ELSE If User Type is Manager then make visible these divs
I want to write generic javacript , though new user type get added.
You could maintain the field <-> user type relation in a database and dynamically add labels and textboxes in the PageLoad of your Page.
Then when a new type of user comes along you'd simply need to add to your data.
Your user type should also be in a database.
Of course, the code that lets your users create other users would also have to be flexible enough. So you'd need a CanCreate table that dictates who can create what type of user. :)
EDIT Expanded how to build your Content
Actually, I like your idea about storing the html elements in the database. That'd save you using reflection to dynamically get the propertyvalue. However, I don't think you'll be able to use databinding and all that.
So instead I'd do something like this:
public enum ControlType
{
Label,
TextBox,
...
}
Make a table something like
UserType
PropertyName
PropertyLabelName
FieldLabelType (int)
FieldContentType (int)
Then on pageload you get the UserType, pull the data from the table, find the div where you want to put the data and then add the controls like:
(pseudocode)
Control label = null;
switch (FieldLabelType)
{
case ControlType.Label:
var label = new Label()
{
.. all kinds of properties
Text = PropertyLabelName
};
control = label;
break;
case ???
...
}
if (label != null)
fielddiv.Add(label);
Control field = null;
switch (FieldContentType)
{
case ControlType.TextBox:
var textbox = new TextBox()
{
.. all kinds of properties
Text = new Binding( ... Path = PropertyName)
};
control = textbox;
break;
case ???
}
if (field != null)
fielddiv.Add(field);
Of course, you'd need to do some positioning to get it all looking pretty. Perhaps chuck in a table or something in code?

Categories