Div Scrolling Left and Right Through JQuery

In this example I am creating 2 buttons dynamically on page load through JQuery & We can scroll left & right on click on these 2 buttons

 $(document).ready(function () {

     // Creating two Left Right Scroll Button through JQuery
        var  btnRht= $("<input type='button' id='btnLeft' value='>>' class='ButtonStyle' width='5px' />");
     var  btnLeft = $("<input type='button' id='btnRight' value='<<' class='ButtonStyle' />");
           // appending buttons to a td inside a html div 
        $('#tdDoE').append(btnLeft);
    $('#tdDoE').append(btnRht);
    // Left / Rht Scroll scroll     
                $("#btnLeft").click(function () { 
                var leftPos = $('.DivDataMain').scrollLeft();
                $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
                });   
                    $("#btnRight").click(function () { 

                var leftPos2 = $('.DivDataMain').scrollLeft();
                $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
                });   

    });

HTML Code :-
       <div style="width: 300px; overflow: hidden;" class="DivDataMain">
        <table>
            <tr>
                <td id="tdDoE">
                        Scroll Buttons will be appended after this text.
                </td>
            </tr>
        </table>
    </div>

Display table design ( with data types ) with SQL QUERY

Display table design with SQL QUERY 


Execute folowing in SQL Query window

sp_columns <table name>

OR

sp_help  <table name>

Get selected check box through JavaScript

window.onload = function () {
        getChkItem();
    }
function getChkItem() {
var chk = "";
var arrChk = new Array('cbID_1','cb_2',cb_3,cb_4,cb_6);  // checkbox 1 ID & check 2
for(iCtr=0; iCtr < arrChk.length; iCtr++){
 var element = document.getElementById(arrChkRht[iCtrRht]);
 if (typeof(element) != 'undefined' && element != null) {  if(document.getElementById(arrChk[iCtr]).checked){
chk = chk  + arrChk[iCtr].split("_")[1] + "," ;            
                }
}
alert(chk.slice(0, -1)); }

disable JavaScript Errors in IE

<script type="text/javascript">

 

function noError(){return true;}

window.onerror = noError;

 

</script>

Insert selected records (checkboxes) from asp gridView & perform CRUD operations

Scenario :- I have to perform CRUD operation for selected records ( check boxes) in a GridView  ID as described in the image.

No what we are doing  is to perform a for loop on datatgrid & get selected checkbox id in a string varibale separted by ','.After that we will create a DB function that will split the checkbox ID'd string in new row for each id.


It will make CRUD operation very easy


GridView in aspx:-

  <asp:DataGrid ID="grdList" DataKeyField="diagnosis_id" Runat="server" AutoGenerateColumns="False"
AllowPaging="False" PageSize="100" ShowHeader="true"  >
<Columns>
<asp:BoundColumn DataField="diagnosis_name" HeaderText="DIAGNOSIS" SortExpression="diagnosis_name asc">
<HeaderStyle Width="75%" HorizontalAlign="Center" ></HeaderStyle>
<ItemStyle CssClass="greylabelsmall"></ItemStyle>
</asp:BoundColumn>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

VB function to get selected checkboxes in datagrid

 Private Sub GetCheckedBox()
        For Each item As DataGridItem In grdICDList.Items
            If CType(item.FindControl("chkICD"), CheckBox).Checked Then
                icdIds = icdIds + Convert.ToString( grdList .DataKeys.Item(item.ItemIndex)) + ","
            End If
        Next
        If icdIds.Length > 0 Then
            If icdIds.LastIndexOf(",") > 0 Then
                icdIds = icdIds.Substring(0, icdIds.Length - 1)
            End If
            'SaveICDs()
            InsertDiagnosis(icdIds)
        End If
    End Sub

Now create a db Function like this:-


CREATE  FUNCTION [dbo].[Split]      
(      
 @RowData varchar(8000),      
 @SplitOn nvarchar(5)      
)       
RETURNS @RtnValue table      
(      
 Id int identity(1,1),      
 Data nvarchar(100)      
)      
AS       
BEGIN      
 Declare @Cnt int      
 Set @Cnt = 1      
      
 While (Charindex(@SplitOn,@RowData)>0)      
 Begin      
  Insert Into @RtnValue (data)      
  Select      
   Data = ltrim(rtrim(Substring(@RowData,1,Charindex(@SplitOn,@RowData)-1)))      
      
  Set @RowData = Substring(@RowData,Charindex(@SplitOn,@RowData)+1,len(@RowData))      
  Set @Cnt = @Cnt + 1      
 End      
       
 Insert Into @RtnValue (data)      
 Select Data = ltrim(rtrim(@RowData))      
      
 Return      
END 








And Use it in your stored procedures like this :-





                INSERT INTO INSERTABC         
                        (CPTID,   
                         
                         ICDID,   
                         CREATED_USER,         
                         CREATED_DATE,         
                         ISDELETED)         
       SELECT @CPTID,LTRIM(RTRIM(DATA)), @CREATED_USER,  GETDATE(),0   FROM SPLIT(@ICDIDS,','






Example :--


  SELECT DATA  FROM SPLIT(@ICDIDS, ',' )
Data will give you select check boxes ID in new rows.
  
   

Display Image from Database in ASP.NET

Scenario - I have image names (eg:- abc.jpg) saved in a database & actual images lie in a folder in file system (~/ClientImages/).

Now I want to retrieve image from db & diplay it on webpage,in a div 

Solution :-

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1">
    <Columns>          
   <asp:TemplateField>
  <ItemTemplate>
  <asp:Image ID="img12" runat="server" Width="600px" Height="400" ImageUrl='<%# Page.ResolveUrl(string.Format("~/ClientImages/{0}", Eval("image"))) %>' />

  </ItemTemplate>
  </asp:TemplateField>

    </Columns>
</asp:GridView>

## SqlDataSource ##
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:XXXXConnectionStringName %>" 
    SelectCommand="Stored_Procedure_Name" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>

Unchecking all checkboxes through JavaScript

Suppose we have 10 check boxes ..Checkboxes ID

function selectOnlyThis(id) {
    for (var i = 0;i <= 10; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    
}