Hello,
I have a page with a masterpage that has a set of Radmenu items, when i add a couple radgrids to the page and enable the AllowFilteringByColumn option, it causes the Radmenu to display incorrectly. Is there some way i can allow filtering without messing up the menu?
I'm using telerick UI for asp.net ajax version 2016.3.1027.45
I'm attaching a screenshot showing the difference.
Here is the code.
Thanks!
Master Page:
01.<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="OpenCall.master.vb"02. Inherits="ListManagement.OpenCall" %>03. 04.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>05. 06.<!DOCTYPE html>07.<html xmlns="http://www.w3.org/1999/xhtml">08.<head runat="server">09. <title></title>10. <asp:ContentPlaceHolder ID="head" runat="server">11. </asp:ContentPlaceHolder>12. <link href="../Styles/style.css" rel="stylesheet" />13.</head>14.<body>15. <form id="form1" runat="server" class="noselect">16. <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>17. <div id="header_container">18. <div class="logo">19. <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/Canonlogo.gif"></asp:ImageMap>20. </div>21. <div id="header">22. 23. 24. <h2>List Manager</h2>25. </div>26. <div id="main-nav">27. <telerik:RadMenu ID="menu" runat="server" DataFieldID="Title" Style="z-index:2900"28. DataNavigateUrlField="Url" DataSourceID="RadSiteMapDataSource1" ToolTip="Menu"29. DataTextField="Title"30. EnableTheming="True" Skin="Windows7" Font-Bold="True" RenderMode="Classic" Visible="False">31. </telerik:RadMenu>32. <telerik:RadSiteMapDataSource ID="RadSiteMapDataSource1" runat="server" SiteMapFile="Web.sitemap"33. ShowStartingNode="False" SiteMapProvider="NADSiteMap"></telerik:RadSiteMapDataSource>34. <telerik:RadMenu ID="AgentMenu" runat="server" DataFieldID="Title" Style="z-index:2900"35. DataNavigateUrlField="Url" DataSourceID="RadSiteMapDataSource2" ToolTip="Menu"36. DataTextField="Title"37. EnableTheming="True" Skin="Windows7" Font-Bold="True" RenderMode="Classic" Visible="False">38. </telerik:RadMenu>39. <telerik:RadSiteMapDataSource ID="RadSiteMapDataSource2" runat="server" SiteMapFile="Web.sitemap"40. ShowStartingNode="False" SiteMapProvider="AgentSiteMap"></telerik:RadSiteMapDataSource>41. </div>42. </div>43. <asp:Label ID="Msg" runat="server" Text=""></asp:Label>44. <div id="site_content" runat="server">45. 46. <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">47. </asp:ContentPlaceHolder>48. 49. </div>50. <div id="footer_container" class="noselect">51. <p>52. © <%: DateTime.Now.Year %> - Outbound Dialing List Manager53. </p>54. </div>55. 56. </form>57.</body>58.</html>
Grids.aspx
01.<%@ Page Title="" Language="vb" AutoEventWireup="true" MasterPageFile="~/MasterPages/OpenCall.Master"02. CodeBehind="Grids.aspx.vb" Inherits="ListManagement.Grids" %>03. 04. 05.<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">06.</asp:Content>07.<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">08. <div style="width: 100%">09. <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="LMData" AllowFilteringByColumn="true" AllowMultiRowSelection="true"10. Height="600px" GroupingSettings-CaseSensitive="false" Skin="Windows7" AutoGenerateColumns="false" AllowPaging="true" AllowCustomPaging="false" PageSize="30">11. <ClientSettings>12. <Scrolling AllowScroll="true" SaveScrollPosition="true" />13. <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" UseClientSelectColumnOnly="false" />14. <%--<ClientEvents OnRowSelected="rowSelected" OnRowDeselected="rowDeselected" OnRowCreated="rowCreated" OnGridCreated="gridCreated" />--%>15. </ClientSettings>16. <MasterTableView CommandItemDisplay="Top" TableLayout="Auto" ClientDataKeyNames="ID">17. 18. <Columns>19. <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID" Display="false" ShowFilterIcon="false"></telerik:GridBoundColumn>20. <telerik:GridClientSelectColumn UniqueName="ClientSelectCol" HeaderStyle-Width="30px" ItemStyle-Width="30px" ShowFilterIcon="false"></telerik:GridClientSelectColumn>21. <telerik:GridBoundColumn DataField="First_Name" HeaderText="First_Name" UniqueName="First_Name" Display="false" ShowFilterIcon="false"></telerik:GridBoundColumn>22. <telerik:GridBoundColumn DataField="Last_Name" HeaderText="Last_Name" UniqueName="Last_Name" Display="false" ShowFilterIcon="false"></telerik:GridBoundColumn>23. <telerik:GridCalculatedColumn HeaderStyle-Width="120px" ItemStyle-Width="90px" HeaderText="Name" UniqueName="Name" DataFields="First_Name,Last_Name" Expression='{0} + " " + {1}'></telerik:GridCalculatedColumn>24. <telerik:GridBoundColumn DataField="Company_Name" HeaderText="Company Name" UniqueName="Company_Name"></telerik:GridBoundColumn>25. <telerik:GridBoundColumn DataField="FileName" HeaderText="File Name" UniqueName="FileName"></telerik:GridBoundColumn>26. </Columns>27. </MasterTableView>28. 29. </telerik:RadGrid>30. <asp:SqlDataSource runat="server" ID="LMData" ConnectionString="<%$ Connectionstrings:CITSSQLDEVLM %>" SelectCommand="OpenCases" SelectCommandType="StoredProcedure"></asp:SqlDataSource>31. <telerik:RadComboBox ID="cbEmp" runat="server" DataSourceID="SqlDataSourceAgents"32. AutoPostBack="true" DataTextField="EmpName" DataValueField="EMPID" MarkFirstMatch="True"33. EmptyMessage="Select Agent..." AppendDataBoundItems="True" AllowCustomText="True"34. Skin="Windows7">35. <Items>36. <telerik:RadComboBoxItem Text="ALL" Selected="true" Value="NULL" />37. </Items>38. </telerik:RadComboBox>39. <asp:SqlDataSource ID="SqlDataSourceAgents" runat="server" ConnectionString="<%$ ConnectionStrings:EMPInfoConnectionString %>"40. SelectCommand="uspOutboundSalesEmployees" SelectCommandType="StoredProcedure"></asp:SqlDataSource>41. <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="SqlDataSource3" AllowFilteringByColumn="true" Height="600px" RenderMode="Lightweight"42. GroupingSettings-CaseSensitive="false" AllowPaging="true" AllowCustomPaging="false" PageSize="30" Skin="Windows7" AllowMultiRowSelection="true">43. </telerik:RadGrid>44. 45. <asp:SqlDataSource runat="server" ID="SqlDataSource3" ConnectionString='<%$ ConnectionStrings:CITSSQLDEVLM %>'46. SelectCommand="EmpCases" SelectCommandType="StoredProcedure">47. <SelectParameters>48. <asp:ControlParameter ControlID="cbEmp" Name="EmpID" PropertyName="SelectedValue"49. Type="String" />50. </SelectParameters>51. </asp:SqlDataSource>52. </div>53. 54.</asp:Content>2 Answers, 1 is accepted
0
Accepted
Hi William,
The issue stems from the mixed render modes - the grid brings a context menu with the lightweight render mode, and the menu is explicitly set to use the classic mode.
You should choose either of the modes and apply it to the controls on the page.
You can read more on the subject in the following pages:
- http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes
- http://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes
- http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#incorrect-or-distorted-appearance
Regards,
Marin BratanovTelerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
william
Top achievements
Rank 1
Rank 1
answered on 11 May 2017, 08:46 PM
Thank you for the help, I'd been staring at the radmenu for far to long and completely missed the rendermode was classic on them.
not sure why I set the grids to lightweight in the first place, unless it was just from the examples on the documentation. It works great with everything set to classic.