Page 1 of 1

How Can Show checkgroup's Option Selected in Grid

Posted: Thu Jan 14, 2021 10:00 am
by mohasami
Hello,

I have checkgroup, i want when select checkboxes in checkgroup, after click button, this Items in grid.
every selected items(key and label=value and name), show in one row grid.

everybody can help me?
//*************************
my code is:

$("#addToList").click( function() {
var arrCheck = document.getElementsByName('form[checkgroupVar001][]');
var report = "";
var count=0;
for (var i = 0; i < arrCheck.length; i++)
{


if (arrCheck.checked)

report += arrCheck.value;
var aLabels = JSON.parse($("#checkgroupVar001").getText());


if (arrCheck.checked === true){
count++;


}

}

var client = $("#clientName").getValue();
var service = $("#typeOfService").getValue();
var hasContract = $("#hasContract").getValue();
var startDate = $("#contractStartDate").getValue();
if (client == '') {
alert("Please add a client name");
return;
}
else if (hasContract == "1" && startDate == '') {
alert("Please set the Contract Start Date");
return;
}

for (var j = 1; j <= count; j++){

var aData = [
{value: client},
{value: service},
{value: hasContract},
{value: startDate},
{value: report},
{value: aLabels}

];


$("#clientsList").addRow(aData);

}

//clear form:
$("#clientName").setValue('');
$("#typeOfService").setValue('');
$("#hasContract").setValue('0');

//workaround for clearing date fields:
$("[id='form[contractStartDate]']").val('');
$("[id='form[contractStartDate_label]']").val('');
getFieldById("contractStartDate").model.attributes.data.label='';
getFieldById("contractStartDate").model.attributes.data.value='';
});

function deleteList() {
var oGrid = $("#clientsList"); //set to the ID of the grid
var iRow = oGrid.getNumberRows();
for (; iRow > 0; iRow--) {
oGrid.deleteRow(iRow);
}
}

$("#clearList").click(deleteList); //clear grid when clicking "clearList" button
deleteList(); //clear grid when the Dynaform loads

Re: How Can Show checkgroup's Option Selected in Grid

Posted: Tue Apr 25, 2023 5:43 pm
by ayodelebamgboye
you can modify your existing code to create an array of objects for each selected item and add those objects to an array. Then, you can use that array to add a row to the grid.

$("#addToList").click(function () {
// Get the selected items from the check group
var selectedItems = [];
var arrCheck = document.getElementsByName('form[checkgroupVar001][]');
var aLabels = JSON.parse($("#checkgroupVar001").getText());

for (var i = 0; i < arrCheck.length; i++) {
if (arrCheck.checked) {
var item = {
key: arrCheck.value,
label: aLabels[arrCheck.value],
name: arrCheck.name
};
selectedItems.push(item);
}
}

// Get the values of other fields
var client = $("#clientName").getValue();
var service = $("#typeOfService").getValue();
var hasContract = $("#hasContract").getValue();
var startDate = $("#contractStartDate").getValue();

if (client == '') {
alert("Please add a client name");
return;
} else if (hasContract == "1" && startDate == '') {
alert("Please set the Contract Start Date");
return;
}

// Add a row for each selected item
for (var j = 0; j < selectedItems.length; j++) {
var aData = [
{ value: client },
{ value: service },
{ value: hasContract },
{ value: startDate },
{ value: selectedItems[j].key },
{ value: selectedItems[j].label },
{ value: selectedItems[j].name }
];

$("#clientsList").addRow(aData);
}

// Clear the form
$("#clientName").setValue('');
$("#typeOfService").setValue('');
$("#hasContract").setValue('0');

// Workaround for clearing date fields
$("[id='form[contractStartDate]']").val('');
$("[id='form[contractStartDate_label]']").val('');
getFieldById("contractStartDate").model.attributes.data.label = '';
getFieldById("contractStartDate").model.attributes.data.value = '';
});

function deleteList() {
var oGrid = $("#clientsList");
var iRow = oGrid.getNumberRows();
for (; iRow > 0; iRow--) {
oGrid.deleteRow(iRow);
}
}

$("#clearList").click(deleteList);
deleteList();