Telerik Forums
UI for ASP.NET AJAX Forum
or
Ask question
All Questions
Unanswered
Answered
110,766 questions
2 answers
117 views
RadTimePicker - High lighting and focusing upon TimeView Popup times

Hi,

We are using RadTimePickers version Version 2008.1.415.35

The problem I’ve noticed is that when entering a time in the text box the associated TimeView popup does not high light or focus upon the entered time.

Strangely, if you select a time via the popup the time is highlight but is not focused upon when re-entering the TimeView popup. 

I've tried a number of methods to allow this:

Server side:

public void _timePicker_SelectedDateChanged(object sender, SelectedDateChangedEventArgs e)
{
    if (_timePicker.SelectedDate.HasValue)
    {
        _timePicker.FocusedDate = _timePicker.SelectedDate.Value;
    }
}

client side:

function OnTimePickerTimeViewOpen(sender, args)

{

var timePicker = sender;

var timeView = timePicker.get_timeView();

var timeToSelect = timePicker.get_selectedDate();

if (timeToSelect != null)

{

timePicker.set_focusedDate(timePicker.get_selectedDate());

timePicker.set_selectedDate(timePicker.get_selectedDate());

timePicker._focusedDate = timePicker.get_selectedDate();

timeView.setTime(timeToSelect.getHours(), timeToSelect.getMinutes(), timeToSelect.getSeconds());

}

}

But none if these methods seem to work

Any help with this issue would be gratefully received

Input
Anatoliy
Top achievements
Rank 2
 answered on 29 Mar 2017
3 answers
183 views
Added hyperlink on cell text is lost after selecting a row

I have a grid where i have attached a hyperlink control to the text in each cell. This allows the user to select a whole row by clicking the white space but clicking the text will (eventually) open up an editor dialog for the row data. The hyperlink appears as expected when the grid is first displayed but if a row is selected then the linking is lost because it is created within the ItemDataBound server side event which is not fired again. I tried adding the link back in the ItemCreated event but the cell contents don't appear to be populated at this point and my grid was displaying with empty cells. Can anyone suggest where I can add my hyperling creation such that it will correctly display on row selection and subsequent repaint of the grid ?

