concdtional img src inside grdiview image template - image

I m using image template inside a gridview like this
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div1<%# Eval("bank_id") %>');">
<img alt="" id="imgdiv1<%# Eval("bank_id") %>" width="20px" border="0" src="../Images/Plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
here i am using src="../Images/Plus.gif" but i want to set to path conditionaly.like if Eval("bank_id") is -1 then there should no image displayed or path to b set.is there any one help me to set the conditonal image path

you can small trick here. instead of bind your data directly to your image you could call some function that 'll send to it directly the data from DB then in that function you check for that value and based on what you need you return the correct string(correct image src).
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div1<%# Eval("bank_id") %>');">
<img alt="" id='<%#getImageSRC(int.Parse(Eval("bank_id").ToString())) %>' width="20px" border="0" src="../Images/Plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
then in your cs file:
public string getImageSRC(int bankId)
{
if (bankId < 0)
return "";
else
return "/bank-images/" + bankId + ".jpeg";//return here the correct image path
}

Related

How Can I get Cell Values from Telerik RadGrid

I am having a problem getting the values from the Radgrid auto generated Insert form.
I have my radgrid setup as shown in code shown below. I am only doing inserts and deletes and am using the edit form that is automatically opened when I click the add new record button.
<div id ="specialrequestGrid" class="container">
<div class="row">
<div class="col-md-12">
<telerik:RadAjaxPanel runat="server">
<telerik:RadGrid ID="SpecialRequests" runat="server" OnInsertCommand="SpecialRequests_InsertCommand"
OnUpdateCommand="SpecialRequests_UpdateCommand"
OnItemCommand="SpecialRequests_ItemCommand"
AllowAutomaticInserts="false"
AutoGenerateColumns="false"
OnNeedDataSource="SpecialRequests_NeedDataSource">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="CaseId_FK, ReqId" Font-Size="Medium" NoMasterRecordsText="No Special Requests">
<CommandItemSettings AddNewRecordImageUrl="../Images/Add.png" />
<Columns>
<telerik:GridTemplateColumn HeaderText="Request Date" UniqueName="DateTemplateColumn">
<ItemTemplate>
<asp:Label ID="DateEditItemTemplate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Date","{0:MM/dd/yyyy}") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadDatePicker ID="dpRideDate" runat="server" DateInput-DateFormat="MM/dd/yyyy" DbSelectedDate='<%# Bind("Date") %>' MinDate="1999/1/1" UniqueName="dpRideDate">
</telerik:RadDatePicker>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Requested By ID" UniqueName="RequestorTemplateColumn">
<ItemTemplate>
<asp:Label ID="Requestor" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "RequesterEID_FK") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<button id="btnRequestEID" type="button" class="btn" data-toggle="modal" data-target="#myModal" >--Please Select--</button>
<div>
<input type="text" Id="TxtSPRequestName" disabled />
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Request Reason" UniqueName="RequestReason">
<ItemTemplate>
<asp:Label ID="ItemTemplatelblRequestReason" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblRequestReason" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>' Visible="false">
</asp:Label>
<asp:TextBox runat="server" ID="txtReason" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>'></asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn DataField="IsWOO" HeaderText="Is Out of Order" UniqueName="ISWOO"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
</div>
</div>
</div>
This is the screenshot of the auto generated form I get when I click the add new record
When I click the Insert link on the form I run this C# code
protected void SpecialRequests_InsertCommand(object sender, GridCommandEventArgs e)
{
GridEditableItem editedItem = e.Item as GridEditableItem;
UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
T_SpecialRequests t = new T_SpecialRequests();
t.IsWOO = (userControl.FindControl("IsWOO") as CheckBox).Checked;
}
Note the IsWOO is a control in the Radgrid that I did not show in the Screenshot. When I click the save link the Insert Function, shown above Runs but I get the following error:
Unhandled exception at line 1, column 123034 in http://localhost:52028/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81
0x800a139e - JavaScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Object reference not set to an instance of an object.
The strange part is I use this same code in several other projects without any problems. The only difference is this is the first time I have used this auto generated form. I don't want to use the another type of control for this Radgrid due to such a small number of fields, only have 4 control.
I have spent several hours searching for an answer but just can't find the solution.
How can I get the values from this auto generated form?
You can use
t.IsWOO = (editedItem["ISWOO"].Controls[0] as CheckBox).Checked;
or
var newValues = new Dictionary<string, object>();
e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);
t.IsWOO = (bool)newValues["IsWOO"];
The first approach references the control by index because unfortunately it has no ID.
The second one is a bit verbose for just one property but I would surely prefer it if there were more properties.
While #Michal Nawrocik was correct I found that I still had some problems reading all of the controls in the Radgrid. I was able to track down the answer on the Telerik forum and found that you have to use different code based on the Column Type. I had 2 different type of columns.
the code below shows what I used to get all of the control values on the form
protected void SpecialRequests_InsertCommand(object sender, GridCommandEventArgs e)
{
try
{
using(LatentEntities db = new LatentEntities())
{
if (e.Item is GridEditableItem)
{
T_SpecialRequests T = new T_SpecialRequests();
var editableItem = ((GridEditableItem)e.Item);
RadDatePicker picker = (RadDatePicker)editableItem.FindControl("dpDate"); // in EditItem Template
DateTime dt = Convert.ToDateTime(picker.DbSelectedDate);
T.Date = dt;
TextBox Reason = (TextBox)editableItem.FindControl("txtReason"); //This Control was in an Edit Item Template
T.Reason = Reason.Text;
T.IsWOO = (editableItem["ISWOO"].Controls[0] as CheckBox).Checked; //In CheckBox Column
}
}
And if the control is in a Telerik:GridtboundColumn I used this code:
string strFirstName = (editableItem["firstname"].Controls[0] as TextBox).Text;

Please tell me how to create a toggle out of an image?

I want multiple images in a window. When I click on a image I want toggle out showing some info. I want this on all my images.
You didn't post the technologies you're using so I assume you are using jQuery and html:
Here is the html example:
<div>
<img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
<br/>
<text style="display:none;" id="img1">Image1 ......</text>
<br/><br/>
<img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
<br/>
<text style="display:none" id="img2" class="text" hide>Image2 </text>
<br/><br/>
<img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
<br/>
<text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>
​and here is the jQuery code which handle the toggling process.You need to use toggle method based on the id of any text tag in the html code inside onclick function to toggle it:
$(function () {
$('.img').on('click', function () {
var txtId = $(this).attr('data-imgid');
$('#' + txtId).toggle();
});
});
You can see live demo here:
http://jsfiddle.net/gtU56/342/

How to create image attributes in HippoCMS 7.9?

I'm currently working on a hippo component within (7.9) and I need the image link, alt, and title:
Component Method:
public HippoGalleryImageSetBean getImage() {
return getLinkedBean(Constants.NS_FLD_IMAGE,
HippoGalleryImageSetBean.class);
}
I would like to write my Component JSP like this below:
<c:forEach var="item" items="${ document.links }"
varStatus="loopStatus">
<hst:link var="image"hippobean="${ item.image.original }" />
<li><img
src="${ image }"
alt="${ image.alt }"
title="${ image.title} ">
</li>
</c:forEach>
The 'alt' and 'title' are defined on the imageset itself and not in the image variants. ${image} in your case is the link generated to an image and not the image object itself.
Try it with:
<c:forEach var="item"
items="${ document.links }"
varStatus="loopStatus">
<hst:link var="imagelink"hippobean="${ item.image.original }" />
<li><img src="${ imagelink }"
alt="${ item.image.alt }"
title="${ item.image.title} ">
</li>
</c:forEach>

Grails image url loads but image doesn't load?

In grails, images url loads fine but image doesn't display...
def thumbphoto = {
response.setContentType('image/jpeg')
response.setHeader('Cache-control', 'no-cache')
if(params.id){
userId = params.id
}
if(params?.id != null && !(params?.id.empty)){
params.maxWidth?: 50.00
params.maxHeight?: 50.00
response.outputStream << imageProxyService.loadThumbnailImage(params.id, securityService.passwordEncoder(userId.toString()))
}
}
User has many images
This is the gsp view where i am trying to load and display images along with status updates.
<g:each in="${statusList}" status="i" var="status" status="i">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<tr>
<td>
<g:if test="${status.photo != null && !(status.photo.empty)}" >
<img id="profile_photo" src="${createLink(controller:'image', action:'thumbphoto', id:status.photo, params:[maxWidth:50.0,maxHeight:50.0,id:status.id])}" alt="" title="" />
</g:if>
<g:else>
<img id="profile_photo" src="${resource(dir:'images', file:'no_image_blue.gif')}" alt="No Image" width="50" height="50"/>
</g:else>
</td>
<td>${status.id}: ${status.message}</td>
</tr>
</tr>
</g:each>
Install Firebug, and go to the Net tab.
You should see all the HTTP requests and their statuses.
You're likely get a 404 for your image, check its location under your webapps folder...
Again Firebug will give you all the hints and solutions.
Use g:img.
<g:img dir="/image/showImage/9921355add3b115766ad41effdf000db9e461570.jpg" alt=""/>

Hiding DIV in TPL file based on if an image exists?

<div><div style="margin-left:67px"><table style="border:1px #80A0BB solid;" padding="5px"><tr><td><img src="{$smarty.const.DOC_ROOT}/images/thumbs/{$link.ID}-300x225.png" alt="" /></td></tr></table></div></div>
I'm trying to hide a div based on if an image exists on my server. How would I check to see if an image exists and hide the div if it doesn't exist? Or is there a better way to do this?
The easiest way is just to use write a function in PHP and then use it in Smarty.
In PHP:
function linkImageExists($link){
//Check to see if image for link exists and return true if it does.
// otherwise:
return false;
}
In Smarty template:
{if linkImageExists($link)}
<div>
<div style="margin-left:67px">
<table style="border:1px #80A0BB solid;" padding="5px">
<tr>
<td>
<a href="{$link.URL|trim}" target="_blank">
<img src="{$smarty.const.DOC_ROOT}/images/thumbs/{$link.ID}-300x225.png" alt="" />
</a>
</td>
</tr>
</table>
</div>
</div>
{else}
{* image doesn't exist *}
{/if}
You may want to consider turning $link into an object and then you can call functions on it, rather than having to use global functions which may producer cleaner code in the future.

Resources