Posts Tagged Javascript

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