Telerik Forums
UI for ASP.NET AJAX Forum
0 answers
245 views

Is there a way to add scrolling for dynamically added items to the sub menu? I've got many items loaded from ajax calls and dynamically added to the sub menu of my RadContextmenu on a RadGrid. Currently they are expanding beyond the boundaries of the viewport w/o any means to scroll to the bottom of them...

Here is my front end menu settings:

<telerik:RadContextMenu ID="contextMenu" runat="server" OnItemClick="contextMenu_ItemClick" OnClientItemClicking="onClientClicking" OnClientMouseOver="sb233loadtasks" 
    Skin="Metro"   EnableScreenBoundaryDetection="true" EnableAutoScroll="true" EnableRootItemScroll="true" DefaultGroupSettings-Height="500"  AutoScrollMinimumHeight="500" />

 

Below is JS to load and add the dynamic items to the sub menu:

function sb233loadtasks(menu, args)
        {
            var item=args.get_item();
 
// check if the target item is hovered over
            if (item.get_text().toLowerCase() == 'load task') {
                var icol = item.get_items(),timestamp=new Date().getTime();
                             
// show loading
                icol.getItem(0).set_visible(true);
 
            // remove items loaded from last time   
                for (var i = icol.get_count()-1 ; i >0 ; i--)
                    icol.removeAt(i);             
 
             // load the data from ajax call ...
 
                                var tasks = JSON.parse(data);
                                if (tasks instanceof Array && tasks.length) {
                                    menu.trackChanges();
                                    tasks.forEach(function (e) {
                                 
                      //add the item
                                            var sbsb = new Telerik.Web.UI.RadMenuItem();
                                            sbsb.set_text(e.taskname);
                                             
                                            icol.add(sbsb);
                                         
                                    });
                                    menu.commitChanges()
                                }

 

And adding conditionally other root items and the "load task" item to contain the sub menu in the back end, triggered upon page_load:

protected void SetupContextMenu(string ProjectID)
{          
    //Conditionally adding other static menu items...
      ...
     //Adding the item to contain the sub menu upon certain conditions
    RadMenuItem iETask = new RadMenuItem("Edit Task");
    iETask.Items.Add(new RadMenuItem(Utilities.Constants.loadingmsg));
    ...
}

 

I tried to set the default height both in the back end and on the menu tag, as well as disabling animations, removing autoscroll handler upon menu closure etc, per suggestions from other threads, so far all to no avail...

Any ideas?

 

Bryan
Top achievements
Rank 1
 asked on 20 May 2016
1 answer
144 views

So I have this binding problem

I want to bind a radgrid to List<Class1>

On the grid I want to display the following columns:

UserName

Make

Model

 

I also want the Make and Model to be grouped by UserName

 

The classes:

 

    public class Class1

    {

        public Class1()

        {

            Class2Objects = new List<Class2>();

        }

 

        public string Username { get; set; }

 

        public List<Class2> Class2Objects { get; set; }

 

   }

 

Public class Class2

{

               Public string Make{get;set;}

               Public string Model{get;set;}

}

 

The issue is I don't know how to bind to the sub-collection Class2Objects property of Class1

Can this be done

 

Thanks,

William

Konstantin Dikov
Telerik team
 answered on 19 May 2016
3 answers
98 views
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
    //Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="radGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<div>
 
 
    <telerik:RadGrid ID="radGrid1" runat="server"></telerik:RadGrid>
    <telerik:RadGrid ID="radGrid2" runat="server"></telerik:RadGrid>
 
    <telerik:RadCodeBlock runat="server">
    <%= radGrid1.Visible %>
 
    <%= radGrid2.Visible %>
    </telerik:RadCodeBlock>
</div>
</form>
</body>
</html>

 

Please fix.  This is really annoying because all controls in the RadGrid will then have a Visible property value of false, even if they are visible.

Eyup
Telerik team
 answered on 19 May 2016
1 answer
483 views

I have a RadSplitter which house 2 vertical RadPanes both with scroll bars.

The first pane has a RadTreeView inside a .Net User control and the second pane has an IFrame.

I need to set focus on a particular node in the RadtreeView when the page is loaded so I don't have to scroll endlessly to reach that node when the page is first loaded.

I tried using the following approach but it is not working :

function scrollToNode(){
        var selected = $(".rtSelected");
        if(selected.length > 0){
        var TotalScrollNeeded = selected.offset().top
            - $("#radTree").offset().top
            + $("#radTree").scrollTop();
        $("#radTree").animate({ scrollTop: TotalScrollNeeded }, 1000);
        }

Ivan Danchev
Telerik team
 answered on 19 May 2016
5 answers
196 views

I have a SearchBox with a 'none' display style declared in a holding div.

After a javascript event (example click on a button, without postback) I am dynamically creating a new div, and move the SearchBox to it.

I have to do this, because it seems that it is not possible to dynamically create a SearchBox from javascript.

I based the initial hide/show on the post of Brian Azzi.

Everything works fine, but the magnifying glass appears  in on the left of the SearchBox instead of the right side. I attached a screenshot of it.

And that is annoying.

Any solution for that?

I am posting a sample of the xml and javascript I am using.

<div id="telerikHolder">
    <telerik:RadSearchBox
        ID="RdSrchBx"
        runat="server"
        style="display: none;"
        EmptyMessage="Type"
        OnClientSearch="AddSimple"
        OnClientDataRequesting="AddSimple"
        ShowSearchButton="true">
        <DropDownSettings Height="400" Width="550" />
        <WebServiceSettings Path="Main.aspx" Method="GetTypeResults" />
    </telerik:RadSearchBox>
</div>

var el_0_1_1_1 = document.createElement('div');
pParent.appendChild(el_0_1_1_1);
el_0_1_1_1.className = 'popupCellRight';
 
this._typeSearchBoxInput = $("#RdSrchBx");
this._typeSearchBoxInput.show();
//ClearSearchBox(this._typeSearchBoxInput);
 
this._typeSearchBox = null;
var telerikHolder = document.getElementById('telerikHolder');
var childDivs = telerikHolder.getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++) {
    var childDiv = childDivs[i];
    if (childDiv.id == "RdSrchBx") {
        this._typeSearchBox = childDiv;
        break;
    }
}
telerikHolder.removeChild(this._typeSearchBox);
 
el_0_1_1_1.appendChild(this._typeSearchBox);
// this._typeSearchBoxInput = this._typeSearchBoxInput.get_inputElement();

The other problem I have is that this._typeSearchBoxInput does not seem to be a proper Telerik control.

Because when I try to use get_inputElement() on it, I get an undefined exception.

 

 

Ivan Danchev
Telerik team
 answered on 19 May 2016
2 answers
123 views

Hi,

I am using the Maskedtextbox for user input of a mac address, I am using the following code which works fine.  It displays "00-00-00-00-00-00" on initial load and only accepts characters 0-9 and A-F

<telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox3" runat="server" <br>Mask="<0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><br><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<br><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><br><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>"><br></telerik:RadMaskedTextBox>



The issue arises when I press the backspace to delete, all that happens is the cursor moves back but does not reset the character back to the initial mask value which is what I would expect to happen.

How can I achieve this.

Chris
Chris
Top achievements
Rank 1
 answered on 19 May 2016
4 answers
140 views

I just recently upgraded a project to the latest release (2016.1.113) and am experiencing a change in the appearance of panel headers. Prior to the update the header was highlighted with the reverse/selected when open. After the update only the last panel selected is highlighted. We are using the Metro touch skin (this is a mobile site) and the headers are now difficult to distinguish from the content. Please see the attached screen shot. How do I restore this to have the panel header always highlighted? here is my markup code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="XPanelBarTest.aspx.vb" Inherits="mobile.autoclick.com.XPanelBarTest" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
       <style type="text/css">
            html .RadPanelBar_MetroTouch .rmRootToggle {
                height:25px;
                width:24px;
                }
 
            html .RadPanelBar_MetroTouch .rmRootToggle:before {
                font-size:18px;
                }
 
            html .RadPanelBar_MetroTouch .rpTemplate
                    {
                    line-height: 18px;
                    }
            html .RadPanelBar_BlackMetroTouch .rpTemplate
                    {
                    line-height: 18px;
                    }
    </style>
 
    <script type="text/javascript" src="/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
 
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
         <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="99%" Skin="MetroTouch">
            <Items>
                <telerik:RadPanelItem Text="Photos">
                    <ContentTemplate>
                    <div style="overflow:hidden">
                        <div id="container" >
                            <telerik:RadButton ID="radbtnAddPhoto" runat="server" Text="Add New Photos" Width="99%" ></telerik:RadButton>
                             
                        </div>
                        <telerik:RadButton ID="radbtnVehicleNotSaved" runat="server" Text="Please save the vehicle before adding photos." Width="99%" Enabled="false"></telerik:RadButton>
                    </div>
                         
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Description" >
                    <ContentTemplate>
                        <div style="overflow:hidden">
                        <fieldset>
                            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
                                <table class="fieldsetTable" >
                                    <tr>
                                        <td style="padding-top:2px; padding-right:8px; padding-bottom:8px" colspan="2">
                                            <telerik:RadButton ID="radbtnScanner" runat="server" Text="Scan VIN" ButtonType="LinkButton" CssClass="fieldsetTable"  ></telerik:RadButton> 
                                            <telerik:RadButton ID="radbtnDecodeVin" runat="server" Text="Decode VIN" ></telerik:RadButton>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="lablecell_1">
                                            VIN:<span class="Reqd">*</span>
                                        </td>
                                        <td class="tablecell">
                                            <asp:TextBox runat="server" ID="txtVin" Width="200px" CssClass="tdText" MaxLength="21"></asp:TextBox>
                                            <telerik:RadWindow ID="radwinSelectTrimLevel" runat="server" Title="Select Trim Level" Width="290px" Behaviors="Move, Close, Resize" Skin="MetroTouch" Modal="true" CenterIfModal="true">
                                                <ContentTemplate>
                                                    <table style="margin:10px; width:96%">
                                                        <tr>
                                                            <td>
                                                                <label runat="server" id="lblPopupCommentsLabel" class="tdText">Please Select A Trim Level:</label>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <asp:RadioButtonList ID="rblistTrimLevels" runat="server" Width="90%" CssClass="rbtext" style="line-height:30px"></asp:RadioButtonList>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="text-align:center">
                                                                <telerik:RadButton ID="rdbTrimLevelOK" runat="server" Text="OK" Width="90px"></telerik:RadButton>
                                                            </td>
                                                        </tr>
                                                    </table> 
 
                                                </ContentTemplate>
                                            </telerik:RadWindow>
                                        </td>
                                    </tr>
                                     
                                </table>
                            </telerik:RadAjaxPanel>
                             
                        </fieldset>
                         
                        </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Status">
                    <ContentTemplate>
                    <div style="overflow:hidden">
                            <table style="margin:5px">
                                <tr>
                                    <td style="width:100%">
                                        <table class="fieldsetTable">
                                            <tr>
                                                <td class="tablecell" colspan="2">
                                                    <asp:CheckBox runat="server" ID="cbShowOnLine" Text="Show On Line:" TextAlign="Left"  />
                                                </td>
                                            </tr>  
                                            <tr>
                                                <td style="width:44px">
                                                    New/Used:<span class="Reqd">*</span> 
                                                </td>
                                                <td class="tablecell">
                                                    <asp:DropDownList runat="server" ID="ddNewUsed" CssClass="dropdownText">
                                                        <asp:ListItem Text="-- New/Used --" Value="2"></asp:ListItem>
                                                        <asp:ListItem Text="New" Value="1"></asp:ListItem>
                                                        <asp:ListItem Text="Used" Value="0"></asp:ListItem>
                                                    </asp:DropDownList>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Status:<span class="Reqd">*</span> 
                                                </td>
                                                <td class="tablecell">
                                                     
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Condition:<span class="Reqd">*</span> 
                                                </td>
                                                <td class="tablecell">
                                                     
                                                </td>
                                            </tr>
                                        </table>
 
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:right" colspan="2">
                                        <span class="fieldsetTable">* Required</span>
                                    </td>
                                </tr>
                            </table>
                    </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Price">
                    <ContentTemplate>
                    <div style="overflow:hidden">
                            <table class="fieldsetTable" style="margin:5px">
                                <tr>
                                    <td valign="top" style="width: 50%;">
                                        <table class="fieldsetTable" style="width:100%">
                                            <tr>
                                                <td class="tablecell">
                                                    List:<br />
                                                    <asp:TextBox runat="server" ID="txtListPrice" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="tablecell">
                                                    Markup (Pack):<br />
                                                    <asp:TextBox runat="server" ID="txtMarkup" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                                                 
                                        </table>
                                    </td>
                                    <td valign="top" style="width: 50%;">
                                        <table class="fieldsetTable" style="width:100%">
                                            <tr>
                                                <td class="tablecell">
                                                    Cost/ACV:<br />
                                                    <asp:TextBox runat="server" ID="txtCostACV" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="tablecell">
                                                    Advertised Price:<br />
                                                    <asp:TextBox runat="server" ID="txtAdvertisedPrice" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="middle" colspan="2" style="padding-top:4px">
                                        Custom Price Text - overrides vehicle price (70 characters max):<br />
                                        <asp:TextBox runat="server" ID="txtCustomPriceText" Width="98%" CssClass="tdText" TextMode="MultiLine" Rows="2" Height="30px"></asp:TextBox>
 
                                    </td>
                                </tr>
                            </table>
                    </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Equipment">
                    <ContentTemplate>
                    <div style="overflow:hidden">
                        <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" >
                                <div style="margin:5px">
                                    <asp:TextBox runat="server" ID="txtEquipment" Width="99%" Height="80px" CssClass="tdText"
                                                                                            TextMode="MultiLine"></asp:TextBox><br />
                                    <asp:Panel ID="panelOptions" runat="server" Visible="false" Width="99%">
                                        Additional Optional Equipment (check all that apply):<br />
                                         
                                    </asp:Panel>
                                </div>
                        </telerik:RadAjaxPanel>
                    </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Web Description / Video">
                    <ContentTemplate>
                    <div style="overflow:hidden">
                        <div style="margin:5px">
                           <span  class="fieldsetTable">Description On Web:</span><br />
                            <asp:TextBox runat="server" ID="txtWebDescription" Width="98%" Height="106px" CssClass="tdText"
                                                                                TextMode="MultiLine"></asp:TextBox> <br />
                            <asp:CheckBox runat="server" ID="cbUseAutoclickImages" Text="Use Autoclick Images" CssClass="fieldsetTable" />
                            <br /><br />
                            <span  class="fieldsetTable">Embeded Video:</span><br />
                            <asp:Button ID="btnPasteVideoCode" runat="server" CssClass="tdText" Text="Paste Embedded Code" Width="164px" OnClientClick="PasteFromClipboard(); return false;" /> 
                            <asp:Button ID="btnClearVideoCode" runat="server" CssClass="tdText" Text="Clear" Width="55px" OnClientClick="ClearVideoCode(); return false;" /><br />
                            <asp:TextBox runat="server" ID="txtVideoLink" Width="98%" Height="70px" CssClass="tdText" ForeColor="DarkGray"
                                ReadOnly="false" TextMode="MultiLine" onchange="javascript:VideoCodeChanged(this);"
                                ToolTip="Upload your video to Youtube then click the 'Embed' button and copy and paste the code into this field. Your video will appear on the Vehicle Detail page." ></asp:TextBox>
                        </div>                   
 
                    </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
 
    </form>
</body>
</html>
 

Thanks.

Charles

Ivan Danchev
Telerik team
 answered on 19 May 2016
1 answer
2.3K+ views

Hi,

I'm making some progress formatting the header row of my Excel export, but I'd really like to have the columns automatically adjust to fit the width of the content.

Here's my OnInfrastructureExporting event handler:

protected void grdControls_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
{
    var colCount = e.ExportStructure.Tables[0].Columns.Count;
    // Set the header style for all columns
    ExportStyle headerStyle = new ExportStyle();
    headerStyle.ForeColor = Color.White;
    headerStyle.BackColor = Color.Blue;
    headerStyle.Font.Bold = true;
 
    for (var i = 1; i <= colCount; i++)
    {
        e.ExportStructure.Tables[0].Cells[i, 1].Style = headerStyle;
        e.ExportStructure.Tables[0].Columns[i].Width = 200; // Would like auto-width !!
    }
}

 

I've seen similar threads but they are related to export formats other than Xlsx.

Any idea how I can accomplish auto-fit using the above handler?  Or do I need to do that elsewhere?

Thanks for any advice.

Jim

Kostadin
Telerik team
 answered on 19 May 2016
5 answers
420 views

I am having a problem validating the Async File upload control, using a Custom Validator and JavaScript.

The JS I'm using is:

 function isAttachmentValid(sender, args) {

var upload = $find("<%= RadUpload1.ClientID %>");
    args.IsValid = upload.getUploadedFiles().length != 0;

}

This works perfectly fine if I submit the form right away, but if I save the form and come back to it upload.getUploadedFiles().length always = 0 and validation fails.

I should also note that I don't have access the server-side code so validation must be done on the client.

 

Hristo Valyavicharski
Telerik team
 answered on 19 May 2016
1 answer
101 views

Hi,

I'm programmatically creating a grid on the server side, and would like to use the HeaderContextMenu to allow filtering (particularly, we're interested in the 2-step filtering provided in the menu). Because the other options are available elsewhere or are not used in our system, we'd like to have the context menu simply show the "filter" submenu. I can remove elements of the context menu using this code:

this.grid.HeaderContextMenu.ItemCreated += (ss, aa) =>
{
    if (aa.Item.Value == "FilterMenuParent" || (aa.Item.Parent is RadMenuItem && (aa.Item.Parent as RadMenuItem).Value == "FilterMenuParent"))
    {
    }
    else
    {
        aa.Item.Remove();
    }
};
However, everything I've tried to do in order to move the Filter Menu up to the top-level menu has failed.

In the attached image, the red-bordered menu is what we'd like to appear when right-clicking a column title.

Is there a way for me to do this? I've tried hooking into various menu events to replace the menu items with the filter menu, but it seems like it's not possible. The closest I can get so far is the top-level menu simply having the "Filter" option, which opens the Filter Menu. I'd like to skip that first step and just have the filter menu appear.

Eyup
Telerik team
 answered on 19 May 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?