Questions on UI for ASP.NET AJAX Forum

1 answer

111 views

Hi,
I have a problem to implement jqChart in my project. Here is the code where i place jqChart:

01.

telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="False" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="False" CellSpacing="0" CssClass="grid_with_column_lines grid_with_narrow_columns" EnableEmbeddedSkins="False" GridLines="None" OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource" OnPageIndexChanged="RadGrid1_PageIndexChanged" OnPageSizeChanged="RadGrid1_PageSizeChanged" OnPreRender="RadGrid1_PreRender" PageSize="30" Skin="SkinISP" Visible="False" PagerStyle-Visible="false" AlternatingItemStyle-Wrap="false" ItemStyle-Wrap="false" OnSortCommand="RadGrid1_SortCommand" >

02. <ClientSettings AllowColumnsReorder="false" Resizing-AllowColumnResize="true" Resizing-AllowResizeToFit="true" Resizing-ResizeGridOnColumnResize="true" Resizing-EnableRealTimeResize="true">

03. <Scrolling UseStaticHeaders="true" AllowScroll="true" ScrollHeight="650" />

04. </ClientSettings>

05. <MasterTableView DataKeyNames="Result_id" ExpandCollapseColumn-Display="false" HierarchyLoadMode="ServerOnDemand" >

06. <NestedViewTemplate>

07. <asp:Panel ID="InnerPanel" runat="server" CssClass="innerPanel">

08. <asp:Panel ID="PanelXml" runat="server" Visible="false">

09. <telerik:RadTabStrip ID="TabStrip1" runat="server" MultiPageID="Multipage1" SelectedIndex="0" ShowBaseLine="true">

10. <Tabs>

11. <telerik:RadTab runat="server" meta:resourcekey="RadTabXml" PageViewID="PageView1" Text="XML">

12. </telerik:RadTab>

13. <telerik:RadTab runat="server" meta:resourcekey="RadTabChart" PageViewID="PageView2" Text="Chart">

14. </telerik:RadTab>

15. <telerik:RadTab runat="server" meta:resourcekey="RadTabChartMW" PageViewID="PageView3" Text="Chart M(W)">

16. </telerik:RadTab>

17. </Tabs>

18. </telerik:RadTabStrip>

19. <telerik:RadMultiPage ID="Multipage1" runat="server" CssClass="multiPage_with_border SelectedIndex="0">

20. <telerik:RadPageView ID="PageView1" runat="server">

21. <asp:Button ID="btnSaveXmlAsFile" runat="server" CommandName="DownloadXml" CssClass="multiPage_content" meta:resourcekey="btnSaveXmlAsFile" Text="Save"></asp:Button>

22. <asp:Label ID="hfXmlText" runat="server" Visible="false" />

23. <asp:Xml ID="Xml1" runat="server" TransformSource="~/DisplayXml.xsl"></asp:Xml>

24. </telerik:RadPageView>

25. <telerik:RadPageView ID="PageView2" runat="server">

26. <br />

27.

28. <div id="jqChartSingle" style="width: 800px; height: 300px; display: block">

29. </div>

30. </telerik:RadPageView>

31. <telerik:RadPageView ID="PageView3" runat="server">

32. <br />

33. <div id="jqChartMW" style="width:500px; height: 300px; display: block">

34. </div>

35. </telerik:RadPageView>

36. </telerik:RadMultiPage>

37. </asp:Panel>

38. </asp:Panel>

39. </NestedViewTemplate>

40. <Columns>

41. ...

42. </Columns>

43. </MasterTableView>

44.</telerik:RadGrid>

I have to refer to jqChart div this way in JS:

01.$('#jqChartSingle').jqChart({

02.

jqChart data like title, series etc.

35. });

but if I use only this code it finds only the first div from all expended row.

I found on forum that you can get specific row data from columns but I can't figure out a way for JS to find jqChart div inside specific row.

1.var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();

2.masterTable.get_nestedViews()[row].??????

Thanks,
Bartłomiej

Grid

answered on 01 Jul 2014

1 answer

70 views

Telerik grid's exporttocsv() not working in Mac

