Thursday, April 26, 2012

SmartClient: Insert controls between radio items

Problem:

I was going through SmartClient forum and read one problem (here is the link) stating as:

Insert a select box in between the radio options.
In SmartClient whenever I use radio group, I specify a value map, all the radio options are displayed together (one after other) in order as they are mentioned in value map. 
Is there any way by which I can insert any other component in between these options? 
I want something like, 1st radio option then a select box, 2nd option then a select box and so on...

Solution:

I tried some of the options and played around some tweaks.  What I get is, if you keep the name of radio group item same and then pass on same item to your dynamic form control with different valueMap you can achieve this.  I understand, some thing hard to imagine without code :).  So, here we go ....

But wait :) .... don't worry I will share the code, but I just want to show the result first.

Result:



Code:

<HTML>
<HEAD>
<SCRIPT>var isomorphicDir = "../content/isomorphic/";</SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="../content/isomorphic/system/modules/ISC_PluginBridges.js"></SCRIPT>
<SCRIPT SRC="sc_common.js"></SCRIPT>

<!-- Isomorphic Skin -->
<SCRIPT SRC="../content/isomorphic/skins/SilverWave/load_skin.js"></SCRIPT>
</HEAD>

<BODY>
<!-- $Id: cm_admin.js 875 2006-11-17 23:34:46Z sverma $ . -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">



function t (form, item, value, oldValue) {
    item.clearValue ();
    alert (item.name+"---"+value);
}

isc.DynamicForm.create ({
    autoDraw: true,
    fields: [
        {
         name: "Radio",
         title: "Title One",
         type: "radioGroup",
         change: function (form, item, value, oldValue) {t (form, item, value, oldValue);},
         valueMap: ["Yes"]
         //valueMap: {"1":"Yes"}
         },
         {
         name: "Shailendra",
         defaultValue: "Enjoy"
         },
         {
         name: "Radio",
         title: "Title Two",
         type: "radioGroup",
         change: function (form, item, value, oldValue) {t (form, item, value, oldValue);},
         valueMap: ["No"]
         //valueMap: {"2":"No"}
         }
    ]
});



</SCRIPT>

</BODY>
</HTML>


 -- Enjoy !!

Let me know if you have any questions.

-shaILU
PS: I updated this function because after giving same name of the radio items it is not refreshing once all radio items are selected once.