My grid code ....

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PriceList.aspx.cs" Inherits="GridWithFollowTabs.PriceList" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<html>
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
 
        <link href="Skins/Max2017/Ajax.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Button.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Grid.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Input.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Menu.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Splitter.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Window.Max2017.css" rel="stylesheet" type="text/css" />
 
        <style type="text/css">
            html, body, form, RadPane { height: 100%; margin: 0px; padding: 0px; }           
            div.RadMenu .rmLast, floatri { float: right !important; }           
            .rgCommandRow { visibility: collapse; }
             
            .clickable { cursor:pointer; font-weight:normal; text-decoration:none; }
            .clickable:hover { text-decoration: underline !important; }
             
            .mainSelector{ cursor:pointer; width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; position:absolute; }
            .mainSelectorChecked{ width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_checked.png); background-repeat:no-repeat; }
            .mainSelectorUnChecked { width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_unchecked.png); background-repeat:no-repeat; }
                       
            .row_selector { background-image: url("../images/ico_entry_unchecked.png"); background-position: center 6px; background-repeat: no-repeat; clear: left; float: left; min-height: 18px; padding-top: 4px; width: 16px; }
            .row_selectorCurrent { }
            .row_selectorCurrentChecked { background-image: url("../images/ico_currrentEntry_checked.png"); }
            .row_selectorCurrentUnChecked { background-image: url("../images/ico_currrentEntry_unchecked.png"); }
            .row_selectorChecked { background-image: url("../images/ico_entry_checked.png"); }
            .row_selectorSelected { }           
             
            div.RadGrid .rgSelectedRow { background: #e0f18e !important;  }           
             
        </style>
 
    </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>
 
            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" style="z-index: 20000">
            </telerik:RadWindowManager>
 
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    var clickCalledAfterRadconfirm = false;
                    var lastClickedItem = null;
                    var grid = null;
 
                    document.addEventListener("DOMContentLoaded", function () {
                        top.$page.hideLoading();
                    });
 
                    function OnClientItemClicking(sender, eventArgs) {
                        if (!clickCalledAfterRadconfirm) {
                            lastClickedItem = eventArgs.get_item();
                            if (lastClickedItem.get_text() === "Delete" || lastClickedItem.get_text() === "Delete selected entries") {
                                eventArgs.set_cancel(true);
 
                                if (sender.get_element().id === "rmDiscounts" || sender.get_element().id === "cmDiscounts") {
                                    grid = $find("<%= rgDiscounts.ClientID %>");
                                } else {
                                    grid = $find("<%= rgProducts.ClientID %>");
                                }
 
                                var gridItemsCount = grid.get_selectedItems().length;
                                if (gridItemsCount > 0) {
                                    radconfirm("<font color=\"red\">WARNING !!</font><br /><br /> " + gridItemsCount + " entries are selected for deletion.<br /><br />" +
                                        "You are about to PERMANENTLY delete ALL information associated with the selected Price List entries. If you are deleting Provider / Groups then all products for these entries will also be deleted.<br /><br />" +
                                        "Are you sure you want to delete these entries ?? <br /><br />",
                                         confirmCallbackFunction, 600, 300, null, "Confirm delete request", "../images/ModalDialogAlert.gif");
                                }
                            }
                        }
                    }
 
                    function confirmCallbackFunction(args) {
                        if (args) {
                            clickCalledAfterRadconfirm = true;
                            lastClickedItem.click();
                        }
                        else
                            clickCalledAfterRadconfirm = false;
 
                        lastClickedItem = null;
                    }
 
                    function onDiscountsClientItemClicked(sender, args) {
                        var item = args.get_item(),
                            itemValue = item.get_value(),
                            itemText = item.get_text(),
                            itemAttribute = item.get_attributes().getAttribute("Device");
                    }
 
                    function onProductsClientItemClicked(sender, args) {
                        var item = args.get_item(),
                            itemValue = item.get_value(),
                            itemText = item.get_text(),
                            itemAttribute = item.get_attributes().getAttribute("Device");
                    }
 
                    function RowContextMenu(sender, eventArgs) {
                        var menu = null;
 
                        if (sender.get_element().id === "rgDiscounts") {
                            menu = $find("<%=cmDiscounts.ClientID %>");
                        } else {
                            menu = $find("<%=cmProducts.ClientID %>");
                        }
                        var evt = eventArgs.get_domEvent();
 
                        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                            return;
                        }
 
                        var index = eventArgs.get_itemIndexHierarchical();
                        //document.getElementById("radGridClickedRowIndex").value = index;
 
                        sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
 
                        menu.show(evt);
 
                        evt.cancelBubble = true;
                        evt.returnValue = false;
 
                        if (evt.stopPropagation) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                    }
 
                    function ShowEditForm(id, rowIndex) {
                        var grid = $find("<%= rgDiscounts.ClientID %>");
 
                        var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                        grid.get_masterTableView().selectItem(rowControl, true);
 
                        window.radopen("WebForm1.aspx?ItemKey=" + id, "RadWindow2");
                        return false;
                    }
 
                    function SplitterResized(sender, eventArgs) {
                        var pane1 = sender.getPaneById('<%= Radpane1.ClientID %>');
                        var menu1 = $find("<%= rmDiscounts.ClientID %>");
                        var grid1 = $find("<%= rgDiscounts.ClientID %>");
 
                        var newHeight1 = menu1.get_childListElement().clientHeight + grid1.GridHeaderDiv.clientHeight + 1;
                        grid1.GridDataDiv.style.height = pane1.get_height() - newHeight1 + "px";
                        grid1.repaint();
 
                        var pane2 = sender.getPaneById('<%= Radpane2.ClientID %>');
                        var menu2 = $find("<%= rmProducts.ClientID %>");
                        var grid2 = $find("<%= rgProducts.ClientID %>");
 
                        var newHeight2 = menu2.get_childListElement().clientHeight + grid2.GridHeaderDiv.clientHeight +1;
                        grid2.GridDataDiv.style.height = pane2.get_height() - newHeight2 + "px";
                        grid2.repaint();
                    }
 
                    function DiscountsResized(sender, eventArgs) {
                        var menu = $find("<%= rmDiscounts.ClientID %>");
                        var grid = $find("<%= rgDiscounts.ClientID %>");
 
                        var newHeight = menu.get_childListElement().clientHeight + grid.GridHeaderDiv.clientHeight + 1;
                        grid.GridDataDiv.style.height = sender.get_height() - newHeight + "px";
                        grid.repaint();
                    }
 
                    function ProductsResized(sender, eventArgs) {
                        var menu = $find("<%= rmProducts.ClientID %>");
                        var grid = $find("<%= rgProducts.ClientID %>");
 
                        var newHeight = menu.get_childListElement().clientHeight + grid.GridHeaderDiv.clientHeight + 1;
                        grid.GridDataDiv.style.height = sender.get_height() - newHeight + "px";
                        grid.repaint();
                    }
 
                    function GridCreated(sender, eventArgs) {
                        var menu = null;
                        var parent = null;
                        var scrollArea = sender.GridDataDiv;
 
                        // which grid is this ??
                        if( sender.ClientID === "rgDiscounts" ) {
                            menu = $find("<%= rmDiscounts.ClientID %>");
                            parent = $get("Radpane1");
                        } else {
                            menu = $find("<%= rmProducts.ClientID %>");
                            parent = $get("Radpane2");
                        }
 
                        var gridHeader = sender.GridHeaderDiv;
                        var newHeight = menu.get_childListElement().clientHeight + gridHeader.clientHeight + 1;
                        scrollArea.style.height = parent.clientHeight - newHeight + "px";
                    }
 
                    function RowSelecting(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
 
                        if (sender.ClientID === "rgDiscounts") {
                            gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                        } else {
                            gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                        }
                    }
 
                    function RowDeSelecting(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
 
                        if (sender.ClientID === "rgDiscounts") {
                            gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector";
                        } else {
                            gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector";
                        }
                    }
 
                    function GridRowClicked(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedItems = masterTableView.get_selectedItems();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var flaggedAsSelected = false;
 
                        for (var i = 0; i < selectedItems.length; i++) {
                            if (selectedItems[i].get_itemIndex() === selectedIndex) {
                                flaggedAsSelected = true;
                            }
                            selectedItems[i].set_selected = false;
                            if (sender.ClientID === "rgDiscounts") {
                                selectedItems[i].get_cell("rgDiscountSelectCol").className = "row_selector";
                            } else {
                                selectedItems[i].get_cell("rgProductSelectCol").className = "row_selector";
                            }
                        }
 
                        if (!flaggedAsSelected) {
                            // set our current row to selected
                            var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
                            if (sender.ClientID === "rgDiscounts") {
                                gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                            } else {
                                gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                            }
                         }
                    }
 
                </script>
            </telerik:RadCodeBlock>
 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgDiscounts">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDiscounts"></telerik:AjaxUpdatedControl>
                            <telerik:AjaxUpdatedControl ControlID="rgProducts" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rgProducts">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgProducts"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
 
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Max2017" EnableEmbeddedSkins="false"></telerik:RadAjaxLoadingPanel>
 
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" Height="100%" ResizeWithBrowserWindow="true"
                ResizeMode="Proportional" VisibleDuringInit="false" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientLoad="SplitterResized" OnClientResized="SplitterResized">
 
                <telerik:RadPane ID="Radpane1" runat="server" Scrolling="Y" Width="100%" OnClientResized="DiscountsResized">
 
                    <telerik:RadMenu ID="rmDiscounts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                        EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked" OnItemClick="rmDiscounts_ItemClick">
                        <Items>
                            <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Items" BorderStyle="None">
                                <GroupSettings ExpandDirection="Down" Width="200px" />
                                <Items>
                                    <telerik:RadMenuItem Text="Add Product Provider"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Product Group"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Product Group Type"></telerik:RadMenuItem>                                   
                                </Items>                               
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Refresh" BorderStyle="None" />
                        </Items>                       
                    </telerik:RadMenu>
 
                    <telerik:RadGrid ID="rgDiscounts" runat="server" Width="100%" RenderMode="Lightweight"
                        AllowSorting="true" AllowMultiRowSelection="true" CssClass="RadGrid_RoundCorners"
                        Skin="Max2017" EnableEmbeddedSkins="false"
                        OnNeedDataSource="rgDiscounts_NeedDataSource" OnItemCreated="rgDiscounts_ItemCreated" OnItemDataBound="rgDiscounts_ItemDataBound"
                        OnUpdateCommand="rgDiscounts_UpdateCommand" OnInsertCommand="rgDiscounts_InsertCommand" OnDeleteCommand="rgDiscounts_DeleteCommand"
                        OnPreRender="rgDiscounts_PreRender" OnItemCommand="rgDiscounts_ItemCommand">
 
                        <MasterTableView DataKeyNames="Discount_Id" ClientDataKeyNames="Discount_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
 
                            <Columns>
                                <telerik:GridClientSelectColumn UniqueName="rgDiscountSelectCol">
                                    <HeaderStyle Width="30px" />
                                </telerik:GridClientSelectColumn>
 
                                <telerik:GridBoundColumn DataField="Discount_Id" UniqueName="DiscountId" Display="false">
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Provider" HeaderText="Product Provider" SortExpression="Product_Provider"
                                    UniqueName="ProductProvider">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                    <ItemStyle CssClass="clickable" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Group" HeaderText="Product Group" SortExpression="Product_Group"
                                    UniqueName="ProductGroup">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                    <ItemStyle CssClass="clickable" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridNumericColumn DataField="Discount_Percent" HeaderText="Discount % (Cost)" SortExpression="Discount_Percent"
                                    UniqueName="DiscountPercent" DataType="System.Double" DataFormatString="{0:#,##0.0}">
                                    <HeaderStyle Width="20%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Renewal_Percent" HeaderText="Discount % (Renew)" SortExpression="Renewal_Percent"
                                    UniqueName="RenewalPercent" DataType="System.Double" DataFormatString="{0:#,##0.0}">
                                    <HeaderStyle Width="20%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                            </Columns>
 
                        </MasterTableView>
 
                        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
                            <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
                            <ClientEvents OnRowContextMenu="RowContextMenu" OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />
                        </ClientSettings>
 
                    </telerik:RadGrid>
 
                </telerik:RadPane>
 
                <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Both" EnableResize="True">
                </telerik:RadSplitBar>
 
                <telerik:RadPane ID="Radpane2" runat="server" Scrolling="Y" Width="100%" OnClientResized="ProductsResized">
 
                    <telerik:RadMenu ID="rmProducts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                        EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onProductsClientItemClicked" OnItemClick="rmProducts_ItemClick">
                        <Items>
                            <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Refresh" BorderStyle="None" />
                        </Items>                       
                    </telerik:RadMenu>
 
                    <telerik:RadGrid ID="rgProducts" runat="server" Width="100%" AllowMultiRowSelection="true"
                        AllowSorting="true" RenderMode="Lightweight" CssClass="RadGrid_RoundCorners" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnNeedDataSource="rgProducts_NeedDataSource" OnItemCreated="rgProducts_ItemCreated" OnItemDataBound="rgProducts_ItemDataBound"
                        OnUpdateCommand="rgProducts_UpdateCommand" OnInsertCommand="rgProducts_InsertCommand" OnDeleteCommand="rgProducts_DeleteCommand"
                        OnItemCommand="rgProducts_ItemCommand">
 
                        <MasterTableView DataKeyNames="Product_Id" ClientDataKeyNames="Product_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
 
                            <Columns>
                                <telerik:GridBoundColumn DataField="Product_Id" UniqueName="ProductId" Display="false">
                                </telerik:GridBoundColumn>
 
                                <telerik:GridClientSelectColumn UniqueName="rgProductSelectCol">
                                    <HeaderStyle Width="30px" />
                                </telerik:GridClientSelectColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Code" HeaderText="Product Code" SortExpression="Product_Code"
                                    UniqueName="ProductCode">
                                    <HeaderStyle Width="12%" Font-Bold="true" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Description" HeaderText="Product Description" SortExpression="Product_Description"
                                    UniqueName="ProductDescription">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridNumericColumn DataField="Unit_Sell" HeaderText="Unit Sell" SortExpression="Unit_Sell"
                                    UniqueName="UnitSell" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Unit_Cost" HeaderText="Unit Cost" SortExpression="Unit_Cost"
                                    UniqueName="UnitCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Renewal_Cost" HeaderText="Renewal Cost" SortExpression="Renewal_Cost"
                                    UniqueName="RenewalCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="9%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments"
                                    UniqueName="Comments">
                                    <HeaderStyle  Font-Bold="true" />
                                </telerik:GridBoundColumn>
                            </Columns>
 
                        </MasterTableView>
 
                        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true" >
                            <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
                            <ClientEvents OnGridCreated="GridCreated" OnRowSelecting="RowSelecting" OnRowDeselecting="RowDeSelecting" OnRowClick="GridRowClicked" />
                        </ClientSettings>
 
                    </telerik:RadGrid>
 
                </telerik:RadPane>
 
            </telerik:RadSplitter>
 
            <telerik:RadContextMenu ID="cmDiscounts" runat="server"
                Skin="Max2017" EnableEmbeddedSkins="false" EnableRoundedCorners="true" EnableShadows="true"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="Add a new Item"></telerik:RadMenuItem>
                    <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Delete selected entries"></telerik:RadMenuItem>
                    <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Provider"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Group"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Group Type"></telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
 
            <telerik:RadContextMenu ID="cmProducts" runat="server"
                EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onProductsClientItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Delete selected entries" BorderStyle="None" />
                </Items>                       
            </telerik:RadContextMenu>
 
            <asp:HiddenField ID="addrBook" runat="server" />
            <asp:HiddenField ID="dbServer" runat="server" />
            <asp:HiddenField ID="mxServer" runat="server" />
            <asp:HiddenField ID="userName" runat="server" />
            <asp:HiddenField ID="userPass" runat="server" />
 
            <input id="currDisc" runat="server" visible="false" />
 
        </form>
    </body>