When my client reported that the export to csv is not opening. I verified it in my application, it is working but opens in the same page. It is not downloading rather looks like the csv file is opened in the same window.
When I verified the export to csv feature in http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/exporting/export-word-csv/defaultcs.aspx in Mac machine, I found this is your issue.
Please suggest asap.

Ajax

answered on 01 Jul 2014

8 answers

578 views

How to find control inside radmultipage in javascript

My design is as follows

<telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal"

OnTabClick="tabClick" UnSelectChildren="True" Skin="WebBlue" EnableEmbeddedSkins="False"

ClickSelectedTab="True" AutoPostBack="True" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Personal" PageViewID="rdpgPersonal">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rdmpPersonal" runat="server">

<telerik:RadPageView ID="rdpgPersonal" runat="server" Selected="true">

<telerik:RadPanelBar runat="server" ID="rdpnlPersonal" ExpandMode="FullExpandedItem"

Skin="Vista" EnableEmbeddedSkins="false" Width="550px">

<Items>

<telerik:RadPanelItem Expanded="true" Text="Employee Personal Information" runat="server"

Selected="true">

<Items>

<telerik:RadPanelItem Value="AccountInformation" runat="server">

<ItemTemplate>

<div class="text" style="background-color: #ffffff">

<ul class="formList" id="accountInfo">

<li>

<asp:Label runat="server" ID="lblHireDate" CssClass="label1" AssociatedControlID="radDtHiredate"

Width="150px">Hire Date</asp:Label>

<telerik:RadDatePicker ID="radDtHiredate" Width="200px" runat="server" MinDate="1900-01-01"

TabIndex="5">

<Calendar ID="calHire" RangeMinDate="1900-01-01" runat="server">

</Calendar>

</telerik:RadDatePicker>

<asp:RequiredFieldValidator ID="rqrdcontactHireDate" runat="server" Display="Dynamic"

ValidationGroup="accountValidation" ControlToValidate="radDtHiredate" ForeColor="Red"

ErrorMessage="Select a Date"></asp:RequiredFieldValidator>

</li>

<li>

<asp:Label runat="server" ID="lblPayFrequency" CssClass="label1" AssociatedControlID="radPayFrequency"

Width="150px">Pay Frequency</asp:Label>

<telerik:RadComboBox ID="radPayFrequency" TabIndex="8" AutoPostBack="true" CssClass="ComboBox"

runat="server" Width="200px">

</telerik:RadComboBox>

</li>

</ul>

<br />

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPageView>

</telerik:RadMultiPage>

I would like to find radDtHiredate and radDtDOB in javascript can some one help me

TabStrip

answered on 01 Jul 2014

1 answer

125 views

Can I use "InPlace" mode to Edit the grid and "popup" edit templete for adding new record

Hello,
Can I use "InPlace" mode to edit the Telerik grid and use "popup" templete when I add new record to this Grid?
Also, is it possible to set certain column to read only during editing record but also editable/set up when creating new record using PopUp templete form?

Thanks alot

current code working on:
<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True" AutoGenerateColumns="False" PageSize="20" AllowSorting="True"
OnPreRender="RadGrid1_PreRender" OnNeedDataSource="RadGrid1_NeedDataSource"
OnItemCreated="RadGrid1_ItemCreated" OnUpdateCommand="RadGrid1_UpdateCommand" OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand"
OnItemDataBound="RadGrid1_ItemDataBound">

<MasterTableView DataKeyNames="PathwayContactID" CommandItemDisplay="Top" EditMode="InPlace" HorizontalAlign="NotSet" AutoGenerateColumns="False">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
</telerik:GridEditCommandColumn>
<telerik:GridTemplateColumn UniqueName="FullName" HeaderText="Name" SortExpression="" >
<ItemTemplate>
<asp:Label ID="FullName" runat="server" Text='<%# Eval("FullName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>


</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="SitePathwayName" HeaderText="Pathway" SortExpression="SitePathwayName" >
<ItemTemplate>
<asp:Label ID="SitePathwayName" runat="server" Text='<%# Eval("SitePathwayName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>


