We're hoping to use jsplumb to draw links between items in two parallel, scrollable lists - say, in divs with overflow=auto. If two items are linked, then the list is scrolled so that one of them is scrolled out of view, the part of the jsplumb link that's outside the div is still drawn. Below is an example page (needs a jquery js file and jsplumb js file in the same directory, as per the script includes shown):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.jsPlumb-1.3.8-all-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#leftdiv').scroll(function () {
jsPlumb.repaintEverything();
});
$('#rightdiv').scroll(function () {
jsPlumb.repaintEverything();
});
jsPlumb.importDefaults({
// default drag options
DragOptions: { cursor: 'pointer', zIndex: 2000 },
EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}],
Endpoints: [["Dot", { radius: 2}], ["Dot", { radius: 2}]]
});
var allSourceEndpoints = [], allTargetEndpoints = [];
var connectorPaintStyle = {
lineWidth: 2,
strokeStyle: "#deea18",
joinstyle: "round"
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 2,
strokeStyle: "#2e2aF8"
};
var sourceEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#225588", radius: 2 },
isSource: true,
connector: ["Straight", { stub: 40}],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: connectorHoverStyle,
connectorHoverStyle: connectorHoverStyle,
dragOptions: {}
};
var targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#558822", radius: 2 },
hoverPaintStyle: connectorHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true
};
_addEndpoints = function (toId, sourceAnchors, targetAnchors) {
if (sourceAnchors)
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID }));
}
if (targetAnchors)
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID }));
}
};
_addEndpoints("plumbleft", ["RightMiddle"]);
_addEndpoints("plumbright", null, ["LeftMiddle"]);
jsPlumb.connect({ uuids: ["plumbleftRightMiddle", "plumbrightLeftMiddle"] });
});
</script>
</head>
<body>
<div style="height: 100px">
</div>
<table >
<tr >
<td >
<div id="leftdiv" style="height: 200px; overflow: auto; ">
Here's some longer text<br />
Here's some text<br />
Here's some text<br />
<span id="plumbleft">linked</span><br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
</div>
</td>
<td>
<div id="rightdiv" style="height: 200px; overflow: auto">
Here's some longer text<br />
Here's some text<br />
Here's some text<br />
<span id="plumbright">linked</span><br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
Here's some text<br />
</div>
</td>
</tr>
</table>
</body>
</html>
We've tried various z-index tricks to clip/hide the lines (or parts of lines) that shouldn't be shown, but without any luck. Can anyone suggest how to deal with it, or suggest another approach, using jsplumb or otherwise?
Thanks in advance for any thoughts.
i created a jsFiddle from your code:
http://jsfiddle.net/sporritt/fpbqd/10/
..it is possible to do what you want. But you have to make that mask div absolutely positioned, which may get tricky in your final UI. Anyway. It's perhaps a little hacky but it can be done.
Related
I'm having trouble getting my images to work in my phonegap build.
I've read that the absolute paths might not work so i've tried both absolute and relative paths, still no luck.
I'm including the images like this:
<Col key={1} xs={3}>
<Image src='/tire_selected.png' responsive />
</Col>
or relative
<Col key={1} xs={3}>
<Image src='tire_selected.png' responsive />
</Col>
equals
<img class="img-responsive" src="tire_deselected.png" data-reactid=".0.0.1.0.0.0.0.1.1.0.0.$4.0">
Col & Image is bootstrap helper components using bootstrap-react. And this all works fine in the web view, but not when built with phonegap. It should though, the source is already compiled and without errors in both cases.
Following is my config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.exampleapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="support#example.com" href="http://www.example.com">
Author
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.geolocation" />
<icon src="icon.png" />
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
Git repository:
app.js
vendor.js
config.xml
favicon.ico
humans.txt
index.html
robots.txt
tire_deselected.png
tire_selected.png
Icon.png works fine though. I have no idea whats causing the other images to not work. Any help would be appreciated!
Edit
I've tried setting content-security-policy, if that was the issue that i weren't able to set img-src and display images via javascript.
<meta http-equiv="Content-Security-Policy" content="
default-src http://10.3.10.104/ 'self' * 'unsafe-inline';
style-src http://10.3.10.104/ 'self' * 'unsafe-inline';
img-src http://10.3.10.104/ 'self' * 'unsafe-inline';
script-src http://10.3.10.104/ 'self' * 'unsafe-inline';">
But still no luck
file:///tire_deselected.png net::ERR_FILE_NOT_FOUND
There file is there, because when inserting an img-element into index.html it's displayed.
I even tried accessing it by the path that's displayed in the source folder running developer tools.
file:///data/user/0/com.oas.exampleapp/files/downloads/app_dir/tire_deselected.png
Doesn't work either, i'm starting to think that phonegap is broken, atleast works very poorly in combination with react.
After compilation the build.phonegap.com put your source files into "www" directory.
You can access your local image file using the following path "/android_asset/www/"
<image src='/android_asset/www/tire_selected.png' responsive />
If your image is placed in a subdirectory inside the root direcctory then you can use the following:
<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />
Note: replace the "sub-direcctory" with your own if there is any in which the local image file is contained.
I added an img tag to index.html and set the src attribute to "images/logo.png" and it loads without issue.
...
<body>
<div id="root"></div>
<img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor.bundle.js"></script>
<script src="js/app.bundle.js?v=2"></script>
</body>
</html>
I have a react component with an img tag and the same src value "images/logo.png"
...
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; padding-top: 0px; letter-spacing: 0px; font-size: 24px; font-weight: 400; color: rgb(48, 48, 48); height: 64px; line-height: 64px; flex: 1 1 0px; text-align: center;">
<img id="header-logo" src="images/logo.png" style="width: 105px; margin-top: 16px;">
</div>
...
The img in the react component doesn't load; 404. Yet this equates to true
document.getElementById('footer-logo').src === document.getElementById('header-logo').src
How is it that one of the images loads and the other doesn't? Does it have something to do with the react component being loaded into the DOM dynamically or react's virtual DOM?
The src attributes equate to file:///images/logo.png. IF I set the src attribute on the #header-logo like this, it loads:
document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png"
Hope this provides more info to this very bizarre behaviour.
Hope this helps. So I also had the problem.
What I did was, was to create a another folder /images/ (duplicate) and still use my images I imported via react via my /static/components/images folder. You can take it a bit further by adding conditionals for staging or live.
So the answer is here.:
import Logo from '../images/logo.png';
<img src={`./${Logo}`} alt="Logo" />
Full example.:
import React, { Component } from 'react';
import Logo from '../images/logo.png';
class Header extends Component {
render() {
return(
<div className="logo mt-3">
<img src={`./${Logo}`} alt="Logo" />
</div>
);
}
}
export default Header;
Got the idea from this post.: Images not showing in PhoneGap Build application
Trying Kendo UI JSP editable grid. Grid is working with few problems.
(Version : Kendo UI v2015.3.1111 )
Export: Even with allPages="allPages", its exporting only current
page.
After CREATE, GRID is not updated with server response which has user createDate. Same with Update, grid not updated with update date
even though the updated user object is passed.
Grid shows user added even if it failed in the backend. How to handle error response for create /update and show the failed message ?
Any help greatly appreciated.
Controller create part:
#RequestMapping(value = "/user/create", method = RequestMethod.POST)
public #ResponseBody User create(#RequestBody Map<String, Object> model) {
log.debug("create");
User target = new User();
target.setUserName((String)model.get("UserName"));
target.setFirstName((String)model.get("firstName"));
target.setLastName((String)model.get("lastName"));
target.setOpenDate(getDateFromStr((String)model.get("openDate")));
target.setEditDate(getDateFromStr((String)model.get("editDate")));
User user = userDao.createUser(target);
log.info("user"+user.getUserId()+user.getOpenDate());
return user;
}
JSP PART:
<c:url value="/user/create" var="createUrl" />
<c:url value="/user/read" var="readUrl" />
<c:url value="/user/update" var="updateUrl" />
<c:url value="/user/destroy" var="destroyUrl" />
<c:url value="/user/saveexcel" var="saveExcelUrl" />
<c:url value="/user/savepdf" var="savePdfUrl" />
<kendo:grid name="grid" pageable="true" sortable="true" height="750px" filterable="true">
<kendo:grid-scrollable/>
<kendo:grid-pdf fileName="KendoUIGridExport.pdf" allPages="allPages" proxyURL="${savePdfUrl}"/>
<kendo:grid-excel fileName="KendoUIGridExport.xlsx" allPages="allPages" proxyURL="${saveExcelUrl}" />
<kendo:grid-editable mode="popup" confirmation="Are you sure you want to remove this item?"/>
<kendo:grid-toolbar>
<kendo:grid-toolbarItem name="create"/>
<kendo:grid-toolbarItem name="excel"/>
<kendo:grid-toolbarItem name="pdf"/>
</kendo:grid-toolbar>
<kendo:grid-columns>
<kendo:grid-column title="User Name" field="userName" width="120px"/>
<kendo:grid-column title="First Name" field="firstName" width="120px" />
<kendo:grid-column title="Last Name" field="lastName" width="120px" />
<kendo:grid-column title="Open Date" field="openDate" width="120px" format="{0:MM/dd/yyyy}" />
<kendo:grid-column title="Edit Date" field="editDate" width="120px" format="{0:MM/dd/yyyy}" />
<kendo:grid-column title=" " width="150px">
<kendo:grid-column-command>
<kendo:grid-column-commandItem name="edit" />
<kendo:grid-column-commandItem name="destroy" />
</kendo:grid-column-command>
</kendo:grid-column>
</kendo:grid-columns>
<kendo:dataSource pageSize="10" serverPaging="false" serverSorting="false" serverFiltering="false" serverGrouping="false" >
<kendo:dataSource-transport>
<kendo:dataSource-transport-create url="${createUrl}" type="POST" dataType="json" contentType="application/json"/>
<kendo:dataSource-transport-read url="${readUrl}" type="POST" dataType="json" contentType="application/json"/>
<kendo:dataSource-transport-update url="${updateUrl}" type="POST" dataType="json" contentType="application/json" />
<kendo:dataSource-transport-destroy url="${destroyUrl}" type="POST" dataType="json" contentType="application/json" />
<kendo:dataSource-transport-parameterMap>
<script>
function parameterMap(options,type) {
return JSON.stringify(options);
}
</script>
</kendo:dataSource-transport-parameterMap>
</kendo:dataSource-transport>
<kendo:dataSource-schema>
<kendo:dataSource-schema-model id="userId">
<kendo:dataSource-schema-model-fields>
<kendo:dataSource-schema-model-field name="userName" type="string" >
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="firstName" type="string">
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="lastName" type="string">
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="openDate" type="date" editable="false" />
<kendo:dataSource-schema-model-field name="editDate" type="date" editable="false"/>
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:grid>
Resolved myself: For pdf, allPages="true" works.
Grid refresh: FOR requestEnd event
function onRequestEnd(e) {
if (e.type == "create") {
e.sender.read();
}
else if (e.type == "update") {
e.sender.read();
}
}
I am trying to add inside custom grid within template but I cannot see these links in output along with other grid data ....
<cc0:Grid ID="StaffItemList" runat="server" FolderStyle="~/Styles/Grid" AutoGenerateColumns="false"
Width="100%" PageSizeOptions="5,10,20,50,100,-1" AllowFiltering="true" FilterType="ProgrammaticOnly"
AllowAddingRecords="false">
<Columns>
<cc0:CheckBoxSelectColumn ShowHeaderCheckBox="true" Width="50" ControlStyle-CssClass="UserInRoleGrid"></cc0:CheckBoxSelectColumn>
<cc0:Column DataField="id" HeaderText="ID" Visible="true" />
<cc0:Column DataField="loginid" HeaderText="loginid" Width="150" />
<cc0:Column DataField="forenames" HeaderText="forenames" />
<cc0:Column DataField="surnames" HeaderText="surnames" />
<cc0:Column DataField="gender" HeaderText="gender" />
<cc0:Column DataField="email" HeaderText="email" />
<cc0:Column DataField="deleted" HeaderText="deleted" />
</Columns>
<Templates>
<cc0:GridTemplate runat="server" ID="AddUserToRoleLink">
<Template>
addRole
</Template>
</cc0:GridTemplate>
</Templates>
</cc0:Grid>
I have found asnswer; code as following....
<cc0:Grid ID="StaffItemList" runat="server" FolderStyle="~/Styles/Grid" AutoGenerateColumns="false"
Width="100%" PageSizeOptions="5,10,20,50,100,-1" AllowFiltering="true" FilterType="ProgrammaticOnly"
AllowAddingRecords="false">
<Columns>
<cc0:Column DataField="id" HeaderText="ID" Visible="true"/>
<cc0:Column DataField="loginid" HeaderText="loginid" Width="150" />
<cc0:Column DataField="forenames" HeaderText="forenames" />
<cc0:Column DataField="surnames" HeaderText="surnames" />
<cc0:Column DataField="gender" HeaderText="gender" />
<cc0:Column DataField="email" HeaderText="email" />
<cc0:Column DataField="deleted" HeaderText="deleted" />
<cc0:Column DataField="Functions" HeaderText="deleted" >
<TemplateSettings TemplateId="AddUserToRoleControl"/>
</cc0:Column>
</Columns>
<Templates>
<cc0:GridTemplate runat="server" ID="AddUserToRoleControl">
<Template>
Add Role
</Template>
</cc0:GridTemplate>
</Templates>
</cc0:Grid>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$(".AddStaffToRoleLink").on("click", function () {
var selectedStaffID = $(this).attr("id");
alert("this is " + selectedStaffID);
});
});
</script>
Please suggest on how to show the hand symbol on mouse hover of the telerik radhtmlchart.AS of now im getting only pointer symbol on mouse hover.
<telerik:radhtmlchart runat="server" id="RadHtmlChartfirst" onclientseriesclicked="OnClientSeriesClickedfirst"
legend-appearance-position="Top" legend-appearance-visible="true" plotarea-xaxis-minorgridlines-visible="false"
plotarea-yaxis-minorgridlines-visible="false" plotarea-xaxis-majorgridlines-visible="false"
plotarea-yaxis-majorgridlines-visible="false" height="444" width="900">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
</telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
</telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="myValues3" Name="Name3">
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="myLabels">
</XAxis>
</PlotArea>
<Legend>
<Appearance Visible="true" Position="Bottom" />
</Legend>
<Appearance>
<FillStyle BackgroundColor="" />
</Appearance>
<ChartTitle Text="Reviewer Utilization Report">
</ChartTitle>
</telerik:radhtmlchart>
There is no built-in facility for that because this chart renders SVG and the cursor styles generally apply to HTML elements. I tried the following flimsy mouse event handling and it seems to kind of work though:
<telerik:RadHtmlChart runat="server" ID="chart" onmouseout="onmouseoutHandler();">
<ClientEvents OnSeriesHover="OnSeriesHover" />
<PlotArea>
<Series>
<telerik:ColumnSeries Name="first">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="second">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function OnSeriesHover(e) {
document.onmouseover = null;
if (e.series.name == "first") { //consider adding some conditions or removing them at all
e.preventDefault();
setTimeout(function () {
document.body.style.cursor = "pointer"
}, 50);
}
return false;
}
//attached to onmouseout of the chart wrapper to restore the cursor
//as soon as the mouse moves on the chart
function onmouseoutHandler(e) {
document.body.onmouseover = restoreCursor;
}
//the handler that restores the cursor for the page
function restoreCursor() {
document.body.style.cursor = "";
}
//resets the cursor
document.body.onmouseover = restoreCursor;
</script>
and I had to add this CSS to ensure my body element is large enough:
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}
In Telerik Control, how to get a radcombobox id?
For example, the below code gets the value of RadCombox1 Client ID. If there is 5 radcomboboxes in my page (sample.aspx), how to get the corresponding id DYNAMICALLY.........
{
var combo = $find("<%= RadComboBox1.ClientID %>");
}
Thanks in Advance,
Ganesan A
Added More :
Thanks for your quick reply. Am using Telerik Control in c#.
a) am using no of radcombobox, raddatepicker, radtimepicker and raddatetimpicker in one page like below
<telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoaded">
<telerik:RadPane ID="RadPane1" runat="server">
<telerik:RadComboBox ID="RadComboBox1" CssClass="cmb_bx" runat="server">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
<telerik:RadComboBox ID="ComboBox" CssClass="cmb_bx" runat="server">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="SupplierName" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="CorporateCode" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="PartNo" runat="server">
</telerik:RadDatePicker>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server">
</telerik:RadPane>
</telerik:RadSplitter>
b) when i scroll the page, radcombobox or any other control which i had mentioned above also scrolling with the page. it doesn't hide. So i am using the below javascript coding
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnClientLoaded(sender, eventArgs)
{
var pane = sender.getPaneById("<%= RadPane1.ClientID %>");
var contentElement = pane.getContentElement();
contentElement.onscroll = function () {
var combo = $find("<%= RadComboBox1.ClientID %>");
alert(combo.get_id());
var dtpkr = $find("<%= RadDatePicker1.ClientID %>");
var dropDown = combo.get_dropDownVisible();
var dropDown1 = dtpkr.isPopupVisible();
if (dropDown) {
combo.hideDropDown();
}
else if (dropDown1) {
dtpkr.togglePopup();
}
};
}
</script>
</telerik:RadCodeBlock>
c) This will hide RadcomboBox1 and RadDatePicker1 only. How can i write the code for more than one Radcombobox and Raddatepicker in one page.
Thanks
Ganesan A
You should specify what language, but this might help. This is for C#.
for (int i = 1; i < 6; i++)
{
string comboBoxName = "RadComboBox" + i.ToString();
var comboObject = (this.FindName(comboBoxName) as RadComboBox); //this returns the object if the name is found
//access the clientID
if( comboObject != null)
var clientid = comboObject.ClientID;
}
Since you already know what to do with the RadComboBoxes and RadDatePickers once you have them, I'll simply point out how to grab all the RadControls of a particular type and let you augment your code.