Hi there,
I want to use a List or Library control to implement a table that looks exactly like the following image:
How do I implement the Dimensions, Weight, and Value column headers that include a small dropdown. and for Dimensions Header, the W, L, and H label in List or Library control?
Thanks,
I would like to display the dropdown, thats all. No saving.
Hello @jyou,
You can add a dropdown or any other element like this:
var secondColumn = $(fd.control('SPDataTable1').$el).find('th')[1];
//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
//Create array of options to be added
var array = ["inch","cm"];
secondColumn.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}Hi @mnikitina ,
Thank you for your answer, however, I have encountered one problem with that.
I want to insert two different lists into two different headers. Please refer to my code below:
But I see that only one list shows up in the length column, but not in the weight column. How do I make the list show up in the weight column as well?
Thanks,
document.createElement() method creates the HTML element, you need to specify the valid element name. Update the following part of the code.
for (var i = 0; i < array1.length; i++) {
var option1 = document.createElement("option");
option1.value = array1[i];
option1.text = array1[i];
selectList1.appendChild(option1);
}Hi @mnikitina ,
Thanks for answering my questions. I used your approach and tried to implement multiple lists in the headers.
I have another question, please refer to my code below, as I tried to implement lists into different List or Library controls. But the lists are not being successfully implemented, do you know why?
thank you
Hello @jyou,
Most likely there is an error in the code. Please check the browser console (F12).
Please share the code snippets as a text, not a screenshot.
Hi @mnikitina ,
Please refer to the code below:
`// adding lists to headers Lenght, Weight, and Value
fd.spRendered(function () {
// list or library 1
var weightCol1 = $(fd.control('SPDataTable1').$el).find('th')[8];
var lengthCol1 = $(fd.control('SPDataTable1').$el).find('th')[5];
var valueCol1 = $(fd.control('SPDataTable1').$el).find('th')[10];
var weightCol2 = $(fd.control('SPDataTable2').$el).find('th')[8];
var lengthCol2 = $(fd.control('SPDataTable2').$el).find('th')[5];
var valueCol2 = $(fd.control('SPDataTable2').$el).find('th')[10];
//Create and append select list
var selectWeight1 = document.createElement("select");
var selectLength1 = document.createElement("select");
var selectValue1 = document.createElement("select");
selectWeight1.id = "mySelectWeight1";
selectLength1.id = "mySelectLength1";
selectValue1.id = "mySelectValue1";
var selectWeight2 = document.createElement("select");
var selectLength2 = document.createElement("select");
var selectValue2 = document.createElement("select");
selectWeight2.id = "mySelectWeight2";
selectLength2.id = "mySelectLength2";
selectValue2.id = "mySelectValue2";
//Create array of options to be added
var arrayLength1 = ["Inch", "Feet", "Meter", "cm"];
var arrayWeight1 = ["LBS", "Kg"];
var arrayValue1 = ["CDN", "EURO", "INR", "US"];
weightCol1.appendChild(selectWeight1);
//weightCol2.appendChild(selectWeight2);
lengthCol1.appendChild(selectLength1);
valueCol1.appendChild(selectValue1);
//Create and append the options
for (var i = 0; i < arrayLength1.length; i++) {
var optionLength1 = document.createElement("option");
optionLength1.value = arrayLength1[i];
optionLength1.text = arrayLength1[i];
selectLength1.appendChild(optionLength1);
selectLength2.appendChild(optionLength1);
}
for (var i = 0; i < arrayWeight1.length; i++) {
var optionWeight1 = document.createElement("option");
optionWeight1.value = arrayWeight1[i];
optionWeight1.text = arrayWeight1[i];
selectWeight1.appendChild(optionWeight1);
}
for (var i = 0; i < arrayValue1.length; i++) {
var optionValue1 = document.createElement("option");
optionValue1.value = arrayValue1[i];
optionValue1.text = arrayValue1[i];
selectValue1.appendChild(optionValue1);
selectValue2.appendChild(optionValue1);
}
});`
and please refer to the error message below:
Thanks,
Hello @jyou,
You are adding options to the element that doesn't exist. I've updated the code, please try it out:
fd.spRendered(function () {
//columns SPDataTable1
var weightCol1 = $(fd.control('SPDataTable1').$el).find('th')[8];
var lengthCol1 = $(fd.control('SPDataTable1').$el).find('th')[5];
var valueCol1 = $(fd.control('SPDataTable1').$el).find('th')[10];
//Create and append select list
var selectWeight1 = document.createElement("select");
var selectLength1 = document.createElement("select");
var selectValue1 = document.createElement("select");
//add element IDs
selectWeight1.id = "mySelectWeight1";
selectLength1.id = "mySelectLength1";
selectValue1.id = "mySelectValue1";
//Create array of options to be added
var arrayLength1 = ["Inch", "Feet", "Meter", "cm"];
var arrayWeight1 = ["LBS", "Kg"];
var arrayValue1 = ["CDN", "EURO", "INR", "US"];
//add elements to column headers
weightCol1.appendChild(selectWeight1);
lengthCol1.appendChild(selectLength1);
valueCol1.appendChild(selectValue1);
//Create and append the options
for (var i = 0; i < arrayLength1.length; i++) {
var optionLength1 = document.createElement("option");
optionLength1.value = arrayLength1[i];
optionLength1.text = arrayLength1[i];
selectLength1.appendChild(optionLength1);
}
for (var i = 0; i < arrayWeight1.length; i++) {
var optionWeight1 = document.createElement("option");
optionWeight1.value = arrayWeight1[i];
optionWeight1.text = arrayWeight1[i];
selectWeight1.appendChild(optionWeight1);
}
for (var i = 0; i < arrayValue1.length; i++) {
var optionValue1 = document.createElement("option");
optionValue1.value = arrayValue1[i];
optionValue1.text = arrayValue1[i];
selectValue1.appendChild(optionValue1);
}
});Hi @mnikitina ,
Just to have one quick question on your code above. I realized that changing the dropdown value is not saved when I change the dropdown value located on the headers of the List or Library control and save the change.
for example, refer below to my dropdown value before change:
refer below to my dropdown value after change is saved:
refer below to my dropdown value after I re-open the form i just made the change to
Please advice.
Thanks.
Hello @jyou,
If you want to save selected options for the current user only, you can save them to the local storage.
Or you can pass the selected options to the form fields and save it to the list item, thus these options will be available for all users.