</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Role" HeaderText="Role" SortExpression="" ItemStyle-Width="400px">
<ItemTemplate>
<asp:Label ID="ProfessionalRole" runat="server" Text='<%# Eval("ProfessionalRole") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>

<telerik:RadComboBox ID="RadComboBoxRoles" runat="server" Width="100%" CheckBoxes="true">
</telerik:RadComboBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn UniqueName="Notification" DataField="NotifyAboutFeedback" HeaderText="Notification">
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn DataField="PathwayContactNote" HeaderText="Note" SortExpression="PathwayContactNote"
UniqueName="PathwayContactNote">
</telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn UniqueName="Active" DataField="Active" HeaderText="Active">
</telerik:GridCheckBoxColumn>
<telerik:GridButtonColumn ConfirmText="Delete this item?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete">
<HeaderStyle Width="50px"></HeaderStyle>
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

The columns that i want to set to read only during edit would be the 2nd(FullName) and 3rd column(SitePathwayName) which are going to be autoCompletebox

Grid

answered on 01 Jul 2014

4 answers

396 views

[Solved] How to add the new row as the last row of Radgrid

Hello,

Today, when a user selects "Add new record", the new line is inserted at the first position of the Grid. What Should I do to add this line at the last position of the Grid page ?

Thanks,

Stephane

Grid

answered on 01 Jul 2014

1 answer

137 views

OrgChartNodeDropEventArguments make LinkButton onClick false on first click

Hi, I'm using Telerik 2014.1.403.45. I have the problem with the LinkButton in my RadOrgChart node.

I put RadOrgChart in RadAjaxPanel. there are the LinkButtons in OrgChart Nodes. LinkButtons work correctly after page_load.
However, if I dragged and dropped the node and then clicked on a LinkButton, it will only do postback to page_load but no CommandEventArgs . The events of the LinkButton only works on the second click.

Page

<telerik:RadAjaxPanel ID="panOrganize" runat="server" CssClass="OrganizeCanvas" LoadingPanelID="radAjaxLoadingPanel">

<telerik:RadTabStrip ID="rtabOrganize" runat="server" MultiPageID="rmpOrganize" SelectedIndex="0" Width="100%" CssClass="FontBold" OnTabClick="rtabOrganize_TabClick">

<Tabs>

<telerik:RadTab CssClass="FontBold" Text="Organize Chart" />

<telerik:RadTab CssClass="FontBold" Text="Position" Enabled="false" />

<telerik:RadTab CssClass="FontBold" Text="User" Enabled="false" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpOrganize" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="rpvOrgOrganize" runat="server" Width="100%">

<telerik:RadOrgChart ID="radOrgChart" runat="server" Width="100%" CssClass="SpacingBottom20" LoadOnDemand="Nodes"

DataFieldID="OrgID" DataFieldParentID="ParentID"

EnableDragAndDrop="true" OnNodeDrop="radOrgChart_NodeDrop">

<ItemTemplate>

<asp:Panel ID="panNode" runat="server" CssClass="TemplateHolder">

<asp:Table ID="tbOrgChart" runat="server" Width="160px" Height="50px">

<asp:TableRow>

<asp:TableCell RowSpan="3" Width="30px" VerticalAlign="Middle">

<i class="fa fa-home FontSize28"></i>

</asp:TableCell>

<asp:TableCell Width="5px" />

<asp:TableCell VerticalAlign="Top">

<asp:Label ID="lblTypeName" runat="server" Text='<%# Eval("OrganizationType.TypeName")%>' CssClass="FontBold" />

</asp:TableCell>

<asp:TableCell Width="10px">

<asp:LinkButton ID="lbtnSearch" runat="server" BorderStyle="None"

CommandArgument='<%# Eval("OrgID")%>' CommandName='<%# Eval("Name")%>' OnCommand="lbtnSearch_Command">

<i class="fa fa-search-plus"></i>

</asp:LinkButton>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell RowSpan="2" />

<asp:TableCell RowSpan="2" ColumnSpan="2" VerticalAlign="Top">

<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name")%>' />

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</asp:Panel>

</ItemTemplate>

</telerik:RadOrgChart>

