How To Fix Empty ContentEditable Not Allowing Click



TODO:

Have you ever had an empty content editable element, which means the only way to get focus to it was to tab to it?

 

SOLUTION:

Enclose your element in a <div class="editableCell">.  Then track the click on the div, setting focus to it's first child, which will be your empty content editable element.  See the JQuery code below.

$(document).on('click', '.editableCell', onClick);

//So we need this because when there is an empty contenteditable element it wont take a click.  So we need to get the parent (TD) then set focus to the SPAN which will allow data entry.
function onClick(e) {
     $(e.target).children('span')[0].focus();
}
 


NOTES:

You can change the 'span' to whatever your contenteditable element is.  In my case it was a span.

How To Get The Week Of The Year By Using A Custom First Day Of The Week Value



TODO:

Have  you ever wanted to get the week of the year by using a a custom first day of the week?

 

SOLUTION:

var weekOfYear = CultureInfo.CurrentCulture.Calendar.GetWeekOfYear(
                DateTime.Now,
                CalendarWeekRule.FirstDay,
                DayOfWeek.Monday);


NOTES:

This sample will get the week of the year by using the FirstDay of the week set to Monday, rather than the default of Sunday.

Telerik RadGrid GridEditCommandColumn Only Shows Text Rather Than Default Image



TODO:

You have a RadGrid and the edit column does not show the edit button, only the "edit" text

 

SOLUTION:

In my case the following was in my web.config,

<add key="Telerik.EnableEmbeddedSkins" value="false"/>
   

so the solution was as follows.

  1. Add EnableEmbeddedSkins="true" to your RadGrid declaration
  2. Add Skin="" to your RadGrid declaration


NOTES:

How To Disable Edit Of A Particular RadGrid Cell And Hide The Edit Control



TODO:

Have you ever wanted to remove a TextBox or other Control from a particular cell in a RadGrid?  This is particularly useful when you want to conditionally allow edits based on certain data in the record.

 

SOLUTION:

protected void rgMyGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
        //do it when in edit mode
     if (e.Item.IsInEditMode && e.Item is GridEditableItem)
     {
          GridEditableItem dataItem = e.Item as GridEditableItem;

          //if we have a particular type, do not allow the cell to be edited.  if it is not this type, we can allow the cell to be edited
          if (((Employee)dataItem.DataItem).SSN == Ssn1 ||
                ((Employee)dataItem.DataItem).SSN == Ssn2)
          {
                //we have one that needs to have name edit disabled and hidden
                dataItem["Name"].Enabled = false;
                dataItem["Name"].Controls[0].Visible = false;

                //now create a label and add it to the controls of the "Name" cell.  Set the text of the label to the text that is in the edit TextBox that we hid.
                Label descLabel = new Label();
                descLabel.Text = (dataItem["Name"].Controls[0] as TextBox).Text;
                dataItem["Name"].Controls.Add(descLabel);
          }
     }
}

 

NOTES:

There are no notes on this topic

How To Display A Confirmation Dialog And Cancel The Postback When Using A Telerik RadButton



TODO:

You are using a Telerik RadButton, and you want to display a Confirm Dialog, and capture the user pressing cancel, thus canceling the Postback.

 

SOLUTION:

    <!-- Define button, and put method to call in the OnClientClicking event -->

    <telerik:RadButtonID="btnDelete"runat="server"Text="Delete Customer"OnClick="btnDelete_Click"

        OnClientClicking="ConfirmDelete">

    </telerik:RadButton>

   

    <!-- Confirm action here.  Cancel press in this dialog will return FALSE, which in turn we will catch and set cancel = true in the args -->

    <telerik:RadCodeBlockID="RadCodeBlock1"runat="server">

        <scripttype="text/javascript">

            function ConfirmDelete(sender, args) {

                if (!confirm('Delete Customer, do you wish to proceed?')) {

                    args.set_cancel(true);

                }

            }

        </script>

 

    </telerik:RadCodeBlock>

 

NOTES:

You may not need the RadCodeBlock, I did in this case due to Application

How To Configure Log4Net In A C# Application



TODO:

Have you ever wanted to use log4net in your C# application?

 

SOLUTION:

To do so, you need to do 2 things:

 

Step 1:  Add the following entry to the bottom of your AssemblyInfo.cs file

[assembly: log4net.Config.XmlConfigurator(Watch = true)]

 

Step 2:  Add this entry to your web or app.config file

<configSections>
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net" />
  </configSections>
 
  <log4net>
    <appender name="RollingFileAppender" type="log4net.Appender.RollingFileAppender">
      <file value="c:\YOUR DIRECTORY HERE\your log file name.log" />
      <appendToFile value="true" />
      <rollingStyle value="Composite" />
      <datePattern value="yyyyMMdd" />
      <maxSizeRollBackups value="10" />
      <maximumFileSize value="30MB" />
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="%d %-5level %logger{1} : %message%newline" />
      </layout>
    </appender>
    <root>
      <level value="ALL" />
      <appender-ref ref="RollingFileAppender" />
    </root>
  </log4net>

 

NOTES:

If you already have a "configSections" entry, just add the new key to that section

How To Remove An Image From The Header Text Of A RadGrid Column



TODO:

Have you ever wanted to remove an image from the Header Text of a Telerik RadGrid?

 

SOLUTION:

/// <summary>
/// Add Header Image
/// </summary>
/// <param name="TargetGrid"></param>
/// <param name="HeaderText"></param>
protected void RemoveGridHeaderImage(RadGrid TargetGrid, string HeaderText)
{
     GridHeaderItem headerItem = (GridHeaderItem)TargetGrid.MasterTableView.GetItems(GridItemType.Header)[0];
     try
     {
          headerItem[HeaderText].Controls.AddAt(1, space);
          headerItem[HeaderText].Controls.AddAt(2, img);
     }
     catch
     {
     }
}

 