</html>

 

And the ItemDataBound server event to attach the hyperlink to the cell text ...

protected void rgDiscounts_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataBoundItem = (GridDataItem)e.Item;
 
        foreach (GridColumn col in rgDiscounts.MasterTableView.RenderColumns)
        {
            if (col.Display && col.Visible && col.Selectable)
            {
                HyperLink link = new HyperLink();
                link.Text = dataBoundItem[col.UniqueName].Text;
                link.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", dataBoundItem["DiscountId"].Text, e.Item.ItemIndex);
                dataBoundItem[col.UniqueName].Controls.Add(link);
            }
        }
    }
}

 

Grid
Eyup
Telerik team
 answered on 29 Mar 2017
1 answer
166 views
RadMenu in Grid CommandItemTemplate

I am trying to replicate the look and feel of an existing web app and need to have a menu in a grid command row that includes a dropdownlist. I have added the menu but the dropdown list is being hidden by the grid. I've tried changing the z-index but cannot get the list to appear in front of the grid.

<telerik:RadGrid ID="rgDiscounts" runat="server" Width="100%" RenderMode="Lightweight"
    AllowSorting="true" AllowMultiRowSelection="true" Skin="Max2017" EnableEmbeddedSkins="false"
    OnNeedDataSource="rgDiscounts_NeedDataSource" OnItemCreated="rgDiscounts_ItemCreated" OnItemDataBound="rgDiscounts_ItemDataBound"
    OnUpdateCommand="rgDiscounts_UpdateCommand" OnInsertCommand="rgDiscounts_InsertCommand" OnDeleteCommand="rgDiscounts_DeleteCommand"
    OnPreRender="rgDiscounts_PreRender" OnItemCommand="rgDiscounts_ItemCommand">
 
    <MasterTableView DataKeyNames="Discount_Id" ClientDataKeyNames="Discount_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
 
        <CommandItemTemplate>
            <telerik:RadMenu ID="rmDiscounts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked" OnItemClick="rmDiscounts_ItemClick">
                <Items>
                    <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Items" BorderStyle="None" style="z-index: 9999;" >
                        <GroupSettings ExpandDirection="Down" Width="200px" />
                        <Items>
                            <telerik:RadMenuItem Text="Add Product Provider"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Add Product Group"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Add Product Group Type"></telerik:RadMenuItem>                                   
                        </Items>                               
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem BorderStyle="None" ImageUrl="Images/Ico_Refresh_18x18_blk.png" />
                </Items>                       
            </telerik:RadMenu>
        </CommandItemTemplate>
 
        <Columns>
 
          ......................................
 
        </Columns>
 
    </MasterTableView>
 
    <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
        <ClientEvents OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />
    </ClientSettings>
 
</telerik:RadGrid>

 

Kyle

Grid
Eyup
Telerik team
 answered on 29 Mar 2017
1 answer
132 views
GridAutoCompleteColumn - JQuery Autocomplete?

I used to have a page with a JQuery Autocomplete. It used 2 textboxes, one for the text search, and one for the returned value.

It was setup like this

//AutoComplete functions
        $(document).ready(function () {
 
            $(function () {
                initializer();
            });
 
            var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
            prmInstance.add_endRequest(function () {
 
                initializer();
 
            });
 
            jQuery(function ($) {
 
                $('#<%=txtPBId.ClientID%>').change(function (e) {
                    var val = $(this).val();
                    if (val == '')
                        $('#<%=hdnPBId.ClientID%>').val("");
                });
 
            });
 
            // Setup AutoComplete
            function initializer() {
 
                $('#<%=txtPBId.ClientID%>').autocomplete({
                    cacheLength: 1,
                    source: function (request, response) {
                        $.ajax({
                            url: "../WS/AutoComplete.aspx",
                            dataType: "json",
                            data: {
                                term: request.term,
                                ref: 1,
                                random: new Date().getTime()
                            },
                            success: function (data) {
                                response(data);
                                $('#<%=hdnPBId.ClientID%>').val("");
                            },
                            error: function (model, error) {
                                $('#<%=hdnPBId.ClientID%>').val("");
                                //alert("No code found.");
                            }
 
                        });
                    },
                    select: function (event, ui) {
                        $('#<%=hdnPBId.ClientID%>').val(ui.item.idval);
                    }
                });
 
            }
 
        });

 

