What's New?

DataView with radio buttons

  1. #1
    Jan 26, 2015, 12:16 PM

    DataView with radio buttons

    Hi,

    I'm relatively new to ext.net. I need to implement a simple DataView, where there is a radio button underneath each item. Upon clicking the radio button, the item should be selected and highlighted.

    I'd appreciate if anyone should showed me how can this be done. This should be a simple and common task for ext users.

    I'm using ext.net version 1.2.0.

    Thanks in advance,
    Osama
    Last edited by osama; Jan 26, 2015 at 12:29 PM.
  2. #2
    Jan 26, 2015, 1:08 PM
    Here is some code that I'm using:

    .images-view .thumb img
    {
        height: 35px;
        width: 35px;
    }
    
    .images-view .thumb-radio-wrap
    {
        float: left;
        width: 40px;
        margin: 4px;
        margin-right: 0;
        padding: 2px;
        text-align: center;
    }
    
    .images-view .thumb-wrap
    {
        width: 36px;
        margin: 0px;
        margin-right: 0;
        padding: 4px;
        text-align: center;
        cursor: pointer;
    }
    
    .images-view .radio-wrap
    {
        width: 36px;
        margin: 0px;
        margin-right: 0;
        padding: 4px;
        text-align: center;
    }
    
    .images-view .thumb-wrap span
    {
        display: block;
        overflow: hidden;
        text-align: center;
    }
    
    .images-view .x-view-over
    {
        border: 1px solid #dddddd;
        padding: 4px;
        cursor: hand;
    }

    .images-view .x-view-selected 
    {
        border: 1px solid #22bb22;
        background: #efefef;
        padding: 4px;
    }
    
    .images-view .x-view-selected .thumb
    {
        background: transparent;
    }
    
    .images-view .loading-indicator
    {
        font-size: 11px;
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 20px;
        margin: 10px;
    }
    .x-editable
    {
        width: 40px;
        height: 30px;
    }
    
    .Delete :hover
    {
        color: Red;
    }
    .Delete
    {
        margin: 0px !important;
    }
    
    .images-view .x-panel-body
    {
        background: white;
        font: 11px Arial, Helvetica, sans-serif;
    }

	<ext:DataView ID="dvViewAttachments" runat="server" StoreID="storeAttachments" MultiSelect="true"
		OverClass="x-view-over"  ItemSelector="div.thumb-wrap" AllowDomMove="true" meta:resourcekey="dvViewAttachmentsResource1">
        	<Template ID="Template4" runat="server">
			<Html>
				<tpl for=".">
					<div class="thumb-radio-wrap">
						<div class="thumb-wrap" id="{Icon}" width="30%" title="{name}" >
							<div class="Delete" onclick="DeAttachCapturedDocument('{filepath}', '{documentid}' , '{objectid}','NOTCustomFieldDeAttachment','')"><span ><font size="3" face="Matura MT Script Capitals">x</font></span></div>
							<div class="thumb" runat="server" onclick="ViewCapturedDocument('{filepath}', '{name}' , '{documentid}', '{documenttype}', '{objectid}', '{categoryid}', '{typeid}')"><img src="{url}" title="{name}"></div>
							<span class="x-editable"  onclick="ViewCapturedDocument('{filepath}', '{name}' , '{documentid}', '{documenttype}', '{objectid}', '{categoryid}', '{typeid}')">{shortName}</span>
						</div>
						<div class="radio-wrap">
							<input type="radio" name="select-attachment" />
						</div>
					</div>

				</tpl>
				<div class="x-clear"></div>
			</Html>
		</Template>
		<PrepareData Fn="prepareData" />
	</ext:DataView>
    Last edited by osama; Jan 27, 2015 at 12:15 PM.
  3. #3
    Feb 22, 2015, 10:33 AM
    I found a solution that uses an image of a checkbox instead of a checkbox/radio button.

    Below is the code I want to share with anyone with a similar requirement:

        .images-view .thumb img
    {
        height: 35px;
        width: 35px;
    }
    
    .images-view .thumb-wrap
    {
        float: left;
        width: 60px;
        margin: 0px;
        margin-right: 10px;
        padding: 0px;
        cursor: pointer;
        border: 1px solid #fafafa;
    }
    
    .images-view .thumb-wrap .select-area
    {
        display: inline-block;
        width: 20px;
        text-align: center;
        background: url("../../Images/checkbox-unchecked.png") no-repeat;
        background-position: left center;
    }
    
    .images-view .thumb-wrap.x-view-selected .select-area
    {
        background: url("../../Images/checkbox-checked.png") no-repeat;
        background-position: left center;
    }
    
    .images-view .thumb-wrap .main-area
    {
        display: inline-block;
        width: 40px;
        text-align: center;
    }
    
    .images-view .thumb-wrap span
    {
        display: block;
        overflow: hidden;
        text-align: center;
    }
    
    .images-view .x-view-over
    {
        /*
        border: 1px solid #dddddd;
        padding: 4px;
        cursor: hand;
        */
    }
    
    .images-view .x-view-selected 
    {
        border: 1px solid #22bb22;
        background: #efefef;
    }
    
    .images-view .x-view-selected .thumb
    {
        background: transparent;
    }
    
    .images-view .loading-indicator
    {
        font-size: 11px;
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 20px;
        margin: 10px;
    }
    
    .images-view .x-editable
    {
        width: 40px;
        height: 23px;
    }
    
    .Delete :hover
    {
        color: Red;
    }
    <ext:DataView ID="dvViewAttachments" runat="server" StoreID="storeAttachments" MultiSelect="true" OverClass="x-view-over" ItemSelector="div.thumb-wrap" AllowDomMove="true">
    <Template ID="Template4" runat="server">
        <Html>
            <tpl for=".">
                <div class="thumb-wrap" id="{Icon}" width="30%" title="{name}" >
                    <div class="select-area">
                        &nbsp;
                    </div>
                    <div class="main-area">
                        <div class="Delete" onclick=""><span ><font size="3" face="Matura MT Script Capitals">x</font></span></div>
			<div class="thumb" runat="server" onclick=""><img src="{url}" title="{name}"></div>
                        <span class="x-editable"  onclick="">{shortName}</span>
                    </div>
		</div>
            </tpl>
            <div class="x-clear"></div>
        </Html>
    </Template>
</ext:DataView>

Similar Threads

  1. [CLOSED] Could you please give me an example about working with radio buttons?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 03, 2010, 6:20 PM
  2. [CLOSED] [1.0] Radio buttons that appear as buttons
    By MP in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 24, 2010, 6:28 PM
  3. Align Radio buttons horizantally
    By ajaybabu.maddinani in forum 1.x Help
    Replies: 2
    Last Post: Feb 23, 2010, 8:52 AM
  4. using image with radio buttons
    By pearl in forum 1.x Help
    Replies: 0
    Last Post: May 23, 2009, 5:09 AM
  5. [CLOSED] Dynamic Creation of Radio Buttons within Radio Group
    By Steve in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 04, 2009, 1:13 PM

Tags for this Thread

Posting Permissions