Develop Reference

changing data of select2 with x-editable without re-setting source option - javascript

How to keep the source of option values updated in x-editable
without re-initialising the editable element with source.
Here is the sandbox : http://jsfiddle.net/wQysh/322/
HTML
<p>X-editable (dev)</p>
<div>
<button id="controller">Add</button>
</div>
<div>
<button id="controller1">Remove</button>
</div>
<div>
<button id="controller2">Update</button>
</div>
<div style="margin: 50px">
</div>
<div style="margin: 50px">
</div>
<div style="margin: 50px">
</div>
<div style="margin: 50px">
</div>
JS :
$.fn.editable.defaults.mode = 'inline';
var count = 4, sources = [];
for(var i = 1; i <= count; i++){
sources.push({ id : i, text : String(i) })
}
var getSource = function() {
//i want this function must be called whenever available options is rendred. to ensure i used JSON.parse
return JSON.parse(JSON.stringify(sources));
};
$('#controller2').click(function(e){
count++;
sources[2].text = String(count);
//to verify live changes, if a new record updated in sources and used instantly
$('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});
$('#controller').click(function(e){
count++;
sources.push( {id : count, text :String(count) });
//to verify live changes, what if a new record added in sources and used instantly
$('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});
$('#controller1').click(function(e){
count++;
var a = sources.pop();
//to verify live changes by selecting value that is not present in the list. It should escape those, print the rest all if available in list
$('#username').editable('setValue', [1, a.id]); $('#username2').editable('setValue', a.id);
});
$('#username').editable({ //to keep track of selected values in multi select
type: 'select2',
url: '/post',
autotext : 'always',
value : [1,2],
source : getSource,
emptytext: 'None',
select2: {
multiple : true
}
});
$('#username2').editable({ //to keep track of selected values in single select
type: 'select2',
url: '/post',
autotext : 'always',
value : 2,
source : getSource,
emptytext: 'None',
select2: {
multiple : false
}
});
$('#username3').editable({ //to keep track of available values in multi select
type: 'select2',
url: '/post',
autotext : 'always',
value : null,
source : getSource,
emptytext: 'None',
select2: {
multiple : true
}
});
$('#username4').editable({ //to keep track of available values in single select
type: 'select2',
url: '/post',
autotext : 'always',
value : null,
source : getSource,
emptytext: 'None',
select2: {
multiple : false
}
});
//ajax emulation. Type "err" to see error message
$.mockjax({
url: '/post',
responseTime: 400,
response: function(settings) {
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
Requirement :
Whenever i add new item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
Whenever i update an item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
Whenever i delete an item in sources, if item is not selected then it should be removed from the available options otherwise if selected then view should have "None" value (if single select) and rest element values (if multi select) at element.
Not allowed:
to reinit the widget
to reinit the source option
I hope this is possible. But struggling to get the result.
EDIT2 : code did not worked when i used JSON.parse over stringified 'sources' Problem is still unresolved. New fiddle : http://jsfiddle.net/wQysh/322/
(EDIT1 was misleading this question so removed EDIT1)
EDIT3 : so far i am able to achieve this http://jsfiddle.net/wQysh/324/
Here problem is that previous selected values are not rendered, so can't remove the items if selected previously in multi-select
EDIT4: not completely solved, http://jsfiddle.net/wQysh/339/. After add or update the available option does change but after setting that new record, does not reflect in html element after submit.

the answer is to use a custom display function
here is the updated fiddle. http://jsfiddle.net/wQysh/357/
Every time we 'setValue' to editable or on close event editable's 'display' function is called.
in display function existing values is checked by this function
$.fn.editableutils.itemsByValue
where the third parameter accepts the idKey. If we do not provide third parameter while calling this function, it by default takes 'value' as idKey. and 'value' as idKey should not be used when we are using to load array data. ref : http://ivaynberg.github.io/select2/#data_array.
I added display function in which third parameter is 'id'.
and i got the desired result

Related

I have a client script runs on Suitelet.
On Suitelet we have a sublist which has many select columns.
Let's say we have Select 1 and Select 2.
Select 2 options should be different if you change the option in Select 1.
Could this be done in Client Script? or in that Suitelet?
Any help would be appreciated.
`
var select1= sublist.addField({
id: 'custpage_select1',
label: 'Select1',
type: ui.FieldType.SELECT
});
var select2= sublist.addField({
id: 'custpage_select2',
label: 'Select2',
type: ui.FieldType.SELECT
});
`
In client script when the field is changed, I want to change options of Select 2 depend on Select 1.
function fieldChanged(scriptContext){
if(scriptContext.fieldId=="custpage_select1"){
let page = currentRecord.get();
var select2 = page.getField({fieldID:"custpage_select2"});
select2.removeSelectOption({value:"value1"});
}
}
But this shows me an error that
Cannot read properties of null
Thank you

Yes. You can use the N/currentRecord module in your client script with getField() and removeSelectOption().
let page = currentRecord.get();
const select2 = page.getField({
fieldId: 'custpage_select2'
});
select2.removeSelectOption({
value: 'option1'
});

i have an observable array that get its values from REST
$.getJSON(rootModel.soho()).
then(function (StudentCourseView1) {
$.each(StudentCourseView1.items, function () {
self.data.push({
StudentId: this.StudentId,
CourseId: this.CourseId,
Enrollmentdate :this.Enrollmentdate,
Notes :this.Notes,
Id : this.Id,
CourseName : this.CourseName,
StudentName: this.StudentName
});
});
});
self.dataSource = new oj.ArrayTableDataSource(
self.data,
{idAttribute: 'Id'}
);
and i have created select-one like this
<oj-select-one id="select1" style="max-width:20em"
options={{data}}
value="{{data.Id}}"
options-keys="[[data.StudentName]]" >
</oj-select-one>
the select one show undefined for all it options

Are you sure the ajax call is working, and there are no errors in console? Is the drop-down showing a list of blank values?
If yes, then the only missing element is adding option-keys attribute, to explain what data to show the user, and the key for each piece of data.
<oj-select-one id="select1" style="max-width:20em"
options={{data}}
options-keys="{{optionKeys}}"
value="{{StudentId}}">
JS
//You can change this acc. to your convenience.
self.optionKeys = {value:"Id", label:"StudentName"};

I'm using the dojo filteringSlect as followed:
new dijit.form.FilteringSelect({
name : "category",
title : "Category:",
placeHolder : "Select a category",
store : new Memory({data : [],idProperty : "name"}),
maxHeight : "250",
intermediateChanges : true,
searchAttr : "name",
onChange : lang.hitch(this, this._submitCategory)
});
I'm creating the memory store adding the values with ID's such as
id=1, value=abc and so on.
Assigning this memory store to store attribute of filteringSelect. I have added this widget to a form and calling form.watch to get the OnChange values.
this._formContentForASAP = new Form({
id : 'asap24x',
name : "ASAP 24x",
style : "height:30px;width:250px;"
});
this._formContentForASAP.resize();
this._formContentForASAP.placeAt(this._asapcontentpane);
this._formContentForASAP.watch('value', lang.hitch(this, this._handleASAPFormChanges));
With this I'm able to get only the ID after onChange.
_handleASAPFormChanges : function(prop, oldval, newval) {
// OnChange im able to get only the Id's
}
How do I get the values instead?

If you want the text inside the input field use this :-
dijit.registry.byId(ElementID).textbox.value;
If you want the value corresponding to selected option use this :-
dijit.registry.byId(ElementID).value;
where ElementID is the id provided to FilteringSelect element.

In Angular UI-Grid table, I have one date column (referenceDate) which I want to enable/disable edit based of a flag called 'allowed' which is part of the row value.
How to pass this row value in 'enableCellEdit' attribute ?
Here is my code fragment.
I tried with 'row.entity.allowed' but it did not worked. And got error
Error: row is not defined
$scope.gridOptions.columnDefs = [
{
field : "referenceDate", width : "15%", enableCellEdit: row.entity.allowed, type: 'date', cellFilter: 'date:"yyyy-MM-dd"',
},
{
field : "manuallyUpdated", width : "10%", cellEditableCondition: false, cellTemplate: '<input type="checkbox" ng-model="row.entity.manuallyUpdated" disabled="true" style="zoom:1.5" >'
}
];
JSON data
{
"referenceDate": "2015-09-30",
"allowed": true,
"manuallyUpdated": true
}

Basically, you are not able to access the external scope when setting a value for enableCellEdit.
You should make use of cellEditableCondition and pass it a function like this -
function($scope){
return $scope.row.entity.allowed;
}
From the docs :
If specified, either a value or function evaluated before editing
cell. If falsy, then editing of cell is not allowed.

I am totally new to jqGrid. I am populating the grid from an array with datatype:local.
var data=[
{date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/02/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
{date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/01/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/02/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
{date : "01/02/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/03/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"}
];
$("#gridTable").jqGrid({
data : data,
editurl:"clientArray",
datatype: "local",
height : 250,
colNames: [' ','Date','Start Time','End Time','Work Function'],
colModel : [
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}},
{name: 'date',index:'date',width: 100,sorttype:'date',editable:true,editoptions : {
dataInit : function(element){
formatDatepicker(element,data);
}
}},
{name: 'starttime',index:'starttime',width: 100,sorttype:'date',editable:true},
{name: 'endtime',index:'endtime',width: 100,sorttype:'date',editable:true},
{name: 'workfunction',index:'workfunction',width: 100,sorttype:'date',editable:true,edittype:"select",editoptions:{value:"MA:MA;CA:CA;FC:FC"}},
],
pager: "#gridPager",
caption : "Weekly Details",
grouping : true,
groupingView : {
groupField:['date']
}
}).navGrid("#gridPager",{edit:true,add:true,del:false},
//edit properties
{
zIndex : 950,
}
);
Given above is the grid I am using. I am grouping the grid according to dates, and I am using jsp as the server side technology. My questions are:
Can we add a row to a group without submitting it to the server.
When a new row is created with a new date, will a new group form.
Can we edit multiple rows and submit all at once.

let me be sure if i understood you right...1. you want to add a row to grid but dont want to submit the data to server? it is possible...2. you have to be more clear on this requirement. 3. yes it is possible to take all the edit data of multiple rows and send the data to server.
I'll start with 3.
you can use multiselect: true here, its like the easiest option. Select the rows which you want to edit and Implement onSelectRow with a function which will make your rows editable on selecting them.
and then you can have a button which will take your edited rows data to server.
how to make rows editable on selecting them
onSelectRow: function(id){
jQuery('#grid').editRow(id, true); }
or there's another alternative keep your all rows in editable mode
gridComplete:OnGridComplete, //add this to your Jqgrid parameters
javascript function
function OnGridComplete(){
var $this = $(this), rows = this.rows, l = rows.length, i, row;
for (i = 0; i < l; i++) {
row = rows[i];
if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
$this.jqGrid('editRow', row.id, true);
}
}
}
and how to take edited data to server just on one click, see my answer
https://stackoverflow.com/a/11662959/1374763
and now with you first question
you should change the editUrl to clientarray,
jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');
check this link and go to saveRow parametrs, for more info
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing