Archive for category JavaScript

Implementing Multiselect feature on AutoCompleteExtender

AjaxControlToolkit’s AutoComplete extender is designed to be a single selection control. i.e. When user selects a value the dropdown list will be closed and selected text will be assigned to targeted textbox control.

Recently I got a question on the Asp.net Forums where the user wants to make the AutoCompleteExtender a multi select one. Besides the chosen values should be appended to textbox as comma separated values. This question caught my attention as it was a little tricky.

Here are the details of requirements

  • Keep the dropdown list of options on AutoComplete Extender opened
  • Allow multiple selection on AutoComplete Extender
  • Add the string to target textbox control as comma separated strings

We need to come up with a custom implementation to accomplish this requirement.  When I looked at some threads I found the code to keep the list opened. However, I need to customize it to generate comma separated values.

You can find complete implementation details here

Add a behaviorID to AutocompleteExtender control. We will use this id to close the dropdown list after user selecting values

Now we need to add a button to close the dropdown list after selecting values

Add the following javascript function to your page to close the window

Now we need to customize the inbuilt function “_setText” and “_hideCompletionList” function in order to accomplish our requirement

Complete Code

HTML

C#:

Code to populate the list when user type in characters on textbox

Demo

AutoCompleteExtenderDemo

, , , , ,

Leave a comment

How to read Excel files in Javascript/Jquery and convert the value to Json

Introduction

We have multiple ways to read excel file in C# and then convert it to JSON or insert the data in to database etc. However there are not much options available when it comes to reading the Excel file using javascript. In this article I will explain an option using a Jquery Plugin called SheetJS.

SheetJS is Excel parser which supports multiple formats of excel files like 2007, 2010, 2013 office versions etc.

Implementation

To use the SheetJS user need to add the reference files first. You can do this either by downloading files from here and then refer these js files to project. Another option is to use the online CDN available.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>

Reading the Excel File

To read the excel file we use the read method in SheetJs like below

var workbook = XLSX.read(data, { type: 'binary' });

Converting Excel value to Json
To convert the values to Json will use “sheet_to_json” method

          var sheet_name_list = workbook.SheetNames;
           sheet_name_list.forEach(function (y) { /* iterate through sheets */
                    //Convert the cell value to Json
                    var roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
                    if (roa.length > 0) {
                        result = roa;
                    }
                });

Complete Code

Sample Excel I used for this Demo

ujcrvsc

 

, , , ,

1 Comment

How to make a CheckBoxList items single select in Asp.Net

Introduction:

In this article I am going to explain how to make a CheckBoxList single select in asp.net

Description:

Usually RadioButtonList is the control which allow the user to select a single selection of items inside it and users will use CheckBoxList control to allow multiple selection of items. However in some cases we need to make the CheckBoxList control a single select one. You can make use of Javascript to achieve this.

The logic here is to attach a Javascript function in onclick event of each items in CheckboxList.

Javascript Function

<script type = "text/javascript">
            function UncheckOthers(objchkbox) {
                //Get the parent control of checkbox which is the checkbox list
                var objchkList = objchkbox.parentNode.parentNode.parentNode;
                //Get the checkbox controls in checkboxlist
                var chkboxControls = objchkList.getElementsByTagName("input");
                //Loop through each check box controls
                for (var i = 0; i < chkboxControls.length; i++) {
                    //Check the current checkbox is not the one user selected
                    if (chkboxControls[i] != objchkbox && objchkbox.checked) {
                        //Uncheck all other checkboxes
                        chkboxControls[i].checked = false;
                    }
                }
            }
</script>

HTML:

 <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="FirstValue" Value="1" onclick="UncheckOthers(this);">
            </asp:ListItem>
            <asp:ListItem Text="Second Value" Value="2" onclick="UncheckOthers(this);">
            </asp:ListItem>
            <asp:ListItem Text="Third Value" Value="3" onclick="UncheckOthers(this);">
            </asp:ListItem>
            <asp:ListItem Text="Fourth Value" Value="4" onclick="UncheckOthers(this);">
            </asp:ListItem>
            <asp:ListItem Text="Fifth Value" Value="5" onclick="UncheckOthers(this);">
            </asp:ListItem>
</asp:CheckBoxList>

Demo

, , ,

3 Comments

How to get the selected item value from RadiobuttonList using JQuery

Introduction:

In this article I am going to explain how to get the selected value from RadioButtonList control using JQuery in Asp.Net.

Prerequisites:

You need to add the necessary JQuery files to your page prior to use this plugin. In this example I have used the online JQuery CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Implementation:

Here we will make use of Jquery selectors to get the selected item value and text  from RadioButtonList and then get the value.

To get the selected value

//Get the selected item value from RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();

To get the selected item text value

//Get the selected item text value from RadioButtonList
var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();

Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Attach click event to button
            $('#Button1').click(function (e) {
                //Get the selected item value from RadioButtonList
                var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();

                $("#<%= lblSelectedValue.ClientID %>").text(rblSelectedValue);

                //Get the selected item text value from RadioButtonList
                var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();

                $("#<%= lblSelectedItem.ClientID %>").text(rblSelectedText);

                //Cancel the postback
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem Value="1" Text="First"></asp:ListItem>
            <asp:ListItem Value="2" Text="Second"></asp:ListItem>
            <asp:ListItem Value="3" Text="Third"></asp:ListItem>
            <asp:ListItem Value="4" Text="Fourth"></asp:ListItem>
            <asp:ListItem Value="5" Text="Fifth"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:Button ID="Button1" runat="server" Text="GetSelectedValue" />


        Selected Value
        <asp:Label ID="lblSelectedValue" runat="server" Text=""></asp:Label>

        Selected Item
        <asp:Label ID="lblSelectedItem" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

Demo

, , , , ,

1 Comment

Move focus to next TextBox automatically when user types in the Textbox in Asp.Net

Introduction:

In this article I am going to explain how to move the focus to next textbox when user types in textbox and the total character count cross the limit of maxlength property.

Prerequisites:

You need to add the necessary JQuery files to your page prior to use this plugin. In this example I have used the online JQuery CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Implementation:

Here we are make use of .attr() method in Jquery to get the maxlength property of textbox at runtime and then checks if the textbox character count crosses the length. Based on this we will move the focus to next textbox.

Sample Code

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
         <script>
             // A $( document ).ready() block.
             $(document).ready(function () {
                 //Attach key up event handler
                 $('#<%= TextBox1.ClientID %>').keyup(function () {
                     //check if user typed three characters
                     if (this.value.length == $(this).attr('maxlength')) {
                         //move the focus to another textbox
                         $('#<%= TextBox2.ClientID %>').focus();
                     }
                 });
                 $('#<%= TextBox2.ClientID %>').keyup(function () {
                    if (this.value.length == $(this).attr('maxlength')) {
                         $('#<%= TextBox3.ClientID %>').focus();
                     }
                 });
             });
         </script>
 
         <asp:TextBox runat="server" ID="TextBox1" MaxLength="3" Width="50"></asp:TextBox>
         <asp:TextBox runat="server" ID="TextBox2" MaxLength="2" Width="50"></asp:TextBox>
         <asp:TextBox runat="server" ID="TextBox3" MaxLength="2" Width="50"></asp:TextBox>
 

Demo

, , , ,

1 Comment

elevateZoom – Jquery Zoomin Plugin

Introduction:

Recently I have come across an excellent Jquery Zoom in plugin. In this article I am going to explain details about the same – elevateZoom Plugin.

elevateZoom Plugin :

elevateXoom is a Jquery plugin which will xoom the image in a detail preview on mouse hover. In this example I will show to how to implement eleavteZoom plugin in Asp.Net

Prerequisite’s:

You need to add the necessary JQuery files to your page prior to use this plugin. In this example I have used the online JQuery CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Implementation Details:

First add the JQuery reference and elevateXoom js file in your page

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="Script/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>

Then add the required images in your page which needs to display in details preview on mouse hover.

You need to ensure that you have set two attributes to your image tag to make the elevateXoom plugin to work they are

  • “src” which holds the initial image which will get displayed
  • “data-zoom-image” which holds the expanded image which get displayed when previewed.
<img id="zoom_01" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />

Complete Code

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="Script/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>
     <script>
         // A $( document ).ready() block.
         $(document).ready(function () {
             //Attach the elevateZoom image to image
             $("#zoom_01").elevateZoom();
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
         <div>
             <img id="zoom_01" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />
         </div>
     </form>
 </body>
 </html>
 

I have explained only the basic implementation of elevatedZoom plugin, however this plugin have lots of other features , you will get more details from this link

Demo

, , , , ,

Leave a comment

How to get the Last Row value from HTMLTable in Jquery in Asp.Net

Introduction:

In this article I am going to explain how to get the last row values from HTML table using Jquery. In this example I have used the online Jquery CDN files available. If you don’t want to use the Online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

I have used the last() filter function in Jquery to get the last element in that set of DOM elements.

Complete Code

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        $(document).ready(function () {
            //Attach click event o button
            $('#btnGetValue').click(function () {
                //Get the last row in gridview
                var tr = $('#DetailTable tr:last');
                //Ge the firstcolumnVal 
                var firstcolumnval = $(tr).find("td").html()
                alert(firstcolumnval);
                //Get the secondcolumn value
                var secondcolumnval = $(tr).find("td").find('input.Col1').val();
                alert(secondcolumnval);
                //Get the Thirdcolumn value
                var Thirdcolumnval = $(tr).find("td").find('input.length').val();
                alert(Thirdcolumnval);
                //Get the Fourthcolumn value
                var Fourthcolumnval = $(tr).find("td").find('input.Col3').val();
                alert(Fourthcolumnval);
            });
        });
    </script>

    <table style="width: 40%" id="DetailTable">
        <tr>
            <td>1
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="4" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value1" />
            </td>
        </tr>

        <tr>
            <td>2
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="5" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="6" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value2" />
            </td>
        </tr>

        <tr>
            <td>3
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="34" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value3" />
            </td>
        </tr>
    </table>
    <input id="btnGetValue" value="GetValue" type="button" />

, , , ,

Leave a comment