Thursday, 10 June 2021

Chosen multiselect gets "cut" when placed in area with overflow flow or hidden

 //////////// JS
<script type="text/javascript">
    $(document).ready(function () {
  $('.select-chosen').chosen({
        width: "150px"
    });
        FixChosenOverHidden($('.select-chosen'));
    });
 
    function FixChosenOverHidden($chosenSelect) {
        // Disable mouse scroll if its dropdown is open.
        $chosenSelect
            .bind('chosen:showing_dropdown', function () {
                $(this).next('.chosen-container')
                    .bind("mousewheel", function () {
                        return false;
                    });
            })
            .bind('chosen:hiding_dropdown', function () {
                $(this).next('.chosen-container')
                    .unbind('mousewheel');
            });
 
        // Reposition the dropdown to fixed, so it's always on top.
        $('.chosen-container')
            .bind('mouseenter.chosen', function () {
                var x = $(this).offset().left,
                    y = $(this).offset().top + $(this).height(),
                    w = $(this).width(),
                    $dropdown = $(this).find('.chosen-drop');
 
                // If the menu is partially visible, don't change
                // its dropdown to be fixed. This is only needed if your
                // chosen menu might be clipped by a div or something.
 
                // Find all the parents that might be clipping off.
                var parents = $(this).parents().filter(function () {
                    var overflow = $(this).css('overflow');
                    return overflow === 'auto' || overflow === 'hidden' || overflow === 'scroll';
                });
 
                // If at least one parent is clipping off the bottom of
                // the menu, don't proceed any further.
                for (var i = 0; i < parents.length; i++) {
                    var parentEdge = $(parents[i]).offset().top + $(parents[i]).outerHeight();
                    if (y > parentEdge) {
                        $dropdown.css({ 'display': 'none' });
                        return false;
                    }
                }
 
                $dropdown.addClass('fixed')
                    .css({ 'top': y, 'left': x, 'width': w });
            })
            .bind('mouseleave.chosen', function () {
                $(this).find('.chosen-drop')
                    .removeClass('fixed')
                    .attr('style', '');
            });
    }
</script>
///////////////////// HTML
<select class="select-chosen">
        <option>1 A</option>
        <option>2 B</option>
        <option>3 C</option>
        <option>4 A</option>
        <option>5 B</option>
        <option>6 C</option>
        <option>7 A</option>
        <option>8 B</option>
        <option>9 C</option>
        <option>10 A</option>
        <option>1 B</option>
        <option>2 C</option>
        <option>3 A</option>
        <option>4 B</option>
        <option>5 C</option>
    </select>



Sunday, 23 May 2021

jQuery load() method for calling partial view in mvc with loading progress bar

 //////////// HTML


  <div class="EEReport Summary" id="divSummary">
        <div id="Progressbar" class="ExportReportProgress"></div>
        <div class="loaddataURL"></div>
    </div>

////////////////// J-Query

function LoadUrl(th, IntWidth, showDivButtonId) {
        $("#Progressbar").show();
        $('.loaddataURL').load(
            "URL",
            DataContent or Form Data, 
            function (data, status, jqXGR) {
                    //// Here set any thing after loading the url data or form
                $("#Progressbar").hide();
            }
        );

}


Thursday, 1 April 2021

Validate required fields in asp.net using javascript

 /////////////////////html
 
<table class="mt-3">
                    <tr>
                        <td>Name
                        </td>
                        <td>
                            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="Required_txtName" runat="server" ValidationGroup="TestGrp"
                                ControlToValidate="txtName" Display="Dynamic" ErrorMessage="Required"
                                ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>Salary
                        </td>
                        <td>
                            <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="Required_txtSalary" runat="server"
                                ControlToValidate="txtSalary" Display="Dynamic" ErrorMessage="Required" ValidationGroup="TestGrp"
                                ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>Department
                        </td>
                        <td>
                            <asp:DropDownList ID="ddl_Dept" runat="server">
                                <asp:ListItem Value="0">-- Select --</asp:ListItem>
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="Required_ddl_Dept" runat="server" ValidationGroup="TestGrp"
                                ControlToValidate="ddl_Dept" Display="Dynamic" InitialValue="0"
                                ErrorMessage="Required" ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <asp:Button ID="btnSubmit" runat="server" Text="Sumbit" ValidationGroup="TestGrp" OnClientClick="return Validate_RequiredFiled_Save('TestGrp');" />
                        </td>
                    </tr>
                </table>


=========================  JS

function Validate_RequiredFiled_Save(groupName) {
                    if (typeof (Page_ClientValidate) == 'function') {
                        return Page_ClientValidate(groupName);;
                    }
                    if (Page_IsValid) {
                        alert(groupName + "successful");
                        //do something
                    }
                }
========================= Result

required field validator in asp.net using java-script if not disable

 /////////////////// JS
<script type="text/javascript">
        function validate_Input_Highlight() {
            for (var i = 0; i < Page_Validators.length; i++) {
                var val = Page_Validators[i];
                var ctrl = document.getElementById(val.controltovalidate);
             if ((ctrl.value == "" || ctrl.value == "0") && (ctrl.getAttribute('style') != 'display: none;') && (ctrl.getAttribute('style') != 'border: 1px solid red; display: none;')) {                    if (!val.isvalid) {

                        ctrl.style.borderColor = '#FF0000';
                        ctrl.style.backgroundColor = '#fce697';
                    }
                    else {
                        ctrl.style.borderColor = '';
                        ctrl.style.backgroundColor = '';
                    }
                }
            }
        }
    </script> 


====================================HTML

                    <table>
                        <tr>
                            <td>Emp Name
                            </td>
                            <td>
                                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="Required_txtName" runat="server" ValidationGroup="TestGrp"
                                    ControlToValidate="txtName" Display="Dynamic" ErrorMessage="*"
                                    ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Salary
                            </td>
                            <td>
                                <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="Required_txtSalary" runat="server"
                                    ControlToValidate="txtSalary" Display="Dynamic" ErrorMessage="*" ValidationGroup="TestGrp"
                                    ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Department
                            </td>
                            <td>
                                <asp:DropDownList ID="ddl_Dept" runat="server">
                                    <asp:ListItem Value="0">-- Select --</asp:ListItem>
                                </asp:DropDownList>
                                <asp:RequiredFieldValidator ID="Required_ddl_Dept" runat="server" ValidationGroup="TestGrp"
                                    ControlToValidate="ddl_Dept" Display="Dynamic" InitialValue="0"
                                    ErrorMessage="*" ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <asp:Button ID="btnSubmit" runat="server" Text="Sumbit" ValidationGroup="TestGrp" OnClientClick="return VerifyAndSave();" />
                            </td>
                        </tr>
                    </table>
           
============================ Result



How to highlight selected text in notepad++

  –> To highlight a block of code in Notepad++, please do the following steps step-1  :- Select the required text. step-2  :- Right click...