Dynamically bind dropdown in CKEditor (FCK Editor)

Dynamically bind drop down in CKEditor (FCK Editor)


Get dropdown data from database in CkEditor

First of alldownload and implement CkEditor then install strinstert plugin ( neeed to dowanload all dependent plugins)

or use CkEditor builder (Add to my editor button) and select strinstert plugin
http://ckeditor.com/addon/strinsert


Open ckeditor> plugins>strinsert>plugins.js file

replace it with below file

/**
 * @license Copyright © 2013 Stuart Sillitoe <stuart@vericode.co.uk>
 * This work is mine, and yours. You can modify it as you wish.
 *
 * Stuart Sillitoe
 * stuartsillitoe.co.uk
 *
 */
CKEDITOR.plugins.add('strinsert',
{
    requires: ['richcombo'],
    init: function (editor) {
        var response = getddlData();
        var responseArr = response.split(",");
        alert(responseArr.length);
        //  array of strings to choose from that'll be inserted into the editor
        var strings = [];
        //strings.push(['@@FAQ::displayList()@@', 'FAQs', 'FAQs']);
        //strings.push(['@@Glossary::displayList()@@', 'Glossary', 'Glossary']);
        //strings.push(['@@CareerCourse::displayList()@@', 'Career Courses', 'Career Courses']);
        //strings.push(['@@CareerProfile::displayList()@@', 'Career Profiles', 'Career Profiles']);
        //BY Pankaj Sharma (3 responses being filed :  'drop down Value', drop down Text, Title)
        for (i = 0; i < responseArr.length; i++) {
            strings.push([responseArr[i], responseArr[i + 1], responseArr[i + 2]]);
            i = i + 2;
        }
        // add the menu to the editor
        editor.ui.addRichCombo('strinsert',
{
   label: 'add bookmarks',
   title: 'add bookmarks',
   voiceLabel: 'add bookmarks',
   className: 'cke_format',
   multiSelect: false,
   panel:
{
   css: [editor.config.contentsCss, CKEDITOR.skin.getPath('editor')],
   voiceLabel: editor.lang.panelVoiceLabel
},
   init: function () {
       this.startGroup("Insert Bookmark");
       for (var i in strings) {
           this.add(strings[i][0], strings[i][1], strings[i][2]);
       }
   },
   onClick: function (value) {
       editor.focus();
       editor.fire('saveSnapshot');
       editor.insertHtml(value);
       editor.fire('saveSnapshot');
   }
});
    }
});
function getddlData() {
    var ajaxResponse;
    $.ajax({
        type: "POST",
        url: 'TextEditor.aspx/GetBookMarkData', // AJAX call to fecth dropdown data
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        // Text file name
        success: function (response) {
            //    //alert(data.d);    // or do some other data processing
            //   //return data.d;
            ajaxResponse = response;
        }
    });
    return ajaxResponse.d;
}
//$(function () {
//    getddlData();  // calling ajax function on page load
//});

Now add webmethod in your C# code behind

     [WebMethod]
        public static string GetBookMarkData()
        {
            //string bookmarkData = "'@@Test@@','TestOne','TestOne'";
            /// BY Pankaj Sharma (3 responses dropdown values being filed :  'drop down Value', drop down Text, Title)
            /// Need DB data in , seprated list  Formate:  @@Test@@,TestOne, TestOne,  @@Test2@@,Test2,Test2
            string sbookmarkData = "@@Test_Name@@, Test Name, Test Name,     @@Test_Add@@, Test Add, Test Add,    @@Test_City@@, Test City, Test City,     @@Test_Phone@@, Test Phone, Test Phone";
            return sbookmarkData;
        }

Fix GridView OR DatGrid Column value to 2 decimal (20.00) position in JQuery

<script>
   $(function() {
   $('.jqFix2').each(function () {
$(this).html(($(this).text() * 1.0).toFixed(2));
});
</script>

DataGrid 

<asp:DataGrid ID="dgCopay" runat="server
AllowSorting="True" ShowHeader="True" BackColor="White" CellPadding="3" AutoGenerateColumns="False">
<Columns>
 HeaderText="Total" HeaderStyle-CssClass="HeaderStyle" HeaderStyle-ForeColor="White"
HeaderStyle-HorizontalAlign="center" ItemStyle-CssClass="ItemStyle" ItemStyle-HorizontalAlign="right">
<ItemTemplate>
<asp:Label ID="Label19" runat="server" style="Width:50px" CssClass="jqFix2">
<%# DataBinder.Eval(Container.DataItem,"total") %></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid >

Search whole page & replace text in JQuery

      $('*:contains("00%")').each(function(){
      if($(this).children().length < 1) { // alert('hi');                    $(this).html($(this).text().replace("00%",'0%')) } });

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>

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>

Unchecking all checkboxes through JavaScript

Suppose we have 10 check boxes ..& checkboxes ID are chk1,chk2,chk3...

<script>

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

</script>

Call this function on a button click.

show pop up JavaScript message through C#

Add this following script in html code :



<script>
        function ShowMessage() {
            alert('Thank you for your submission!  To complete, please continue with PayPal transaction');
            window.location.href = 'BuyNow.aspx';
        }
   
    </script>


C# Code :-

ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "ShowMessage()", true);