Generate Select All Checkbox control in C# , ASP.Net

Hi guys, today I faced a scenario where I need to create (auto generate) a Select All CheckBox control by C# code behind at runtime and and insert it to the Ajax Control toolkit TabPanel.

Once user will check the Select All checkbox all the other checkbox within that Tab will get checked without post back of page. For opposing post back and achieving mark as check JavaScript is the best option coming in mind. And hence I choose the same.

I wrote JavaScript Global function which accept Select All CheckBox Control Id and look for the related controls and auto generate the required Id for them.

For achieving this functionality I have written Below mention code:

C# Code for Generating CheckBox Dynamically (Auto Generate Checkbox):

#region Generate SelectAllCbx

    private void GenerateSelectAllCbx(string cbxId, int index, int width, bool isChecked, AjaxControlToolkit.TabPanel tab)

    {

        CheckBox cbAll = new CheckBox();

        cbAll.Attributes.Add("Value", "All");

        cbAll.ID = cbxId + index.ToString();

        cbAll.Text = "Select All";

        cbAll.Width = Unit.Pixel(width);

        cbAll.Checked = isChecked;

        cbAll.Enabled = !isChecked;

        cbAll.Attributes.Add("onclick", "javascript: SelectAll(this," + index.ToString() + ");");

        tab.Controls.Add(cbAll);

 

    }

    #endregion

Just we need to call this method where we want to insert Select All CheckBox:

GenerateSelectAllCbx("cbEngRating_", 4, 750, false, tabICFRating);

 

Whenever this Method would get called it will Insert a Checkbox (Select All) and handle other automatically for achieving that below is JavaScript Code:

function SelectAll(control_id, x) {

        var chkAll = $(control_id);

        var autoId = control_id.id.substring(0, control_id.id.length - x.toString().length)

        for (var i = 0; i < x; i++) {

            $("#" + autoId + i).attr("Checked", chkAll.prop("checked"));

        }

            }

Here I am passing the Control Id and the Postfix Id to generate auto ID.

That’s it now you are able to select auto generated multiple checkbox and mark them check.

Cheers…

Anand Tiwari….

Scroll Content of div tag like page scrolling.

Hi guys today I have faced a requirement where I need to Scroll the content of one div to show all the content in it. Actually we had a Modal Popup which was displaying some sort of information based on link click by the user.

When ever we are going to show another html (web page) in modal popup we are facing this type of challenge as there in modal popup if you are scrolling by mouse the Parent page will get started scrolling. And hence here our JavaScript is helping as to achieve this functionality. 

Lets say you have a div with lots of content (text and images or video) and your modal popup size is small to show them at once so in this case you need to do like below .

Here I have used a html table control for Demo purpose you can as you like just we need is the id of the div control which we are going to scroll. Like here ‘’dvcontainer” .

<table width="175px">
        <tr>
            <td>
                <div style="position: relative; width: 175px; height: 160px; 

border: 1px solid black;
                    overflow: hidden">
                    <div id="dvcontainer" style="position: absolute; 

width: 170px; left: 0; top: 0">
                        <!--INSERT CONTENT HERE-->
                        <p>
                            Anand Mani Tiwari holds an Engineering degree in 

Computer Science from BPUT and
                            has previously worked at NCPL Inc. and now working 

at Orion Systems Integrators
                            Inc for a Client which is worlds Biggest Auditing 

Company KPMG. He is a Software
                            Engineer and working on different Microsoft 

Technologies like ASP.Net, WPF, Silverlight,
                            WCF... He is a Microsoft Certified Professional. 

And recently Passed Microsoft Technology
                            Specialist Exam in HTML 5 with a Excellent 

Score of 920/ 1000.
                        </p>
                        <p>
                            - <a href="http://www.2bexpert.com/p/about-me.html">

Click here to see his complete profile</a>
                        </p>
                        <!--END CONTENT-->
                    </div>
                </div>
            </td>
            <td>
                <a href="#" onmouseover="move('dvcontainer',1)" 

onmouseout="clearTimeout(move.to)">
                    <img alt="Page Up" src="images/up.gif" border="0"></a>
                <div style="height: 145px; display: block; 

background: url(images/);">
                </div>
                <a href="#" onmouseover="move('dvcontainer',-1)" 

onmouseout="clearTimeout(move.to)">
                    <img alt="Page Down" src="images/down.gif" border="0"></a>
            </td>
        </tr>
    </table>

 

After this we need to write the code for Scroll the “dvcontainer” content. So here we go with JavaScript ….

<script type="text/javascript" language="javascript">

        function move(id, spd) {
            var obj = document.getElementById(id), max = -obj.offsetHeight +

 obj.parentNode.offsetHeight, top = parseInt(obj.style.top);
            if ((spd > 0 && top <= 0) || (spd < 0 && top >= max)) {
                obj.style.top = top + spd + "px";
                move.to = setTimeout(function () { move(id, spd); }, 20);
            }
            else {
                obj.style.top = (spd > 0 ? 0 : max) + "px";
            }
        }

    </script>

That’s it now you can see the div content is getting scroll on mouse hover of Up and Down image.

Required Images for this demo :       

I hope this post has helped you, please comment. Thanks