RadGrid filter are different in mobile device

4 posts, 0 answers
  1. ketan
    ketan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 03 Feb Link to this post

    Hello Team ,

    I have a radgrid in my project there many filters are there

    Grid code:

    <telerik:RadGrid ID="rgActivityLogGrid" RenderMode="Auto" runat="server" EnableLinqExpressions="False" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" OnNeedDataSource="rgActivityLogGrid_NeedDataSource"
                                AutoGenerateColumns="False" MasterTableView-CommandItemDisplay="Bottom" ExportSettings-IgnorePaging="true" ExportSettings-ExportOnlyData="true" ExportSettings-Excel-Format="Biff" ExportSettings-FileName="ActivityLog"
                                MasterTableView-CommandItemSettings-ShowExportToExcelButton="true" MasterTableView-CommandItemSettings-ShowExportToCsvButton="true" MasterTableView-CommandItemSettings-ShowExportToPdfButton="true" GroupPanelPosition="Top">
                                <ExportSettings IgnorePaging="false" OpenInNewWindow="true">
                                    <Pdf PageHeight="210mm" PageWidth="297mm" DefaultFontFamily="Arial Unicode MS" PageTopMargin="45mm"
                                        BorderStyle="Medium" BorderColor="#666666">
                                    </Pdf>
                                    <Excel Format="Biff"></Excel>
                                </ExportSettings>
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                                </ClientSettings>

                                <MasterTableView CommandItemDisplay="Bottom">
                                    <PagerStyle AlwaysVisible="true" />
                                    <CommandItemSettings ShowAddNewRecordButton="false" />
                                    <Columns>
                                        <telerik:GridNumericColumn DataField="LogLevel" HeaderText="Log Level" SortExpression="LogLevel" UniqueName="LogLevel" AllowFiltering="true" AllowSorting="true" FilterControlWidth="60%">
                                            <ItemStyle HorizontalAlign="Center" />
                                        </telerik:GridNumericColumn>
                                        <telerik:GridNumericColumn DataField="EventId" HeaderText="Event Id" SortExpression="EventId" UniqueName="EventId" AllowFiltering="true" AllowSorting="true" FilterControlWidth="60%">
                                            <ItemStyle HorizontalAlign="Center" />
                                        </telerik:GridNumericColumn>
                                        <telerik:GridBoundColumn DataField="Message" HeaderText="Message" SortExpression="Message" UniqueName="Message" AllowFiltering="true" AllowSorting="true" FilterControlWidth="60%">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="UserName" HeaderText="User Name" UniqueName="UserName" ReadOnly="False" AllowFiltering="true" AllowSorting="true" FilterControlWidth="50%">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridNumericColumn DataField="ClientId" HeaderText="Client Id" SortExpression="ClientId" UniqueName="ClientId" AllowFiltering="true" AllowSorting="true" FilterControlWidth="60%">
                                        </telerik:GridNumericColumn>
                                        <telerik:GridBoundColumn DataField="IPAdd" HeaderText="IP Address" SortExpression="IPAdd" UniqueName="IPAdd" AllowFiltering="true" AllowSorting="true" FilterControlWidth="80%">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridDateTimeColumn DataField="TimeStamp" DataType="System.DateTime" HeaderText=" Date Time Generated" UniqueName="TimeStamp" SortExpression="TimeStamp" EnableTimeIndependentFiltering="true" AllowFiltering="true" EnableRangeFiltering="true" FilterControlWidth="40%">
                                            <ItemStyle HorizontalAlign="Center" />
                                        </telerik:GridDateTimeColumn>
                                    </Columns>
                                </MasterTableView>

                                <FilterMenu RenderMode="Auto"></FilterMenu>

                                <HeaderContextMenu RenderMode="Auto"></HeaderContextMenu>
                            </telerik:RadGrid>


    It behave fine for computer device
    Shreen shot:




    But it not behave same in mobile device
    Screen shot:


    My question is that why there is two options and value field is there in mobile device?

    Please elaborate its functionality and behavior?

    Thanks & Regards,
    Ketan Solanki

    Helpful links:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/filtering

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 04 Feb Link to this post

    Hi,

    It is expected when RenderMode is set to Auto the grid to have different rendering on desktop and when you view it on mobile device. This is the reason built-in Adaptive behavior to be provided for the control.

    When you change the grid RenderMode to Auto a context menu placed at the top right corner of the grid will appear for mobile device.By clicking on it you can reduce the columns number on the client or rearrange them in the desired order.

    Also when you set EnableHeaderContextMenu and EnableHeaderContextFilterMenu properties to true a Column Settings menu placed inside each column header will be shown. Via the Column Settings popup which will open you can group the respective column, sort and filter its data. 

    For more information about grid adaptive behavior you can refer to the article below:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview

    You can also test the grid behavior on mobile device in this demo:
    http://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx?name=overview

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. ketan
    ketan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 12 Feb Link to this post

    I already try rendermode = true option but still its not working

     

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 12 Feb Link to this post

    Hi,

    I suppose you mean RenderMode="Auto". Also there is no screenshot attached in your first post and I am not sure what is the unwanted behavior and what is the expected one when you run the page on mobile device.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner