javascriptasp.netnested-repeater
3 level nested repeater
have a 3 level nested repeater which display menu header and menu items for each group as shown
in second repeater have 4 check boxes to check some check boxes in third repater with javascript function as shown
<asp:Repeater ID="RpGroups" runat="server" OnItemDataBound="RpGroups_ItemDataBound">
<ItemTemplate>
<asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>
</a>
</div>
<div class="panel-heading">
</div>
<div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
<div>
<asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
<ItemTemplate>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
<div class="navbar-right"></div>
</h3>
</div>
<div class="panel-body">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>
</table>
<asp:Repeater ID="RbItems" runat="server">
<HeaderTemplate>
<div class="table-responsive">
<table class="table table-striped table-responsive ">
<thead>
<tr class="alert-danger table-responsive">
<th class="col-sm-2 ">Page Name</th>
<th>
<input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>
<th>
<input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this), 'View'" />Full View</th>
<th>
<input id="Checkbox3" type="checkbox" value="Full Update" onclick="checkadd(this), 'Edit'" />Full Updte</th>
<th>
<input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<%--<div class="table-responsive">
<table class="table table-striped table-hover">--%>
<tr class="view" >
<asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
<td class="col-sm-2"><strong>
<div><%# Eval("MenuItemName")%></div>
</strong></td>
<td>
<asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
<td>
<asp:CheckBox ID="View" runat="server" Text="View" /></td>
<td>
<asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
<td>
<asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
</tr>
<%-- </table>
</div>--%>
<%-- <li>
<a href="<%# Eval("MenuItemLink")%>"><%# Eval("MenuItemName")%></a>
</li>--%>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
<div class="panel panel-Lightblue ">
<div class="panel-heading">
<h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>
</a>
</div>
<div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
<div>
<asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
<ItemTemplate>
<div class="panel panel-Lightblue">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
<div class="navbar-right"></div>
</h3>
</div>
<div class="panel-body">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>
</table>
<asp:Repeater ID="RbItems" runat="server">
<HeaderTemplate>
<div class="table-responsive">
<table class="table table-striped table-responsive ">
<thead>
<tr class="alert-danger table-responsive">
<th class="col-sm-2 ">Page Name</th>
<th>
<input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>
</script>
<th>
<input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this, 'View')" />Full View</th>
<th>
<input id="Checkbox3" type="checkbox" value="Full Updte" onclick="checkadd(this, 'Edit')" />Full Updte</th>
<th>
<input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr class="view">
<asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
<td class="col-sm-2"><strong>
<div><%# Eval("MenuItemName")%></div>
</strong></td>
<td>
<asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
<td>
<asp:CheckBox ID="View" runat="server" Text="View" /></td>
<td>
<asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
<td>
<asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
<script type="text/javascript">
function checkadd(chk, name) {
if (chk.checked == true) {
document.getElementById('<% = RpGroups.ClientID %>');
var chk = div.getElementsByTagName('input');
var len = chk.length;
for (var i = 0; i < len; i++) {
if (chk[i].type === 'checkbox' && chk[i].name===name) {
chk[i].checked = elem.checked;
}
}
}
else
{
var div = document.getElementById('<% = RpGroups.ClientID %>');
var chk = div.getElementsByTagName('input');
var len = chk.length;
for (var i = 0; i < len; i++) {
if (chk[i].type === 'checkbox' && chk[i].name === name) {
chk[i].checked = false;
}
}
}
}
</script>
i need checkbox with value (full Add) check all check boxes in rpitems with name Add what wrong in my code
Solution
If you view source and study the rendered markup, you notice that the checkboxes get created with a particular pattern. You can use that fact for your requirement.
Now for the javascript side of things...you need to walk up the DOM tree and find the closes table corresponding to the checkbox clicked.
You are doing something like this:
onclick="checkadd(this, 'View')
So the first argument to that function is a reference to the checkbox that the user has clicked...Hence we've to find the closest table. Therefore we do something like this...
var tbl = findClosestTable(chk); //stores reference to the table that houses checkbox
findClosestTable is implemented like this:
function findClosestTable(el) {
while(!el.tagName.toLowerCase() === 'table' && el !== document.body)
el = el.parentNode;
if(el == document.body)
return null;
else
return el; //should be the table reference.
}
Once you have that, you can get all the input elements by tagname using that reference.
var inputElements = tbl.getElementsByTagName('input');
Now the task is fairly simple.
for(var i = 0, j = inputElements.length; i < j; i++ ) {
var el = inputElements[i];
if(el.type === 'checkbox' && el.id.indexOf('Add') > 0 && el !== chk) {
//el is now a reference to your desired checkbox element...
}
}
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How can I split a string containing emoji into an array?
- nodemailer Invalid login: 535 Authentication Failed
- Jquery Remove All Event Handlers Inside Element
- Multiple Vimeo video in multiple modals
- How to convert ReadStream into ReadableStream in NodeJS?
- How to create a backdrop for a dialog?
- How can an object have a `.constructor` property if I reset its prototype to an empty object (`{}`)?
- Different way of showing and hiding certain elements
- Is there a good use case for the constructor property in Javascript?
- How to make search in select box?
- My scrollView compnent is not working despite all the online solutions
- Why does my linter warn “Use object destructuring (prefer destructure)”?
- Is it possible to keep scheduled tasks from overlapping in NestJS?
- export html table as word file and change file orientation
- Vis.js callback when the network finishes loading
- Is it safe to use the `Function` constructor to validate JavaScript syntax?
- Equivalent of destructors in JavaScript's object model
- How to slow down scroll to top speed?
- How can I tell if it is an object or an array?
- Bottom of gradient text gets cut off tailwindcss
- How to share state between reducers in redux (how to organize redux)?
- I'm trying to create a password generator
- how to convert a raw readme file to html formated document after geting it from github in angular js
- How to use npm Marked with HighlightJS
- Avoid browser popup blockers
- What does this function do? And what is the odd syntax?
- Next.js server side component request, how to send my cookie token?
- Javascript single quote inside string for exported text file
- Passing in a result of a function to generate readme