Questions on UI for ASP.NET AJAX Forum

2 answers

153 views

Hi there

I seem to have trouble making IE behave correctly with client-side polulated dropdown buttons. First of all, the text seems to be wrapped, and if I override the css class to set "white-space: nowrap", the content is cropped.

Everything works as expected in Firefox.

Is this a known issue? I found another post about the same problem here: http://www.telerik.com/community/forums/aspnet-ajax/toolbar/radtoolbardropdown-client-side-problem.aspx
However, that solution is not viable for me, as I have no idea how wide my items are going to be.

Any help appreciated...

ToolBar

answered on 18 Jun 2009

1 answer

96 views

Self Referencing Hiearchy - to get the Child row rowindex in rowdouble_click .

I am using the RadGrid in which we are using the self referencing hierarchy.
In the we are opening a new page in the row_doubleClick Event of the Grid.

var MasterTable = grid.get_masterTableView();
var row = MasterTable.get_dataItems()[dataItem.rowIndex-1];

Please find the above code which returns the row index.
It returns for the MasterTable but if i double click the child event iam not able to get the respective event.
Please provide me solution in so that i can get the row index of the child event in the self referencing hiearchy grid.

Thanks
Veda.S

Grid

answered on 18 Jun 2009

5 answers

187 views

Problem in Layout when using dock inside Panel

Hi,

Am using a pannel and placing a dock control inside it.
when the contents of the dock inceases then the dock should still fit inside the pannel and on scrolling the scrollbar of the pannel the dock should get scrolled up and down. but this doesn't work that way.
when the contents of the dock increases the dock is not fitting within the pannel. the scrollbar of the pannel does not linked with the dock. instead the page height is getting increased and page scrolling appears.

Pls. Suggest me how to overcome this.

Thanks
Jidesh

Dock

answered on 18 Jun 2009

4 answers

87 views

Client API: Toggling display breaks event calls in IE

Hi,

This is a follow up question from this thread. The scenario is that for each item of list A we assign an item from list B. The previous thread resulted in me using one single invisible RadComboBox and manipulate it though javascript to reuse it to make the list B selection. I save the association in an hidden field for each item. I do this using the TextBox onfocus() to show the RadCombo and the RadCombo's OnClientBlur() to hide it.

It works OK in Firefox, but I noticed that in IE 6,7,8, the line _rcmb.get_element().style.display = 'none'; in OnClientBlur() will cause the onfocus() event of the textbox to not be called when clicking to a new textbox. I must click the textbox twice OR click elsewhere to have OnClientBlur() called and then click a new textbox to have onfocus() called.

Here a sample project's code, run it and comment or uncomment lines 110 and 111 to reproduce the problem.

Thanks,