I now want to use a RadGrid with InPlace Editing. Is there any way of tying a GridAutoCompleteColumn to the above?

I can't use Datasources/Tablenames etc.

Grid
Ben
Top achievements
Rank 1
 answered on 29 Mar 2017
2 answers
593 views
RadColorPicker.SelectedColor return Name or ColorCode
I try to pick color from RadColorPicker on IE6 .When the code behind get color from RadColorPicker.SelectedColor this properties sometime RadColorPicker return value color code(ffffffff) and sometime are return color names(White).
How I can force RadColorPicker to just return color code like ffffffff?
ColorPicker
Ramesh
Top achievements
Rank 1
 answered on 29 Mar 2017
1 answer
588 views
RadGrid Height / ScrollHeight issue

Hello,

I have a Radgrid with many columns, and without paging.

My users needs to (and can) scroll horizontally to read all the fields. But only by using the horizontal scrolling at the bottom of the grid, which is not convenient when the Grid has 100 rows or more. (If you want to read the first row, you need to scroll down the page, scroll right the grid, scroll up the page again).

I tried to use the ScrollHeight attribute but nothing happens. I also tried to add a height to my RadGrid, the grid itself respect the height but the rows don't (and overflow on the grids below).

I create my grid from the code behind so here is the code where it happens.

