- Home
- Forum
- ASP.NET MVC - EJ 2
- How create combobox programmatically with javascript
How create combobox programmatically with javascript
Hi team,
I have a table and I would like to add a new row after to do click a button, in one of the cells I want to add a combobox through javascript, how can to do that?
Thanks,
SIGN IN To post a reply.
5 Replies
1 reply marked as answer
SP
Sureshkumar P
Syncfusion Team
September 22, 2020 12:14 PM UTC
Hi Dan,
Greetings from Syncfusion support.
We can able to achieve your requirement by using below code example.
Please find the code example.
|
<div id="wrapper">
<button id="btn">Click to append table</button>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (args) {
document.getElementById('btn').addEventListener('click', function () {
var table = document.createElement('table');
for (var i = 1; i < 2; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createElement('input');
text1.setAttribute('id', 'games');
var text2 = document.createTextNode('Text2');
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.getElementById('wrapper').appendChild(table);
var sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
var comboBoxObj = new ej.dropdowns.ComboBox({
// set the height of the popup element
popupHeight: '230px',
dataSource: sportsData,
// set the placeholder to ComboBox input element
placeholder: 'Select a game',
});
comboBoxObj.appendTo('#games');
});
})
</script> |
We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc__sample1066132103
Regards,
Sureshkumar P
DA
Dan
September 28, 2020 12:24 AM UTC
Thanks for the support,
I already added the combobox but I trying to add filtering functionality but it doesn't work, I am trying to do this way:
var comboBoxObj = new ej.dropdowns.ComboBox({
// set the height of the popup element
popupHeight: '230px',
allowFiltering: true,
filtering: "onfiltering",
dataSource: @Html.Raw(Json.Encode(@ViewBag.Services)),
floatLabelType: "Never",
fields: ({ value: "SERVICEID", text: "DESCRIPTION" }),
// set the placeholder to ComboBox input element
placeholder: 'Services'
});
// set the height of the popup element
popupHeight: '230px',
allowFiltering: true,
filtering: "onfiltering",
dataSource: @Html.Raw(Json.Encode(@ViewBag.Services)),
floatLabelType: "Never",
fields: ({ value: "SERVICEID", text: "DESCRIPTION" }),
// set the placeholder to ComboBox input element
placeholder: 'Services'
});
function onfiltering(e) {
var query = new ej.data.Query();
query = (e.text !== '') ? query.where('DESCRIPTION', 'startswith', e.text, true) : query;
e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.Services)), query);
}
var query = new ej.data.Query();
query = (e.text !== '') ? query.where('DESCRIPTION', 'startswith', e.text, true) : query;
e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.Services)), query);
}
Thanks,
SP
Sureshkumar P
Syncfusion Team
September 28, 2020 10:17 AM UTC
Hi Dan,
Thanks for your update.
Based on your shared information, we suspect that your service data is not loaded when pass the update data parameter. We have modified the attached sample based on your scenario. Please refer the below code to resolve the issue.
Sample code example.
|
<div id="wrapper">
<button id="btn">Click to append table</button>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (args) {
document.getElementById('btn').addEventListener('click', function () {
var table = document.createElement('table');
for (var i = 1; i < 2; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createElement('input');
text1.setAttribute('id', 'games');
var text2 = document.createTextNode('Text2');
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.getElementById('wrapper').appendChild(table);
var sportsData = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' }
];
var comboBoxObj = new ej.dropdowns.ComboBox({
// set the height of the popup element
popupHeight: '230px',
dataSource: sportsData,
allowFiltering: true,
fields: { value: 'Game' },
filtering: function (e) {
var dropdown_query = new ej.data.Query();
// frame the query based on search string with filter type.
dropdown_query = (e.text !== '') ? dropdown_query.where('Game', 'startswith', e.text, true) : dropdown_query;
// pass the filter data source, filter query to updateData method.
e.updateData(sportsData, dropdown_query);
},
// set the placeholder to ComboBox input element
placeholder: 'Select a game',
});
comboBoxObj.appendTo('#games');
});
})
function onfiltering(e) {
debugger;
}
</script>
<style>
#wrapper {
width: 20%;
}
.disableSelection {
pointer-events: none;
}
</style>
|
Regards,
Sureshkumar P
Hi Dan,Thanks for your update.Based on your shared information, we suspect that your service data is not loaded when pass the update data parameter. We have modified the attached sample based on your scenario. Please refer the below code to resolve the issue.Sample code example.
</script><style>#wrapper {width: 20%;}.disableSelection {pointer-events: none;}</style>Regards,Sureshkumar P
We can set the value of a select box using Javascript using the following. Suppose we have the following select box −
<select id="my-select" value="1"> <option value="1">Select</option> <option value="2">Apple</option> <option value="3">Strawberry</option> <option value="4">Cherry</option> <option value="5">Guava</option> </select>
To set the value of this select element, we need to access it using querySelector. Then set the value. For example −
Example
// Search the select box const mySelectBox = document.querySelector('#my-select'); // Set the value to 3 or Strawberry mySelectBox.value = 3;
SP
Sureshkumar P
Syncfusion Team
November 23, 2020 06:55 AM UTC
Hi Poolcoinshop,
Thanks for your update.
this is the common solution that can achieve the requirement. the same behavior is also achievable in our combobox component.
please find the code example here:
|
[sample]
<select id="games">
<option value="Game1">American Football</option>
<option value="Game2">Badminton</option>
<option value="Game3">Basketball</option>
<option value="Game4">Cricket</option>
<option value="Game5">Football</option>
<option value="Game6">Golf</option>
<option value="Game7">Hockey</option>
<option value="Game8">Rugby</option>
<option value="Game9">Snooker</option>
<option value="Game10">Tennis</option>
</select>
[script section]
<script>
let comboBoxObj: ComboBox = new new ej.dropdowns.ComboBox({
// set the height of the popup element
popupHeight: "230px",
// set the placeholder to ComboBox input element
placeholder: "Select a game"
});
comboBoxObj.appendTo("#games");
document.getElementById("btn").addEventListener("click", function () {
var comboObject = document.getElementById("games").ej2_instances[0];
comboBoxObj.value = "Game2";
});
</script>
|
We have created the sample based on the above solution. Please find the sample here: https://stackblitz.com/edit/ftlg6b-vldsnf?file=index.ts
Regards,
Sureshkumar P
Marked as answer
SIGN IN To post a reply.
