Hello!
I have added some code I found on this forum which sets the column widths to how I want it.
When I want to edit an entity in a record, through Dialog window, the column width expands and doesn't sustain the column width set with the code that I have added.
Here is what it looks like before:
Here is what it looks like after I remove/add an entry to any columns in dialog window:
This is the code that I found which fixes the column width issue in this Control:
//This will correct the column widths in the list/Library control
var dataTable = fd.control('SPDataTable1');
dataTable.ready().then(function() {
var columns = dataTable.widget.columns;
for (let i = 2; i < columns.length; i++) {
var field = columns[i].field;
var width = 170;
dataTable._columnWidthViewStorage.set(field, width);
dataTable._columnWidthEditStorage.set(field, width);
}
dataTable._columnWidthViewStorage.set('*', true);
dataTable._columnWidthEditStorage.set('*', true);
});
fd.control('SPDataTable1').dialogOptions.width //returns width
Thanks for your help as always!
Dear @DryChips,
Try to separate your code into function, and run it after an item is added or deleted:
fd.control('SPDataTable1').$on('add', function(changeData) {
updateColumns();
});
fd.control('SPDataTable1').$on('delete', function(changeData) {
updateColumns();
});
Sorry, my JavaScript skills are poor. Can you help?
I am editing the field using a Dialog option. The field is a Multiselect Lookup Column.
Dear @DryChips,
You can move part of your code inside of a function, then call it multiple times, like this:
var dataTable = fd.control('SPDataTable1');
function updateColumns(){
var columns = dataTable.widget.columns;
for (let i = 2; i < columns.length; i++) {
var field = columns[i].field;
var width = 170;
dataTable._columnWidthViewStorage.set(field, width);
dataTable._columnWidthEditStorage.set(field, width);
}
dataTable._columnWidthViewStorage.set('*', true);
dataTable._columnWidthEditStorage.set('*', true);
}
dataTable.ready().then(function() {
updateColumns();
});
dataTable.$on('add', function() {
updateColumns();
});
dataTable.$on('delete', function() {
updateColumns();
});
See if it helps!
Dear @DryChips,
Also, try removing the code entirely - see what difference it makes.
Hmmm, it hasn't worked. I added the snippet below to the the "Edit" version of form but no luck. Works fine if "inline" mode is enabled in list/library Control.
dataTable.$on('add', function() {
updateColumns();
});
dataTable.$on('delete', function() {
updateColumns();
});
Dear @DryChips,
Try removing all of the code and see what the result looks like.
This first screenshot seems to be unaffected by your code:
The image above describes the state of the control when the form has loaded. When I remove remove an entry or add an entry, the column widths expands after I hit the save button on my edit form.
Check out this screen recording:
Dear @DryChips,
What happens if you remove JavaScript code from the form? Try recording a similar video without JavaScript code.
I removed all the code and this is what it looks like:
Dear @DryChips,
That looks strange, completely different from my tests. It works just fine for me in SP2019:
Please, open Dev Tools > Sources and send us a screenshot of the file versions that you see:
Both webpart and assets/js
Your List/Library Control is hosted on the Edit Form set, whereas mine is strictly on the "New" form set. Is there no way to run the function in the "Edit" form set and tell it to keep the same formatting in the "New" form set?
Dear @DryChips,
It doesn't matter what type of form you use, I can record the same on New form:
Please, provide the following in a screenshot to see what's different:
Both webpart and assets/js
Hi Nikita,
It looks like you used numbers in your example, whereas I have really long text strings. If I remove the long text strings the control is responsive in the sense that it will shrink the the column width which is good.
Take a look:
Dear @DryChips,
No, the issue is not the width of text in column, it should be fine:
You seem to be using an older version of the app, the files for your version are different, and it likely works differently after the latest update. Please, follow this instruction to install the latest version on the server - Update Plumsail Forms On-Premises solution — SharePoint forms