Can you help me ?

Thank you !

RadGrid grid = new RadGrid();
grid.ID = gridID;
grid.DataSourceID = dataSourceID;
grid.AllowMultiRowSelection = true;
grid.AllowPaging = false;
grid.ColumnCreated += Grid_ColumnCreated;
grid.BatchEditCommand += Grid_BatchEditCommand;
grid.AllowAutomaticUpdates = true;
grid.AllowAutomaticDeletes = true;
grid.AllowAutomaticInserts = false;
grid.AutoGenerateColumns = true;
//grid.Height = Unit.Pixel(300);
 
/* Client Settings */
grid.ClientSettings.Selecting.AllowRowSelect = true;
grid.ClientSettings.Selecting.UseClientSelectColumnOnly = true;
grid.ClientSettings.Scrolling.AllowScroll = true;
grid.ClientSettings.Scrolling.UseStaticHeaders = false;
grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(200);
grid.ClientSettings.ClientEvents.OnGridCreated = "SetupButtons";
grid.ClientSettings.ClientEvents.OnKeyPress = "GridKeyPress";
grid.ClientSettings.ClientEvents.OnCommand = "OnGridCommand";
 
/* HeaderStyle */
grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
grid.HeaderStyle.BorderWidth = 1;
 
/* MasterTableView */
grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
grid.MasterTableView.TableLayout = GridTableLayout.Fixed;
grid.MasterTableView.DataKeyNames = new string[] { dataKey };
grid.MasterTableView.EditMode = GridEditMode.Batch;
grid.MasterTableView.BatchEditingSettings.EditType = GridBatchEditingType.Cell;
 
/* CommandItemSettings */
grid.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = false;
grid.MasterTableView.CommandItemSettings.ShowRefreshButton = true;
grid.MasterTableView.CommandItemSettings.ShowCancelChangesButton = true;
grid.MasterTableView.CommandItemSettings.ShowSaveChangesButton = true;
 
 
/* Actions Columns */
GridClientSelectColumn selectColumn = new GridClientSelectColumn();
selectColumn.UniqueName = "ClientSelectColumn";
selectColumn.HeaderStyle.Width = Unit.Pixel(50);
grid.Columns.Add(selectColumn);
 