Dominic
Using v.2009.1.527.35

    
            <%@ Page Language="C#" AutoEventWireup="false" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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 runat="server"> 
        
               <title></title> 
        
               <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
        
            </head> 
        
            <body> 
        
               <form id="form1" runat="server"> 
        
               <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
               </asp:ScriptManager> 
        
               <div> 
        
                  <div>#1<asp:TextBox ID="TextBox1" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField1" runat="server" /></div> 
        
                  <div>#2<asp:TextBox ID="TextBox2" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField2" runat="server" /></div> 
        
                  <div>#3<asp:TextBox ID="TextBox3" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField3" runat="server" /></div>       
        
                  <div>#4<asp:TextBox ID="TextBox4" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField4" runat="server" /></div> 
        
                  <div>#5<asp:TextBox ID="TextBox5" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField5" runat="server" /></div> 
        
                  <div>#6<asp:TextBox ID="TextBox6" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField6" runat="server" /></div> 
        
                  <div>#7<asp:TextBox ID="TextBox7" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField7" runat="server" /></div> 
        
                  <div>#8<asp:TextBox ID="TextBox8" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField8" runat="server" /></div> 
        
                  <br /><br /> 
        
                  <telerik:RadComboBox ID="rcmb" runat="server" Skin="Default" Width="300px" 
        
                     ShowMoreResultsBox="false" EnableVirtualScrolling="false" EnableLoadOnDemand="false" 
        
                     MarkFirstMatch="false" ItemRequestTimeout="500" OpenDropDownOnLoad="false" ShowDropDownOnTextboxClick="false"> 
        
                     <Items> 
        
                        <telerik:RadComboBoxItem Text="Item 1" Value="1" /> 
        
                        <telerik:RadComboBoxItem Text="Item 2" Value="2" /> 
        
                        <telerik:RadComboBoxItem Text="Item 3" Value="3" /> 
        
                        <telerik:RadComboBoxItem Text="Item 4" Value="4" /> 
        
                        <telerik:RadComboBoxItem Text="Item 5" Value="5" /> 
        
                        <telerik:RadComboBoxItem Text="Item 6" Value="6" /> 
        
                     </Items> 
        
                  </telerik:RadComboBox> 
        
                  <div>Functions called</div> 
        
                  <div id="fcts" style="height: 250px; overflow: auto; border: solid 1px gray;"></div> 
        
                  <script type="text/javascript"> 
        
                     /* <![CDATA[ */
        
                     Sys.Application.add_load(function()
        
                     {
        
                        var _activeTb;
        
                        var _rcmb = $find("<%= rcmb.ClientID %>");
        
                        _rcmb.get_element().style.position = 'absolute';
        
                        _rcmb.get_element().style.display = 'none';
        
                        _rcmb.set_closeDropDownOnBlur(false);
        
                        _rcmb.add_selectedIndexChanged(UpdateValue);
        
                        _rcmb.add_onClientBlur(HideDdl);
        
                        _rcmb.disable();
        
                        function ShowDdl(tb)
        
                        {
        
                           $("#fcts").append("ShowDdl()<br />");
        
                           _activeTb = tb;
        
                           _rcmb.enable();
        
                           var div = _rcmb.get_element();
        
                           var offset = $(_activeTb).offset();
        
                           div.style.top = offset.top + "px";
        
                           div.style.left = offset.left + "px";
        
                           _rcmb.clearSelection();
        
                           _rcmb.set_text(_activeTb.value);
        
                           _rcmb.set_value($("INPUT[type=hidden]", _activeTb.parentNode).val());
        
                           _activeTb.style.visibility = 'hidden';
        
                           div.style.display = '';
        
                           _rcmb.get_inputDomElement().focus();
        
                           if (_rcmb.get_text().length != 0) {
        
                              _rcmb.selectText(0, _rcmb.get_text().length);
        
                           }
        
                           _rcmb.showDropDown();
        
                        }
        
                        function UpdateValue(sender, eventArgs)
        
                        {
        
                           $("#fcts").append("UpdateValue()<br />");
        
                           var item = eventArgs.get_item();
        
                           if (item != null) {
        
                              $(_activeTb).val(item.get_text());
        
                              $("INPUT[type=hidden]", _activeTb.parentNode).val(item.get_value());
        
                           }
        
                           else {
        
                              $(_activeTb).val("");
        
                              $("INPUT[type=hidden]", _activeTb.parentNode).val("");
        
                           }
        
                        }
        
                        function HideDdl()
        
                        {
        
                           $("#fcts").append("HideDdl()<br />");
        
                           _activeTb.style.visibility = '';
        
                           _rcmb.hideDropDown();
        
            /* uncommment the following lines 
        
               and the textbox onfocus() event will not be called 
        
               in IE after OnClientBlur()... must reclick.
        
               Note: Firefox works ok.

            */
        
            //               _rcmb.get_element().style.display = 'none';
        
            //               _rcmb.disable();
        
                        }
        
                        $(".ddl").focus(function()
        
                        {
        
                            ShowDdl(this);
        
                        });
        
                     });
        
                     /* ]]> */ 
        
                  </script> 
        
               </div> 
        
               </form> 
        
            </body> 
        
            </html>

ComboBox

answered on 18 Jun 2009

1 answer

108 views

Grid filtering after accept button clicked

Hi,

i have a question. Is there any possibility to define arguments for filtering and apply filters after clicking any accept button? Now when i change a criteria in filtering data are automaticly bounded, i would like to set many critirias and then refresh the grid. Big thanks for fast answer.

Greetings
M.

Grid

answered on 18 Jun 2009

1 answer

194 views

[Solved] stored procedure call from grid