<telerik:RadContextMenu runat="server" ID="radContextMenu" CssClass="CustomContextMenu" Skin="Default" OnClientItemClicked="onClientItemClicked">

<Items>

<telerik:RadMenuItem Text="Add" CssClass="rmAdd" Value="Add" />

<telerik:RadMenuItem Text="Edit" CssClass="rmEdit" Value="Edit" />

<telerik:RadMenuItem Text="Remove" CssClass="rmRemove" Value="Remove" />

</Items>

</telerik:RadContextMenu>

<telerik:RadWindow ID="radWindow" runat="server" AutoSize="true" Modal="true" Behaviors="Close"

VisibleTitlebar="true" VisibleStatusbar="false" OnClientClose="onClientClose">

</telerik:RadWindow>

</telerik:RadPageView>

<telerik:RadPageView ID="rpvOrgPosition" runat="server" Width="100%">

</telerik:RadPageView>

<telerik:RadPageView ID="rpvOrgUser" runat="server" Width="100%">

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadAjaxPanel>

Code Behind (C#)

protected void Page_Load(object sender, EventArgs e)

{

radOrgChart_Load();

}

protected void radOrgChart_Load()

{

radOrgChart.DataSource = String.Empty;

//Get Data from EF

List<Organization> listOrganize = organizeManager.GetOrganize();

if (listOrganize.Count.Equals(0).Equals(false))

{

radOrgChart.DataSource = listOrganize;

}

radOrgChart.DataBind();

}

protected void radOrgChart_NodeDrop(object sender, OrgChartNodeDropEventArguments e)

{

//Update Database

organizeManager.UpdateParentID(new Guid(e.SourceNode.ID), new Guid(e.DestinationNode.ID));

//Load the new data

radOrgChart_Load();

}

protected void lbtnSearch_Command(object sender, CommandEventArgs e)

{

//Open The second Tab, and set enable

rtabOrganize_SetEnable(true, 1);

rtabOrganize_SelectIndex(1);

//Set data into ViewState

vsOrganizationID = e.CommandArgument.ToString();

vsOrganizationName = e.CommandName;

}

OrgChart

answered on 30 Jun 2014

9 answers

2.9K+ views

RadGrid Row Select Event

Hi,
When a row is selected i want to rise an event to update a table with the values of selected row.
Can any one help on this issue.

Thanks,
Gopalakrishnan D

Grid

answered on 30 Jun 2014

2 answers

150 views

[Solved] Get ID of AutoCompleteBox that caused postback

I have two autocomplete boxes on the page, and per the demo I'm setting their datasources in the Page_Load event.

I only want to hit the database once, however. How can I get the ID of the control that initiated the postback?

I've used:

String control_id = Page.Request.Params.Get("__EVENTTARGET");

However, it returns an empty string- I imagine that's because it's a parital postback.

AutoCompleteBox

answered on 30 Jun 2014

10 answers

345 views

Scheduler does not resize with browser

Using the scheduler control (Q3 2008), I'm having trouble getting it to expand or contract to fit the screen when the user resizes the browser (in both IE7 and FF3). I built a sample page with only a RadScheduler control on it, like this:

    
            <telerik:RadScheduler   
        
                runat="server"   
        
                ID="RadScheduler1"   
        
                OverflowBehavior="Expand"    
        
                Width="100%">  
        
            </telerik:RadScheduler>

The Scheduler fills the width of the screen, but if you resize the browser, you have to refresh the page in order to get the scheduler to resize. After experimenting a bit, I found that I could get the scheduler to resize with javascript:

    
            <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">   
        
                <script type="text/javascript">  
        
                    window.onresize = function() {  
        
                        var scheduler = $find('<%= RadScheduler1.ClientID %>');  
        
                        scheduler.repaint();  
        
                    }        
        
                </script>    
        
            </telerik:RadScriptBlock>

This works until you try to put the scheduler inside a table... after that, it no longer resizes properly. The masterpage layout on our site uses tables, and we don't have resizing problems with any other types of controls. It doesn't seem like I should have to jump through the javascript hoops to get the scheduler to resize. Any ideas?

Scheduler