GridClientDeleteColumn deleteColumn = new GridClientDeleteColumn();
deleteColumn.UniqueName = "ClientDeleteColumn";
deleteColumn.HeaderStyle.Width = Unit.Pixel(50);
grid.Columns.Add(deleteColumn);
 
/* ADDING EVERYTHING ON THE PAGE */
Grids.Controls.Add(info); //info is a RadLabel
Grids.Controls.Add(grid);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid, info, RadAjaxLoadingPanel);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid, grid, RadAjaxLoadingPanel);
 
 
protected void Grid_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)
{
    if (e.Column is GridBoundColumn)
    {
        GridBoundColumn column = (GridBoundColumn)e.Column;
        if (isHidden)
        {
            column.Display = false;
            column.ReadOnly = true;
        }
        else
        {
            if (isReadOnly)
            {
                column.ReadOnly = true;
            }
 
            //Change column header
            column.HeaderText = text;
            column.HeaderStyle.Width = Unit.Pixel(size);
            column.HeaderTooltip = tooltip;
        }
    }
}
Grid
Guilhem
Top achievements
Rank 1
 answered on 29 Mar 2017
0 answers
99 views
Filter Grid Inside ComboBox

I currently have a RadGrid in the drop down of a RadComboBox. 

http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/load-on-demand-radgrid-in-radcombobox

I turned on the filtering of the columns and hid the button because I need the grid to filter on keyress so using java to assist with this.

function Filter(colName, filtertxt) {
                        var filterTxt = document.getElementById(filtertxt);
                        var MasterTable = $find("<%= ddlProductClass.Items[0].FindControl("grdProductClass").ClientID %>").get_masterTableView();
    
                        var hidden = document.getElementById('<%= Hidden1.ClientID %>');
                        hidden.value = colName;
                        if (filterTxt.value.length > 0) {
                            MasterTable.filter(colName, filterTxt.value, Telerik.Web.UI.GridFilterFunction.StartsWith);
                        }
                        else
                        {
                            MasterTable.filter(colName, filterTxt.value, Telerik.Web.UI.GridFilterFunction.NoFilter);
                        }
                    }
                    function FocusFilter(filter) {
                        var input = document.getElementById(filter);
                        if (input.createTextRange) {
                            var FieldRange = input.createTextRange();
                            FieldRange.moveStart('character', input.value.length);
                            FieldRange.select();
                        }
                    } 

 

code found from another sample.  My issue is when I start typing in the filter box I get 1 or 2 characters in and the page acts like it does a post back (flickers) and combobox drop down closes.  If I open the drop down my records are filtered based on what I typed in. 

 

Any suggestions?

ComboBox
Duncan
Top achievements
Rank 1
 asked on 29 Mar 2017
2 answers
225 views
Persist grid filter expression
Hi,

I am looking into couple of forums which talks about filter setting, filter expressions, however, solution which I am looking for is not available.

Problem:
1.I have multiple columns on my grid. One of them is Hyperlink column e.g. Employee Name
2. Now I am filtering on particular column, e.g. Department and storing that value into session, as I can click on employee name hyperlink to redirect to employee profile page.
Session["FILTER_EXPRESSION"] = reportingGrid.MasterTableView.FilterExpression;

3. Now when I again visiting to grid page, I am using following line of code:
reportingGrid.MasterTableView.FilterExpression = Session["FILTER_EXPRESSION"].ToString();

4. This is filtering properly but, filter text boxes are black, which suppose to load with filter expression value.

5.I got following line of code which is used to show filter value into textbox.
GridColumn gc = reportingGrid.MasterTableView.GetColumnSafe("DepartmentName");
               gc.CurrentFilterFunction = GridKnownFunction.Contains;
               gc.CurrentFilterValue = "Finance";

 but I dont want to use this. I want to read the string which is stored in session and load values. Because this is used when you know on which column filter is applied. But in my case, in session variable I dont know, on how many columns filter applied and what is their respective values.

I will really appreciate your help.
Avinash
Grid
Dev Cesar Augusto
Top achievements
Rank 1
 answered on 28 Mar 2017
3 answers
194 views
RadGrid, block Grid on RowClick ItemCommand

Hi, thanks in advance for any help.

I have a page with a RadGrid and it has declared the "OnItemCommand" attribute. On a switch I have the "RowClick" case, where I take in consideration the main ID of the row and then I present details of that element in a bunch of textboxes.

