Textbox + ImageButton?

Aug 18, 2010 at 4:52 PM
Is there a way to dynamically create a textbox with an image button to the right of it, and allow this image button to pop a colorbox modal? I can't seem to find anything like this in the sample/demo. Thanks.
Coordinator
Aug 18, 2010 at 5:36 PM
Edited Aug 18, 2010 at 5:39 PM

You can do this using the templating feature that is available in a recent check-in. I'm not sure how you will achieve your color picker, but I was able to get Farbtastic working:

Add this field to your form:

TextBox colorPicker = new TextBox
                                  {
                                      Prompt = "Pick a color:",
                                      Template =
                                          string.Format(@"<p>{0}{1}<div id=""colorpicker""></div></p>",
                                                        PlaceHolders.Prompt, PlaceHolders.Input),
                                      Key = "SelectedColor"
                                  }; 

Add this to your view:

<script type="text/javascript" src="http://acko.net/files/farbtastic_/farbtastic.js"></script>
<link rel="stylesheet" href="http://acko.net/files/css/893bd4ad5aff3a187cf4a9941e981842.css" type="text/css" />


    <script type="text/javascript">

        $(function() {

            $('#colorpicker').farbtastic('#MvcDynamicField_SelectedColor');

        });

    </script>

This gives you
screenshot

Aug 18, 2010 at 5:47 PM
I apologize. You misunderstood my meaning of "colorbox". Colorbox is a jQuery modal framework. Please disregard that. I simply need a textbox, followed by a button (i.e. an image link) which would trigger some jQuery as you did. That jQuery would then pop a modal to select a value. And upon submitting that modal, it would populate the textbox with the value chosen.
Coordinator
Aug 18, 2010 at 5:50 PM
If you look at the field example that I gave above, it should be apparent how to include any HTML around the rendered input element.
Aug 18, 2010 at 5:59 PM

Ah ok, great! I'll go ahead and get latest to utilize that new template property.