I have a dynamic grid which looks something like this
Serial No(checkbox1) Document Name Attachment
1(checkbox2) abc (img)
2(checkbox2) xyz (img)
3(checkbox2) uio (img)
4(checkbox2) pop (img)
Let me explain how this works. When the user clicks on the attachment img, it opens a dialog box which shows all the files attached in it. Each file will also have a checkbox against it. Lets call them checkbox3. If user selects the checkbox2 against serial number 1 then the checkboxes in the dialog box(dialog box of serail number 1 only) will also get checked. In the same way if user selects checkbox2 of serail number 2 then the checkboxes of the relevant dialog box will also get checked.
Now if the user checks checkbox1 which is against the serailNo heading, then all checboxes from serial number 1 to 4 will get checked and so all the dialog boxes will also get checked.
Below is my code. If you run the snippet, you will understand what I am trying to explain.
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length
var get_code = $("#AttachmentGrid").data("code").split("_")[1]
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
}
})
function AttchmentBox(id, count, el) {
if (parseInt(count) > 0) {
//some code..where you add data inside your attachmnt grid,,
//...
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
//if checked in tr..
if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true) //make checked in dialog as well
}
$("#attchment_div #AttachmentGrid").data("code", id) //set this attr
$("#attchment_div").show() //show your dialog it..(demo..)//showPopup('attchment_div', true);
}
}#attchment_div {
display: none;
border: 1px solid black
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection' onclick="addAttributes('78427','41701',this);">
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
onclick="addAttributes('78424','41701',this);"
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}What I want to do is that on the selection of checkboxes I want the documnetcode of the files attached in the dialog box to append to a variable.
What I did was made an onclick function for the checkboxes inside the dialog box
var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}
This is working fine but not in all scenarios. As there can be multiple scenarios
Scenario 1: The user opens this grid, right now it does not tick any checkboxes, he opens the dialog box against Sno 1, and checks the checkboxes against files attached.(Suppose there are 3 files attached) . Then my function will append the document code to my string docCodes.
Scenario 2 : The user opens a grid, and checks the Sno1 checkbox which means the checboxes in the dialog box will get auto ticked as well. In this case it should check if checkboxes in dialog box are ticked then append the relevant document code and if the user later unticks, remove that attribute.
Scenario 3 : The user directly checks the checkbox1 against serial number heading which will check all child checkboxes.
Right now only scenario 1 is working. How do I fulfill other two scenarios? PLease help.
Aucun commentaire:
Enregistrer un commentaire