What I need to do is to block UI when the user clicks on the Row while the information is loading. I know that Grid has its own loading Image but everything is still enabled when loading. I need to block because the rows in the gridview have buttons for actions like "view", "edit", "delete" (image buttons with "OnClientClicked" methods defined that open RadWindows as popups).

I am using jquery.blockUI, I am calling it on the codebehind at the "RowClick" case and unBlocking it once all the info is loaded at the end of "Page_Load" but the BlockUI is appearing after the grid loading animation is completed and I want them to happen at the same time.

 

protected void MainGridView_OnItemCommand(object sender, GridCommandEventArgs e)
{

     switch (e.CommandName)

     { 

          case "RowClick":                    

          Page page = HttpContext.Current.Handler as Page;

          ScriptManager.RegisterStartupScript(page, page.GetType(), "err_msg", "blockUI();", true);  // "blockUI" function has only a call to $.blockUI()

          fill_Details(MainGridView.SelectedValue);

          break;

          case "x":

           ....

           ....

       }

}

 

So, basically what I need is to be able to execute a javascript function at the same time that the loading image appears on the grid so I can disable any other action while loading is still in progress. 

 

Any comment, suggestion or hint will be highly appreciated.

 

Thanks & Regards

Oscar

 

Grid
Oscar Emiliano
Top achievements
Rank 1
 answered on 28 Mar 2017
9 answers
421 views
Pagespeed defer loading recommendation
Hello,
 I have a ASP.NET Master page set up, with RadScriptManager as follows:
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            OnAsyncPostBackError="RadScriptManager1_AsyncPostBackError"
            AsyncPostBackTimeout="180" CompositeScript-ScriptMode="Release" OutputCompression="AutoDetect" CdnSettings-TelerikCdn="Enabled"
            ScriptMode="Release">
            <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" />
                <asp:ScriptReference Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
                    Name="MicrosoftAjax.js" Path="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" />
            </Scripts>
        </telerik:RadScriptManager>

On running the Google PageSpeed tool, I get the recommendation to "Defer parsing of javascript during initial page load".

1.2MiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
What is the recommended way to accomplish this? Techniques shown in other sites seem to involve dynamically creating a script element when the page has loaded etc. But how do  I do this with the script manager?

Thanks in advance,


ScriptManager and StyleSheetManager
Marin Bratanov
Telerik team
 answered on 28 Mar 2017
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Editor
Scheduler
ComboBox
Ajax
Window
TreeView
Menu
Calendar
Chart (Obsolete)
TabStrip
Input
Dock
ToolTip
Upload (Obsolete)
AsyncUpload
WebParts for SharePoint
PanelBar
FileExplorer
Splitter
ListBox
Chart (HTML5)
Rotator
ListView
Button
ToolBar
TreeList
Sharepoint Integration
FormDecorator
Filter
Slider
ScriptManager and StyleSheetManager
UI for ASP.NET AJAX in ASP.NET MVC
AutoCompleteBox
PivotGrid
Installer and VS Extensions
Spell
Documentation and Tutorials
ImageEditor
Captcha
RibbonBar
DropDownList
OrgChart
Visual Style Builder
DropDownTree
Gantt
ColorPicker
Notification
BinaryImage
SkinManager
TileList
Wizard
SearchBox
Spreadsheet
Map
ImageGallery
Rating
DatePicker
MediaPlayer
XmlHttpPanel
Diagram
Compression
DataPager
SiteMap
CloudUpload
LightBox
Gauge
PageLayout
AjaxLoadingPanel
Navigation
SocialShare
DataForm
Persistence Framework
ClientExportManager
ProgressArea
TagCloud
CheckBox
AjaxPanel
Barcode
ClientDataSource
NumericTextBox
PdfViewer
DateTimePicker
MultiColumnComboBox
MultiSelect
RadioButtonList
MaskedTextBox
Theme Builder
Styling
ProgressBar
DateInput
Chat
ODataDataSource
Licensing
MonthYearPicker
TimePicker
LinkButton
ToggleButton
Accessibility
Label
Localization
DateRangePicker
TreeMap
Security
ImageButton
InputManager
Timeline
Card
Drawer
PushButton
Ticker
Signature
Avatar
Switch
OTPInput
Breadcrumb
SplitButton
DragDropManager
Stepper
FloatingActionButton
Chip
ChipList
AIPrompt
Badge
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
652 653
654
655 656
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how