Check or unchecked parent checkboxes and child checkboxes in nested ul li

-
 I generated menulist using c#.

Html :

<div style="border: solid 1px #e5e5e5; padding: 10px; background-color: #FAFAFA; width: 100%; >
                <label>
                    <input type="checkbox" class="checkbox-inline" id="select_all"> Select All
                </label>
                <div class="treeview">
                    @if (Model != null && Model.Count() > 0)
                    {
                        <ul>
                            @GetTreeView(Model, (int) Model.FirstOrDefault().ParentMenuId)
                        </ul>
                    }
               </div>
 </div>

Helper method:
@helper GetTreeView(List<Menu> siteMenu, int parentId)
{
    foreach (var i in siteMenu.Where(a => a.ParentMenuId.Equals(parentId)))
    {
      <li>
            @{
        var submenu = siteMenu.Where(a => a.ParentMenuId.Equals(i.MenuId)).Count();
            }
        
          <input type="checkbox" id=@i.MenuId class="checkbox-inline" parentmenuid=@i.ParentMenuId menuid=@i.MenuId method=@i.MethodName controller=@i.ControllerName><a class="col"> @i.MenuName </a>
            
            @if (submenu > 0)
            {
                <ul>
                    @GetTreeView(siteMenu, i.MenuId)
                </ul>
            }
        </li>
    }
}


CSS: 
<style>

        /*Here We will add some css for style our treeview*/

        .col {
  width: 15px;
  background-repeat: no-repeat;
  background-position: -36px -17px;
  display: inline-block;
  cursor: pointer;
}

.treeview ul {
  font: 14px Arial, Sans-Serif;
  margin: 0px;
  padding-left: 20px;
  list-style: none;
}

.treeview > li > a {
  font-weight: bold;
}

.treeview li {
}

.treeview li a {
  padding: 4px;
  font-size: 12px;
  display: inline-block;
  text-decoration: none;
  width: auto;
}

    </style>


Jquery:



$(document).ready(function () {
           $(".col").toggleClass("collapse expand");
 });
                $('#select_all').on('click', function () {
                    if (this.checked) {
                        $('.checkbox-inline').each(function () {
                            this.checked = true;
                        });
                    } else {
                        $('.checkbox-inline').each(function () {
                            this.checked = false;
                        });
                    }
                });
            
                $('li :checkbox').on('click', function () {
                    debugger;
                    var $chk = $(this),
                        $li = $chk.closest('li'),
                        $ul, $parent;
                    if ($li.has('ul')) {
                        $li.find(':checkbox').not(this).prop('checked', this.checked)
                    }
                    do {
                        $ul = $li.parent();
                        $parent = $ul.siblings(':checkbox');
                        if ($chk.is(':checked')) {
                            $parent.prop('checked', true)
                        } else {
                            if ($ul.has(':checked').length == 0) {
                                $parent.prop('checked', false)
                            }
                        }
                        $chk = $parent;
                        $li = $chk.closest('li');
                    } while ($ul.is(':not(.treeview)'));
                });

Comments

Post a Comment

Popular posts from this blog

Easy Ui Jquery easyui-textbox change onChange event

-
$( '#LastName' ).textbox({ onChange: function (newValue, oldValue) { console.log( 'onchange fired...textbox, newValue:' + newValue + ";oldValue:" + oldValue); $( "#Fullname" ).textbox({ value: $ ( '#FirstName' ).val().trim() + " " + $( '#MiddleName' ).val().trim() + " " + $( '#LastName' ).val().trim() }); } }); <tr> <td> <label style= "font-size: 12px" > First Name : </label> </td> <td> @* <input name= "FirstName" id= "FirstName" class= "easyui-textbox" required= "true" ></input> *@ @* <input name= "FirstName" class= "easyui-textbox" ...
Read more

Provision AWS EC2 Instance and RDS with Terraform, and Deploy Spring Boot App to EC2 Instance via GitHub Action Pipeline

-
Image
  These days, Terraform is a popular tool for managing infrastructure as code. Manually creating AWS EC2 instances and deploying Spring Boot applications to them can be challenging. In this tutorial, I will demonstrate how to use Terraform to provision an AWS EC2 instance and an AWS RDS MySQL database, and then deploy a Spring Boot project to that EC2 instance using a GitHub Action pipeline. Prerequisites: To follow this tutorial, you need to have the following prerequisites: An AWS account Terraform installed on your local machine. GitHub Account A Spring Boot Project Putty What We will do : Create AWS EC2 & RDS(MYSQL) Instance using Terraform Deploy Spring Boot Project in that EC2 Instance Using GitHub Action Create AWS EC2 & RDS(MYSQL) Instance using Terraform: Step 1: Create and Configure an AWS Free Tier Account AWS offers a free tier account with a 12-month free offer that allows you to use most of its resources for educational purposes. To get started on AWS, you fi...
Read more

npm install gets stuck at fetchMetadata

-
  This is how I resolved this after spending half an hour: npm config set registry http://registry.npmjs.org/ --global npm cache clear --force setting package-lock.json to  {}  only npm install --verbose node: v12.14.1 npm: v6.13.4 This issue occure when I tried running  ng update  on angular 6 app to update it to angular 9.
Read more