NOTES:

All you have to do, is call this method in the PreRender() method of your RadGrid.  You can use this in conjunction with adding an image to a RadGrid Header at this link, which will allow you to toggle the image on and off depending on the contents of the grid.

How To Add An Image To The Header Text Of a RadGrid Column



TODO:

Have you ever wanted to add an image to the Header Text of a Telerik RadGrid?

 

SOLUTION:

/// <summary>
/// Add Header Image
/// </summary>
/// <param name="TargetGrid"></param>
/// <param name="HeaderText"></param>
/// <param name="ImageUrl"></param>
protected void AddGridHeaderImage(RadGrid TargetGrid, string HeaderText, string ImageUrl)
{
     GridHeaderItem headerItem = (GridHeaderItem)TargetGrid.MasterTableView.GetItems(GridItemType.Header)[0];
     Image img = new Image();
     Literal space = new Literal();
     space.Text = " ";
     try
     {
          img.ImageUrl = ImageUrl;
          headerItem[HeaderText].Controls.AddAt(1, space);
          headerItem[HeaderText].Controls.AddAt(2, img);
     }
     catch
     {
     }
     finally
     {
          img.Dispose();
     }
}

 

NOTES:

All you have to do, is call this method in the PreRender() method of your RadGrid.

How To Add A Custom Filter To A RadEditor That Is An EditItem Of A RadGrid



TODO:

Have you ever wanted to add a custom filter to a RadEditor that is a EditItemTemplate in a RadGrid that lives in a RadAjaxPanel?  To get this accomplished, some out of the ordinary things need to happen, or else you will end up with the dreaded 'Telerik.Web.UI.Editor' is undefined error on page load.

 

SOLUTION:

1. Add JavaScript to the page, that will do some things we want to happen when we go from design to html mode in the RadEditor.

<telerik:RadCodeBlock ID="rcbGirdLoaded" runat="server">
        <script type="text/javascript">
            function StripXSS(content) {
                var newContent = content;
                //Make changes to the content and return it      
                newContent = newContent.replace(/iframe/gi, "");
                newContent = newContent.replace(/javascript:alert/gi, "");
                newContent = newContent.replace(/javascript/gi, "");
                
                //do some other stuff
                return newContent;
            }

            function CreateRadEditorXSSFilter(editor, args) {
                editor.get_filtersManager().add(new MyFilter());
            }

            MyFilter = function () {
                MyFilter.initializeBase(this);
                this.set_isDom(false);
                this.set_enabled(true);
                this.set_name("RadEditor XSS filter");
                this.set_description("RadEditor XSS filter");
            }
            MyFilter.prototype =
            {
                getHtmlContent: function (content) {
                    return StripXSS(content);
                },
                getDesignContent: function (content) {
                    return StripXSS(content);
                }
            }

            //on grid created
            function AddXSSFilter()
            {
                MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
            }
        </script>
    </telerik:RadCodeBlock>

 

2.  Create your RadEditor, and set OnClientLoad to our function that creates the filter.

<telerik:RadEditor runat="server" ID="txtDescription" OnClientLoad="CreateRadEditorXSSFilter" RegisterWithScriptManager="false"  ToolsWidth="250px" AllowScripts="false" EditModes="Design,Html" >
</telerik:RadEditor>

 

3. Add the client setting to the RadGrid, that will fire when a PopUp is showing (Here we add the filter)

<ClientSettings>
     <ClientEvents OnPopUpShowing="AddXSSFilter" />
</ClientSettings>

 

NOTES:

Basically, MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); , will cause an error on page load, because 'Telerik.Web.UI.Editor' will be undefined.  We only want to execute that line, once the grid is loaded, and more so when the RadEditor is known.  Since this is in AJAX, and a PopUp editor window, that line needs to happen when the client 'PopUpShowing' event is called.  These code snippets show how to accomlish this.

How To Cancel And Remove Certain Files When Using Telerik RadAsyncUpload



TODO:

Have you ever wanted to remove certain files, when using RadAsyncUpload control in multi select mode?  The problem is, you calling cancelUpload in the Uploading event cancels all uploads.  That is not idea for obvious reasons.

 

SOLUTION:

var errorFiles = '';

//OnClient Uploading Event
function onClientFileUploading(sender, args) {

     //if some condition is met, then cancel the upload, and add the filename to a variable.
     alert('alert user possibly that file will be removed');

     //cancel the upload
     args.set_cancel(true);

     //add to error list, we will need to remove in the Uploaded event...as it still fires.
     errorFiles = errorFiles + currentUploadedFilename.toUpperCase() + '|';
}

//OnClient Uploaded Event
function onClientFileUploaded(sender, args) {
     //create array of file names
     var filename = errorFiles.split("|");
     var count = filename.length;
     
     //process each filename
     $.each(filename.reverse(), function (key, item) {
          if (args.get_fileName().toUpperCase() == item.toUpperCase()) {
               //remove click
               $telerik.$(".ruRemove", args.get_row()).click();
               filename[key] = '';
               return;
          }
     })
     errorFiles = '';
     $.each(filename.reverse(), function (key, item) {
          if (item.length > 0) {
               errorFiles = errorFiles + item.toUpperCase() + '|';
          }
     })
}

 

NOTES:

This snippet of code, will allow you to choose files to cancel during the upload process, and then automatically remove them from the list of documents automatically.