My company has a license for one of the older Telerik packages. They would like me to place an RTF textbox in place of the normal Textbox on one of our screens. I have the extant code for the text box and I have another page used in our application which ostensibly works with the RTF editor (it's a part of functionality which is inaccessible to me at my privilege level). The original code was as follows:
#Html.TextAreaFor(m => m.LogEntry.Description,
new { #id = "logDescription", #class = "dirtyField",
style = "width: 400px; height: 100px;" })
The RTF code I'm patterning my code off of is as follows:
#(Html.Telerik().EditorFor(m => m.MessageContent)
.Name("msgEditor")
.HtmlAttributes(new { style = "width: 600px; height:250px; padding-top:0px; padding-bottom:0px;" })
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.Subscript()
.Superscript()
.FontName()
.FontSize()
.FontColor().BackColor()
)
)
I have the Editor control displaying, using our LogEntry.Description string instead of the above MessageContent. I can input text into it. I can load text into it. But when I try to save the entry off of a procedure called by a button in the dialog, the text of Description has been set to NULL. What am I doing wrong? I'm a newbie when it comes to web development, so I'm sort of grasping at straws.
I've looked at the answer at Telerik Editor doesn't work, but we have a ScriptRegistrar set up. The tutorials I can find on the Telerik site are all for the Kendo editor. This page seems more applicable, but, as far as I can tell, I'm doing all of the same things as they are. I tried to figure out if there was a place I needed to insert a call to HTMLEncode or HTMLDecode, but I've yet to find where the value is getting changed to NULL so as to catch it before then. Unfortunately, company code and all of that, I can only post so much of it, although I'll do my best to post sanitized specifics as necessary.
For the sake of future people who have this issue, I hashed it out with one of the programmers here who had access to some additional code that had been published, but not added to our source code. I had to add code similar to the following inside the code run for the Javascript code associated with the Save button:
var editor = $("#descriptionEditor").data("tEditor");
var message = editor.value();
$("#logentry-encoded-message-content").val(message);
Within the CSHTML file, had to add the following element:
#Html.HiddenFor(m => m.LogEntry.EncodedDescription, new { #id = "logentry-encoded-message-content" })
Then, in the code involving processing the form, I assigned the contents of EncodedDescription to Description. Rather annoyingly, I have yet to find a way to just use one variable here. I did also have to add a modifier of [AllowHtml] to the EncodedDescription property to avoid the error message that there is potentially dangerous HTML being posted (since I know exactly what is being posted, and I know that it will be decoded and encoded for the control).
Related
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.
I am trying to set the default style applied to the P elements that are automatically created when a user enters the blank editing area. I've spent many hours searching for an answer but have not found anything that works. The requirements are:
Style has to be inline, no stylesheet
No user interaction, no format/style plugin to click
When the user clicks in the editing area and starts typing, I want the style to be applied and visible automatically. Surely there is a way to accomplish this?
The closest I have gotten is by using the htmlFilter, like this :
p_rule = {
elements : {
p : function(element) {
if (element.attributes.style === undefined) {
element.attributes.style = "color: #0000ff;";
}
}
}
};
ev.editor.dataProcessor.htmlFilter.addRules(p_rule);
But the new style is not automatically visible.
It does become visible if the user goes into source editing mode and back to WYSIWYG but I want it to be automatic.
I tried using updateElement() in the filter function, but it does not work and creates infinite recursion:
p_rule = {
elements : {
p : function(element) {
if (element.attributes.style === undefined) {
element.attributes.style = "color: #0000ff;";
CKEDITOR.instances['editor1'].updateElement();
}
}
}
};
ev.editor.dataProcessor.htmlFilter.addRules(p_rule);
(I guess updateElement() triggers the filter)
If I use setData(getData()) from an event I can strangely get the textarea to update with the changes the filter applied, for example:
CKEDITOR.instances['editor1'].on('blur', function() {
CKEDITOR.instances['editor1'].setData(CKEDITOR.instances['editor1'].getData());
});
But that too requires user interaction. Using the "change" event creates recursion.
I am new at CKEditor and obviously I'm missing something on how the filter works in relation to what is currently being displayed in the textarea.
Any CKEditor guru out there? Help!
Thanks
I really advise not to go this way. You'll find yourself fighting with countless issues, like what if you copy&paste, what if you change format to h1 and then back, what if you create a list item and then convert that into a paragraph, etc. etc. There are really dozens of those. You'd need to rewrite half of the editor.
The way to handle this in CKEditor 4 is to rethink this:
Style has to be inline, no stylesheet
Inside CKEditor you clearly need to use a stylesheet. I presume though that you want the inline styles in the output. So what I would propose is to:
Write htmlFilter rule which adds this style to every paragraph.
Write dataFilter rule which removes this style from every paragraph.
The second rule is needed so if you save the data and then load it back to the editor, the styles do not pollute it.
PS. CKEditor 5 will separate data model from rendering (the view) so you'll be able to render paragraph as you wish without affecting how other features interact with it. Read more about CKEditor 5 in this article.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I am trying to setup my model so I can use the
#Html.EditorFor(e => e.publicationTitle) and have it show a Watermark with a hint.
Currently I am doing
#Html.LabelFor(e => e.PublicationTitle) #Html.TextBox("PublicationTitle",tempTitle.ToString(), new { style = "width:350px", placeholder = "Put title here" })
#Html.ValidationMessageFor(e => e.PublicationTitle)
I have found that you can put a [Display(Prompt="Enter title here")] in my model
but it is not showing up in my view for some reason.
On a side note. I did try to follow the instructions from this post
Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?
At the end of this post it says to change the ~/Views/Shared/EditorTemplates/String.cshtml file but this file is not located in my project.
Any hints would be appreciated. Thank you in advance.
FOLLOW UP!
Ah the joys of MVC3. Apparently the above post answers the question once you understand what is going on. If you create the EditorTemplates/String.cshtml file in your ~/Views/Shared/ folder then it will use this template for your editfor boxes.
Final Answer to be concise for others looking will be posted below.
In your controller you need to do the following
[Display(Prompt="First Name Goes Here",Name="First Name")]
[StringLength(100,ErrorMessage="First Name may not be longer than 100 characters")]
public string AuthFirstName { get; set; }
The Prompt="This is what will display" under display is the watermark that will be created.
Then you will need to create the folder "EditorTemplates" under ~/Views/Shared the entire path will be ~/Views/Shared/EditorTemplates/
Then create the file String.cshtml and place the following code in it
#Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, new { #class="text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })
More detailed information can be found at the link posted by tugberk (SO question and SO answer).
This will not work with IE unfortunately. At least IE9 and earlier. I spent couple hours pulling my hair as to why this helped others and doesn't work here. Apparently IE won't show prompts. Hope IE10 will address the issue.
The placeholder attribute is not supported in earlier versions of IE, so for the Display[(Promt="...")] to work fine I recommend to use (along with the String template as Samack described) any jQuery watermark plugin (I used the google one) then add this to the Document.Ready function:
$(document).ready(function(){
$(':text').watermark({ textAttr: 'placeholder' });
})
I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.
Initially when bringing up our web form, we'll have a list of files on the right side of the page like so....
AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....
On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.
What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).
I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.
Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.
If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie
EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.
It looks like this....
dijit.byId('files_matching').getValue(),
Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....
1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)
2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.
I am so close to solving this and I still seem to have a gaping chasm in front of me.
It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.
It could look something like this:
var file_store = new dojo.data.ItemFileReadStore({ data: {
items: [{ name:"AAA_text" },
{ name:"AAA_text_1" },
{ name:"BBB_text_2" }]
}});
When you have that in place you can call a function from your text input's onChange event:
<input type="text" onchange="query_store(this.value);" />
And then you handle to actual query from the function called from the onchange event:
var query_store = function(search_for) {
var my_query = { name: search_for+"*" }; // * for wildcard match
completed = function(items, result){
for(var i = 0; i < items.length; i++){
var value = file_store.getValue(items[i], "name");
alert(value); // Instead of alert, you can save the values to your div.
}
};
file_store.fetch({ query: my_query, onComplete: completed });
}
A lot of good information about this can be found here
Hope this is at least a little helpful.