I'm using a linkbutton delete column on a master/detail grid. On linkbutton click, I want to call a stored procedure via SQL datasource that looks for and identifier in the details table. If it exists, it returns a code and an error will display. If not, it deletes the record from the master grid. I'm having trouble finding an example of how to do this. Could you please point me in the right direction?

Grid

answered on 18 Jun 2009

1 answer

130 views

Calendar OnBlur Event

Is there a way to capture the OnBlur event for a calendar? I see a clientevents node but OnBlur is not listed.

I basically have a pop-up div that has two calendars and the onblur event would check to see if they clicked outside of the div. The problem is once the calendar is clicked, it receives focus and I don't have a way to detect the onblur anymore.

Thanks,

Levi

Calendar

answered on 18 Jun 2009

4 answers

334 views

RadGrid client side changes not persisted

Hello,

I am new to Telerik and have downloaded the asp.net for evaluation. I have a simple RadGrid with 2 columns defined as

<telerik:RadGrid ID="RadGrid1" runat="server" onneeddatasource="NeedData" AutoGenerateColumns="False">

<telerik:GridBoundColumn DataField="rowId" HeaderText="rowId" Visible="false" UniqueName="rowId">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="NewCol1" HeaderText="NewCol1" ReadOnly="False" UniqueName="NewCol1">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>
<ClientSettings>

</ClientSettings>

</telerik:RadGrid>

A DataTable is used as the data source on the server side. In the RadGrid, when you double click a row, a RadWindow is used to popup a window to edit the selected row's data. The popup window in turn calls my local js method to update the row with the new values. All is well and the examples I have followed work as expected. When I finally hit a save button on the page (which posts back to the server), I believe .Net is loading the view state of the RadGrid without the changes I have made to the grid. I kind of expected this given that .Net rebuilds the controls in the Init event. So I have two questions,

1) How do I get the changes I have made to the grid on the client side to the server, and/or
2) The RadWindow used to make the changes calls the js function BrowserWindow.myUpdateMethod which is all client side. If I cannot easily get the client side changes, how can I force the RadWindow to post back instead of calling my js function? In the past, we have used CodeSummit WebModalControls which does precisely that, which allows us to change the data client side and rebind.

Thanks for your help.

Paul

Grid

answered on 18 Jun 2009

2 answers

160 views

Unable to delete from grid item collection

Hi

I am using cleint delte column in my grid.

<telerik:GridClientDeleteColumn CommandName="Delete" ImageUrl="../../Resources/Images/Common/icon_delete.gif" ButtonType="ImageButton" ConfirmText="Are you sure you want to delete?"/>

It delets the row. But in next postback. I found these rows in grid.Items collection. I also want to remove deleted from item collection.

How can i do this.

Thanks in advance.

B.Sethi

Grid

answered on 18 Jun 2009

1 answer

105 views

Access CommandItem Toolbar on client side

