[CLOSED] Telerik

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Telerik

    Hi

    I have a requirement to embed Telerik AJAX controls into an ext app. I tried placing the telerik controls into a user control however this failed as I can both require a script manager. The solution I have working in using a frame however I am not a fan of this, any other ideas?

                    <ext:Panel ID="pnlOption1" Header="true" Title="By Zone" IconCls="Pivot" runat="server" flex="1"  MarginSpec="0 0 0 0" Border="false" BodyPadding="0">
    
                        <%--SET AUTO LOAD TO FALSE ON LIVE AND LOAD IN THE DIRECT METHOD--%>
                        <Loader ID="Loader2" runat="server" Url="Pivots\Option1.aspx?Type=2" Mode="Frame" AutoLoad="true" >
                            <LoadMask ShowMask="true" />    
                        </Loader>
                            
                    </ext:Panel>
    Ta,
    D
    Last edited by Daniil; Mar 30, 2015 at 3:44 PM. Reason: [CLOSED]
  2. #2
    Please post a complete (but simplified) code sample demonstrating how to reproduce the issue.

    Some more details are in our forums guidelines.
    Forum Guidelines For Posting New Topics
    More Information Required
  3. #3
    Hello everybody,

    I tried placing the telerik controls into a user control however this failed as I can both require a script manager.
    Please clarify/rephrase why it fails.

    As a guess - Telerik might require ViewState (doesn't it?). So, please try to enable ViewState which is disabled by default in Ext.NET.
    <ext:ResourceManager runat="server" DisableViewState="false" />
  4. #4
    Guys

    Providing a code sample would be extremely difficult. Anyway yup D setting view state kills a load of issues and I can embed the telerik controls into user controls in Ext and the telerik controls work without a problem and all jScript errors are squash.

    For my implementation though it still does not work and this is more to do with how the Telerik controls work more than anything else. Basically I would look to set the telerik controls properties inside Ext direct events (or use programmatic control creation) however when setting the control properties from the server side code the controls are not updated on the client. In their example though the controls are rendered on page init and page load : http://demos.telerik.com/aspnet-ajax...defaultcs.aspx

    Either way I think is now outside the bounds of Ext and I am not even 100% sure their server side API supports what I am trying to achieve.

    Will update on progress.

    Ta,
    D
  5. #5
    Providing a code sample would be extremely difficult.
    Can you provide further details on why supplying a code sample would be extremely difficult?

    We're all in this thread trying to help you, and all we can do is make assumptions. I have an idea of why this updating of a Telerik control isn't working in your scenario.
    Geoffrey McGill
    Founder
  6. #6
    Hi Geoff

    Providing the code sample is easy -- making runnable is what would be tricky.

    Anyway here you go.

    
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Pivotv2.ascx.cs" Inherits="ModelViewer.User_Controls.Pivotv2" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <script src="../scripts/pivots.js" type="text/javascript"></script>
    
    <style>
        
        /*SET BECAUSE MESSES WITH FONTS USING THE STYLE TAG AND STYLE TAG NEEDED OTHERWISE HEIGHT NOT CORRECTLY FOR SOME REASON*/ 
        form table
        {
            font-size: 11px;
        }
    
    </style>
    
    <ext:Panel ID="pnlContainer" runat="server" Header="false" BodyPadding="0" Border="false" Collapsible="false" BodyCls="PanelBodyStyle"> 
    
        <BottomBar>
            <ext:Toolbar ID="Toolbar1" runat="server" Height="30">
                <Items>
                    
                    <ext:ToolbarFill></ext:ToolbarFill>
    
                    <ext:Button runat="server" ID="btnNotes" Text="Notes" StandOut="true" Icon="Comments">
                        <Listeners>
                        </Listeners>
                    </ext:Button>
    
                </Items>
    
            </ext:Toolbar> 
        </BottomBar>
    
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch"  />
        </LayoutConfig>
    
        <Items>
    
            <ext:Panel ID="pnlInfo" runat="server" Header="false" Height="30" BodyCls="Label" BodyPadding="0" Border="true" MarginSpec="5 5 0 5">
    
                <Content>
                    <div style="padding-top: 7px"><b>REPUBLIC 2015 - L186L18H (UNPUBLISHED)</b></div>
                </Content>
    
                <Plugins>
                    <ext:Badge ID="_HasNotes" runat="server" Scale="Small" RenderToBody="false" HideEmpty="true" OffsetX="-40" OffsetY="15"/>
                </Plugins>
    
            </ext:Panel> 
    
            <ext:Panel ID="pnlOption1" Header="true" Title="By Construction" IconCls="Pivot" runat="server" flex="1"  MarginSpec="5 5 5 5" Border="false" BodyPadding="0">
               
                <Content>                          
     
                    <asp:ScriptManager ID="sm" runat="server" />
    
                            <telerik:RadButton ID="btnStandard" runat="server" OnClick="btn_Click" Text="Standard Button" ></telerik:RadButton>    
    
    <%--                        <telerik:RadScriptManager runat="server" ID="rsm"  /> --%>
                              
    <telerik:RadAjaxManager ID="ram" runat="server" DefaultLoadingPanelID="rlp" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rpgPivot" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rpgPivot" ></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnStandard" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="btnStandard" ></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager> 
    
                    <telerik:RadAjaxLoadingPanel ID="rlp" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel>       
    
    <%--                <telerik:RadButton ID="rbtnSave" runat="server" OnClientClicked="" Text="Save Filter Settings" AutoPostBack="false" UseSubmitBehavior="false">
    
                    </telerik:RadButton>--%>    
    
                    <telerik:RadPivotGrid ID="rpgPivot" runat="server" OnNeedDataSource="rpgPivot_NeedDataSource" Height="100%" LoadingPanelID="rlp" BorderWidth="0px"
                        AllowPaging="true" AllowFiltering="true" ShowFilterHeaderZone="true" Skin="Silk" PageSize="50" AllowSorting="true" 
                        FilterHeaderZoneText="Drag here to remove from Pivot" EnableZoneContextMenu="true" EnableConfigurationPanel="true"
                        ShowColumnHeaderZone="true" ShowDataHeaderZone="false" ShowRowHeaderZone="true" EnableCaching="false" Visible="true"  >
    
                        <ConfigurationPanelSettings DefaultDeferedLayoutUpdate="true" EnableFieldsContextMenu="false" LayoutType="TwoByTwo"  />
    
                        <ClientSettings Scrolling-AllowVerticalScroll="true" EnableFieldsDragDrop="true" >
                            <ClientMessages DragToReorder="Drag the field to change its order" />
                            <ClientEvents OnCommand="rpgPivot_ItemCommand" />
                        </ClientSettings>
                    
                        <PagerStyle AlwaysVisible="true" />
    
                        <DataCellStyle Width="150px" />
                
                        <FieldsPopupSettings AggregateFieldsMinCount="2" ColumnFieldsMinCount="2" RowFieldsMinCount="2" />
    
                        <Fields>
                        
                            <telerik:PivotGridColumnField Caption="Built" DataField="YEAR_BUILT" UniqueName="YEAR_BUILT"></telerik:PivotGridColumnField>
                            <telerik:PivotGridAggregateField Caption="TIV" DataField="TIV"></telerik:PivotGridAggregateField>
                            <telerik:PivotGridRowField Caption="Construction" DataField="CONSTRUCTION"></telerik:PivotGridRowField>
    
                        </Fields>
    
                    </telerik:RadPivotGrid>
    
                    <%--<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="ReturnPivotData" TypeName="ModelViewer.Class.PivotItemData"></asp:ObjectDataSource>--%>
    
                </Content>                        
    
            </ext:Panel> 
    
        </Items>
    
    </ext:Panel>
    
            protected void rpgPivot_NeedDataSource(object sender, PivotGridNeedDataSourceEventArgs e)
            {
                // WORKS AND BINDS CORRECTLY ON THE CLIENT
                (sender as RadPivotGrid).DataSource = PivotItemData.ReturnPivotData();
    
            }
    
            [DirectMethod]
            public void LoadControl()
            {
                // DOES NOT WORK AS CLIENT NOT UPDATED.
                rpgPivot.SetFilterIncludes("Construction", new object[] { "Industrial", "Steel" });
    
            }

    Not sure that helps as you can't run it but at least you can see how it is structured. All the code exists in a user control loaded into a tab panel on an aspx page. The bit that fails is SetFilterIncludes (no error just does not update on the client).

    The need datasource event fires and populates the grid. It is a bit annoying it fires when the app loads so will need to kill that somehow.

    Framing it does work as you might expect with loading like below

    
                        <%--SET AUTO LOAD TO FALSE LOAD AND IN THE DIRECT METHOD ONCE CONNECTED TO DB PROPER--%>
                        <Loader ID="Loader1" runat="server" Url="Frames\PivotGrid.aspx?Type=1" Mode="Frame" AutoLoad="true" >
                            <LoadMask ShowMask="true" />    
                        </Loader>
    Last edited by CanopiusApplications; Mar 19, 2015 at 11:30 AM.
  7. #7
    Hi Geoff

    I would be very keen to know what your theory is?

    I started to think it might be because of the way the controls are laid out in the html when used in a user control, for example I have found a bug in the Ext grid / pager when they are loaded dynamically on a user control. The issue being the ids now being the in the format "UserControlID" + _ + "ControlID". In the aforementioned case I fixed this like

    
                newTabGrid.ID = "USERCONTROLID_CONTROLID";
                newTabGrid.LoadTab(item);
                newPanel.ContentControls.Add(newTabGrid);
                newTabGrid.ID = "CONTROLID";
    Tried something similar to the above as the issue manifests itself in a similar way however no joy.

    In regards to the Ext issue described initially I will put together a runnable sample showing the problem when I get a moment (no biggy for me as I have a fix / workaround).

    Thanks for the help lads,
    D
  8. #8
    Guys

    Don't worry about this as it seems it is the Telerik controls and nothing to do with Ext.
    Will update if I get the whole thing working in Ext as I want.

    Ta,
    D
  9. #9
    Guys

    Got it working and there were a couple of things at play here.

    1. I needed to move the RAD script managers into the parent aspx page.
    2. I needed to use a RAD proxy manager.
    3. For some strange reason simply calling setfilters does not trigger the rebind when used in a user control (still investigating as this does not make sense).

    All in all as I suspected it was the telerik config and nothing to do with Ext (ViewState aside).

    Just need to get the listener sequencing down and I should be sorted.

    Ta,
    D
  10. #10
    Actually scratch that I spoke to soon it is still not right so would love to hear your theory Geoff.

    Basically you can set the Telerik properties from code behind if the event is generated by a Telerik control, if the event is generated by Ext then it does not work. A bit weird actually is it seems partially work if you call the panel.update after setting the properties.

    
            <ext:Panel ID="pnlOption1" Header="true" Title="By Construction" IconCls="Pivot" runat="server" flex="1"  MarginSpec="5 5 5 5" Border="false" BodyPadding="0">
                                      
                <Content>                              
                       
                    <telerik:RadScriptManager runat="server" ID="rsm"  /> 
    
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    </telerik:RadAjaxManager>
                                       
                    <telerik:RadAjaxManagerProxy ID="ram" runat="server">
                        <AjaxSettings>
                            <telerik:AjaxSetting AjaxControlID="rpgPivot">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="rpgPivot" LoadingPanelID="rlp"/>
                                    <telerik:AjaxUpdatedControl ControlID="btnStandard" LoadingPanelID="rlp"/>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                            <telerik:AjaxSetting AjaxControlID="btnStandard">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="rpgPivot" LoadingPanelID="rlp"/>
                                    <telerik:AjaxUpdatedControl ControlID="btnStandard" LoadingPanelID="rlp"/>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                        </AjaxSettings>
                    </telerik:RadAjaxManagerProxy>         
    
                    <telerik:RadAjaxLoadingPanel ID="rlp" runat="server" Skin="Silk" ></telerik:RadAjaxLoadingPanel>
    
                    <telerik:RadButton ID="btnStandard" runat="server" OnClick="btn_Click" Text="Standard Button"></telerik:RadButton>                           
    
                    <telerik:RadPivotGrid ID="rpgPivot" runat="server" OnNeedDataSource="rpgPivot_NeedDataSource" Height="100%" LoadingPanelID="rlp" BorderWidth="0px"
                        AllowPaging="true" AllowFiltering="true" ShowFilterHeaderZone="true" Skin="Silk" PageSize="50" AllowSorting="true" 
                        FilterHeaderZoneText="Drag here to remove from Pivot" EnableZoneContextMenu="true" EnableConfigurationPanel="true"
                        ShowColumnHeaderZone="true" ShowDataHeaderZone="false" ShowRowHeaderZone="true" EnableCaching="false" Visible="true"  >
    
                        <ConfigurationPanelSettings DefaultDeferedLayoutUpdate="true" EnableFieldsContextMenu="false" LayoutType="TwoByTwo"  />
    
                        <ClientSettings Scrolling-AllowVerticalScroll="true" EnableFieldsDragDrop="true" >
                            <ClientMessages DragToReorder="Drag the field to change its order" />
                            <ClientEvents OnCommand="rpgPivot_ItemCommand" />
                        </ClientSettings>
                    
                        <PagerStyle AlwaysVisible="true" />
    
                        <DataCellStyle Width="150px" />
                
                        <FieldsPopupSettings AggregateFieldsMinCount="2" ColumnFieldsMinCount="2" RowFieldsMinCount="2" />
    
                        <Fields>
                        
                        </Fields>
    
                    <SortExpressions>
                        <telerik:PivotGridSortExpression FieldName="TIV" SortOrder="Descending"></telerik:PivotGridSortExpression>
                    </SortExpressions>
    
                    </telerik:RadPivotGrid>
    
                    <%--<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="ReturnPivotData" TypeName="ModelViewer.Class.PivotItemData"></asp:ObjectDataSource>--%>      
    
                </Content>   
    
            </ext:Panel> 
    
            protected void btn_Click(object sender, EventArgs e)
            {        
                /// WORKS         
                CreateType1(); --- just creates the pivot rows, columns & aggs
                rpgPivot.SetFilterIncludes("Construction", new object[] { "Industrial", "Steel" });
                rpgPivot.DataSource = PivotItemData.ReturnPivotData(); 
            }
    
            [DirectMethod]
            public void LoadControl()
            {
    
                // FAILS
                CreateType1(); --- just creates the pivot rows, columns & aggs
                rpgPivot.SetFilterIncludes("Construction", new object[] { "Industrial", "Steel" });
                rpgPivot.DataSource = PivotItemData.ReturnPivotData(); 
                rpgPivot.Update();
                rpgPivot.Rebind();
                pnlOption1.Update();
                
            }
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [1.0] Ext.NET with Telerik's RadUpload control
    By danielg in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 24, 2011, 8:22 AM
  2. [CLOSED] [1.0] telerik report with Ext.NEt directEvents
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 29, 2010, 6:07 PM
  3. Coolite vs Telerik vs DevExpress
    By ys.liew in forum Open Discussions
    Replies: 2
    Last Post: Dec 21, 2009, 9:01 PM
  4. Replies: 10
    Last Post: May 05, 2009, 1:50 PM
  5. Replies: 1
    Last Post: Oct 13, 2008, 12:42 PM

Posting Permissions