I wanna get client side event for Row double click in Infragistics ultragrid control.
A server side event handler "OnDblClick" is available, but I hope there is some way in client side also.
Thanks for any help.
This is our working code for CellClickEvents:
<igtbl:UltraWebGrid ID="ultGridScenario">
<DisplayLayout>
<ClientSideEvents DblClickHandler="ultGridScenario_CellDblClick" CellClickHandler="ultGridScenario_CellClickHandler"></ClientSideEvents >
</DisplayLayout>
</igtbl:UltraWebGrid>
added the dblclick handler attribute and value as an example.
function ultGridScenario_CellClickHandler(gridName, CellID, button) {
if (button == 0) {
var grid = igtbl_getGridById(ultGridScenario.ClientID);
var row = igtbl_getRowById(CellID);
var rowID = row.Id;
var rowIndex = rowID.substr(rowID.lastIndexOf("_") + 1, rowID.length - rowID.lastIndexOf("_"));
var cellIndex = CellID.substr(CellID.lastIndexOf("_") + 1, CellID.length - CellID.lastIndexOf("_"));
if (cellIndex == 0) {
return false;
}
else {
if (rowIndex == 7) {
ShowScenarioComments(gridName, cellIndex);
}
else {
return false;
}
}
}
}
Also when I ask VS2010 for intelli-sense for the ClientSideEvents Tag, I get a long list of events.
Using Infragistics4 10.2.20102.1011
Some additional Reference:
http://blogs.infragistics.com/forums/p/43398/238276.aspx
Related
I'm a complete beginner regarding the Full Calendar, so apologies for a possible simple question.
I am trying to revert a drop from an External Event. If I use the revertFunc(), the event snaps back to it's original position in the list but the event is still on the calendar until it is refreshed. Ideally I would like it to disappear as soon as the dialog box is closed. This is the code
drop: function(date, jsEvent, ui, resourceId)
{
var tag = $(this).data('event').tag;
var eventDate = $(this).data('event').projectDate;
var calDate = date.format();
if (tag == PSTag)
{
if(eventDate != calDate)
{
alert('You must drop the event on the correct date');
revertFunc();
return;
}
var eventObjectId = $(this).data('event').schWork;
}
if (tag == WOTag)
{
var eventObjectId = $(this).data('event').workorder;
}
var title = $(this).data('event').title;
alert(tag);
updateCalendarEvent(eventObjectId, date.format(), resourceId, tag, title);
if (tag != PHTag)
{
$(this).remove();
}
setupDraggableEvents();
}
Many thanks for any assistance
I have a web form which load 100 000 of data from the database.I Have 50 dropdown which is populated with respect to selectedindex change of dropdown .so to bind dropdown i am using ajax code .
I have written nearly about 200 line of ajax code in a separate js file.I am using 3 tier artitecture .I am not returning dataset from the bal class, am returning generic class to bind gridview.also i have created a class to bind the gridview.Also I am not using any update panel.
Is this approach will improve my performance.??
But there is a problem for me,i have to write code in js file to bind dropdown like this.
function GetAppStoreLnk(id) {
var txtnameid = document.getElementById(id);
CreateXmlHttp();
var requestUrl = "Default2.aspx?id="+txtnameid+"";
if (XmlHttp) {
XmlHttp.onreadystatechange = function() { getschemename(txtnameid) };
XmlHttp.open("GET", requestUrl, true);
XmlHttp.send(null);
}
}
function getschemename(id)
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4) {
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttp.status == 200) {
var strData = XmlHttp.responseText;
if(strData != "") {
var arrscheme = strData.split("|");
id.length = 0;
for(i=0; i<arrscheme.length-1; i++) {
var strscheme = arrscheme[i];
var arrschnm = strscheme.split("~");
id.options[i] = new Option();
id.options[i].value = arrschnm[0];
id.options[i].text = arrschnm[1];
}
} else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "Scheme Name is not available";
}
document.body.style.cursor = "auto";
}
else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "server is not ready";
document.body.style.cursor = "auto";
}
}
}
but if i make class to bind the dropdown this will reduce my js file code line .How will i find the ID of the dropdown in the different page ie Default2.aspx .
Please help me .
How will i find the ID of the dropdown in the different page ie Default2.aspx .??Also i want dont want to use usercontrol or masterpage.
I don't understand your question. You are trying to access the Asp.net drop down in page Default.aspx in the page Default2.aspx right?
Could you please clarify your requirement?
I hope someone knows the answer to this as I am very new to using Telerik controls. Here is the problem, I have a requirement that says that I have to set the background color for a control attached to a validation control if the IsValid flag was set on the validation control. An earlier requirement that I had may be affecting this as well, it was set focus to the control based on the SetFocusOnError="true".
All of the controls are contained in a asp:UpdatePanel and the page has a master page set.
So what I have done is the following to set focus I overrode the Validate function on the System.Web.UI.Page class as so:
public override void Validate(string group)
{
base.Validate(group);
// get the first validator that failed
var validator = GetValidators(group)
.OfType<BaseValidator>()
.FirstOrDefault(v => !v.IsValid);
// set the focus to the control
// that the validator targets
if (validator != null)
{
//Check to see if SetFocusOnError was set.
if (validator.SetFocusOnError == true)
{
Control target = validator
.NamingContainer
.FindControl(validator.ControlToValidate);
if (target != null)
target.Focus();
}
}
}
This works and sets focus to the control. The next thing that I did was the following inline in my webpage:
var OriginalValidatorUpdateDisplay = null;
if (typeof (ValidatorUpdateDisplay) == 'function') {
OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NewValidatorUpdateDisplay;
}
function NewValidatorUpdateDisplay(val) {
OriginalValidatorUpdateDisplay(val);
ValidateControls();
}
function ValidateControls() {
if (window.Page_Validators) {
for (var vI = 0; vI < Page_Validators.length; vI++) {
var vValidator = Page_Validators[vI];
if (vValidator.isvalid) {
$("#" + vValidator.controltovalidate).removeClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().removeClass("error");
}
}
else {
$("#" + vValidator.controltovalidate).addClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().addClass("error");
}
}
}
}
}
However, when you load the page and submit the page for validation the first time the css doesn't change, but if you do it again it does. Oh and the AddClass is just adding
.error .riTextBox
{
background-color: lightpink !important;
z-index:6001;
}
to the control.
Has anyone worked encountered this before?
Oh I should also note that if I remove the Telerik controls and use asp textbox controls everything works as it should but I can't remove the Telerik controls from the project.
I have an AutoCompleteExtender from the Ajax Control Toolkit. I need to have a heading in the dropdown list that shows how many items found, but it should not be selectable as an item.
I have tried this using jQuery, but even when I just add as a div, it is still selected as an item into the text box when I click on it:
function clientPopulated(sender, e) {
var completionList = $find("AutoCompleteEx").get_completionList();
var completionListNodes = completionList.childNodes;
for (i = 0; i < completionListNodes.length; i++) {
completionListNodes[i].title = completionListNodes[i]._value.split(':')[2];
}
var resultsHeader;
if(completionListNodes.length==1000)
resultsHeader = 'Max count of 1000 reached.<br/>Please refine your search.';
else if(completionListNodes.length>0)
resultsHeader = completionListNodes.length + ' hits.';
else
resultsHeader = msg_NoObjectsFound ;
jQuery(completionListNodes[0]).before('<div>' + resultsHeader + '</div>');
}
Add OnClientItemSelected and OnClientShowing events handlers and try script below:
function itemSelected(sender, args) {
if (args.get_value() == null) {
sender._element.value = "";
}
}
function clientShowing() {
var extender = $find("AutoCompleteEx");
var optionsCount = extender.get_completionSetCount();
var message = "";
if (optionsCount == 1000) {
message = 'Max count of 1000 reached.<br/>Please refine your search.';
}
else if (optionsCount > 0) {
message = optionsCount + " hits."
}
else {
message = "oops."
}
jQuery(extender.get_completionList()).prepend("<li style='background-color:#ccc !important;'>" + message + "</li>");
}
Added:
you even can do this without OnClientItemSelected handler:
function clientShowing() {
var extender = $find("AutoCompleteEx");
var oldSetText = extender._setText;
extender._setText = function (item) {
if (item.rel == "header") {
extender._element.value = "";
return;
}
oldSetText.call(extender, item);
};
var optionsCount = extender.get_completionSetCount();
var message = "";
if (optionsCount == 1000) {
message = 'Max count of 1000 reached.<br/>Please refine your search.';
}
else if (optionsCount > 0) {
message = optionsCount + " hits."
}
else {
message = "oops."
}
jQuery(extender.get_completionList()).prepend("<li rel='header' style='background-color:#ccc !important;'>" + message + "</li>");
}
We can give a better answer if you post the output html of your autocomplete control. Anyway if its a dropdown control;
jQuery(completionListNodes[0]).before('
<option value="-99" disabled="disabled">your message here</option>'
);
The answer by Yuriy helped me in solving it so I give him credit although his sollution needed some changes to work.
First of all, the clientShowing event (mapped by setting OnClientShowing = "clientShowing" in the AutoExtender control) is executed on initialization. Here we override the _setText method to make sure nothing happens when clicking on the header element. I have used the overriding idea from Yuriy's answer that really did the trick for me. I only changed to check on css class instead of a ref attribute value.
function clientShowing(sender, e) {
var extender = sender;
var oldSetText = extender._setText;
extender._setText = function (item) {
if (jQuery(item).hasClass('listHeader')) {
// Do nothing. The original version sets the item text to the search
// textbox here, but I just want to keep the current search text.
return;
}
// Call the original version of the _setText method
oldSetText.call(extender, item);
};
}
So then we need to add the header element to the top of the list. This has to be done in the clientPopulated event (mapped by setting OnClientPopulated = "clientPopulated" in the AutoExtender control). This event is executed each time the search results have been finished populated, so here we have the correct search count available.
function clientPopulated(sender, e) {
var extender = sender;
var completionList = extender.get_completionList();
var completionListCount = completionList.childNodes.length;
var maxCount = extender.get_completionSetCount();
var resultsHeader;
if(completionListCount == maxCount)
resultsHeader = 'Max count of ' + maxCount + ' reached.<br/>'
+ 'Please refine your search.';
else if(completionListCount > 0)
resultsHeader = completionListCount + ' hits.';
else
resultsHeader = 'No objects found';
jQuery(completionList).prepend(
'<li class="listHeader">' + resultsHeader + '</li>');
}
I have also created a new css class to display this properly. I have used !important to make sure this overrides the mousover style added from the AutoExtender control.
.listHeader
{
background-color : #fafffa !important;
color : #061069 !important;
cursor : default !important;
}
I used a javascript FocusChange() in my aspx page. I have couple of controls and I need Hit enter key need to move next control based on tab index. It is working good in IE7 but not working in IE8... Please help me on this..
Thanks for your help in advance. The java script is given below.
function FocusChange() {
if (window.event.keyCode == 13) {
var formLength = document.form1.length; // Get number of elements in the form
var src = window.event.srcElement; // Gets the field having focus
var currentTabIndex = src.getAttribute('tabindex'); // Gets its tabindex
// scroll through all form elements and set focus in field having next tabindex
for (var i = 0; i < formLength; i++) {
if (document.form1.elements[i].getAttribute('tabindex') == currentTabIndex + 1) {
for (var j = i; j <= formLength; j++) {
if (document.form1.elements[j].disabled == false) {
document.form1.elements[j].focus();
event.returnValue = false;
event.cancel = true;
return;
}
}
}
}
}
}
I've got the same request as you, but solved it in a different manner, just replacing the Enter for Tab
<script language="JavaScript">
document.onkeydown = myOnkeydown;
function myOnkeydown()
{
var key = window.event.keyCode;
if (key == 13) //13 is the keycode of the 'Enter' key
{window.event.keyCode = 9; //9 is the code for the 'Tab' key. Essentially replacing the Enter with the Tab.
}
}
</script>
Warning: Works in IE only.