I am looking to create a script to toggle the enable/disable flag of a few toolbar items when they are/aren't selected. I keep getting null back from get_masterTableView - it looks correct to me though - am I missing something?

    
            function Grid1_OnRowSelected(sender, eventArgs) 
        
            { 
        
                var MasterTable = sender.get_masterTableView(); 
        
                var selectedRows = MasterTable.get_selectedItems(); 
        
                var gridToolbar = GetRegisteredServerElement("Grid1Toolbar"); 
        
                if (selectedRows.get_Count() > 0) 
        
                { 
        
                    gridToolbar.findItemByAttribute("CommandName", "Copy").enable(); 
        
                    gridToolbar.findItemByAttribute("CommandName", "Move").enable(); 
        
                    gridToolbar.findItemByAttribute("CommandName", "ToggleStatus").enable(); 
        
                    // Enable copy/move command items 
        
                } 
        
                else 
        
                { 
        
                    gridToolbar.findItemByAttribute("CommandName", "Copy").disable(); 
        
                    gridToolbar.findItemByAttribute("CommandName", "Move").disable(); 
        
                    gridToolbar.findItemByAttribute("CommandName", "ToggleStatus").disable(); 
        
                    // Disable copy/move command items 
        
                }

Grid

answered on 18 Jun 2009

	<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<!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 runat="server">
	<title></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	</head>
	<body>
	<form id="form1" runat="server">
	<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>

	<div>
	<div>#1<asp:TextBox ID="TextBox1" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField1" runat="server" /></div>
	<div>#2<asp:TextBox ID="TextBox2" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField2" runat="server" /></div>
	<div>#3<asp:TextBox ID="TextBox3" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField3" runat="server" /></div>
	<div>#4<asp:TextBox ID="TextBox4" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField4" runat="server" /></div>
	<div>#5<asp:TextBox ID="TextBox5" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField5" runat="server" /></div>
	<div>#6<asp:TextBox ID="TextBox6" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField6" runat="server" /></div>
	<div>#7<asp:TextBox ID="TextBox7" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField7" runat="server" /></div>
	<div>#8<asp:TextBox ID="TextBox8" runat="server" CssClass="ddl" style="width: 300px;" /><asp:HiddenField ID="HiddenField8" runat="server" /></div>

	<br /><br />
	<telerik:RadComboBox ID="rcmb" runat="server" Skin="Default" Width="300px"
	ShowMoreResultsBox="false" EnableVirtualScrolling="false" EnableLoadOnDemand="false"
	MarkFirstMatch="false" ItemRequestTimeout="500" OpenDropDownOnLoad="false" ShowDropDownOnTextboxClick="false">
	<Items>
	<telerik:RadComboBoxItem Text="Item 1" Value="1" />
	<telerik:RadComboBoxItem Text="Item 2" Value="2" />
	<telerik:RadComboBoxItem Text="Item 3" Value="3" />
	<telerik:RadComboBoxItem Text="Item 4" Value="4" />
	<telerik:RadComboBoxItem Text="Item 5" Value="5" />
	<telerik:RadComboBoxItem Text="Item 6" Value="6" />
	</Items>
	</telerik:RadComboBox>

	<div>Functions called</div>
	<div id="fcts" style="height: 250px; overflow: auto; border: solid 1px gray;"></div>

	<script type="text/javascript">
	/* <![CDATA[ */
	Sys.Application.add_load(function()
	{
	var _activeTb;
	var _rcmb = $find("<%= rcmb.ClientID %>");
	_rcmb.get_element().style.position = 'absolute';
	_rcmb.get_element().style.display = 'none';
	_rcmb.set_closeDropDownOnBlur(false);

	_rcmb.add_selectedIndexChanged(UpdateValue);
	_rcmb.add_onClientBlur(HideDdl);
	_rcmb.disable();

	function ShowDdl(tb)
	{
	$("#fcts").append("ShowDdl()<br />");

	_activeTb = tb;
	_rcmb.enable();

	var div = _rcmb.get_element();

	var offset = $(_activeTb).offset();
	div.style.top = offset.top + "px";
	div.style.left = offset.left + "px";

	_rcmb.clearSelection();

	_rcmb.set_text(_activeTb.value);
	_rcmb.set_value($("INPUT[type=hidden]", _activeTb.parentNode).val());

	_activeTb.style.visibility = 'hidden';
	div.style.display = '';

	_rcmb.get_inputDomElement().focus();
	if (_rcmb.get_text().length != 0) {
	_rcmb.selectText(0, _rcmb.get_text().length);
	}
	_rcmb.showDropDown();
	}

	function UpdateValue(sender, eventArgs)
	{
	$("#fcts").append("UpdateValue()<br />");

	var item = eventArgs.get_item();
	if (item != null) {
	$(_activeTb).val(item.get_text());
	$("INPUT[type=hidden]", _activeTb.parentNode).val(item.get_value());
	}
	else {
	$(_activeTb).val("");
	$("INPUT[type=hidden]", _activeTb.parentNode).val("");
	}
	}

	function HideDdl()
	{
	$("#fcts").append("HideDdl()<br />");
	_activeTb.style.visibility = '';
	_rcmb.hideDropDown();

	*/ uncommment the following lines**
	and the textbox onfocus() event will not be called
	in IE after OnClientBlur()... must reclick.
	Note: Firefox works ok.
	*/
	// _rcmb.get_element().style.display = 'none';
	// _rcmb.disable();
	}

	$(".ddl").focus(function()
	{
	ShowDdl(this);
	});
	});

	/* ]]> */
	</script>

	</div>
	</form>
	</body>
	</html>