What's New?

Increase font size of Grid Data. ?

  1. #1
    Jul 25, 2013, 9:10 AM

    Increase font size of Grid Data. ?

    With the help of below example, how can i increase the font-size of grid panel data ?

    https://examples2.ext.net/#/Miscella...epeater/Basic/

    thanks & regards
    vik
  2. #2
    Aug 01, 2013, 12:28 PM
    Hi @vikram,

    I would implement it like this.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var fontRenderer = function (value, metadata) {
            metadata.style = "font-size:" + App.ValueLabel.getText() + "px;";

            return value;
        };

        var onMinus = function () {
            var v = parseInt(App.ValueLabel.getText(), 10);

            App.ValueLabel.setText((v - 1).toString());
            App.GridPanel1.getView().refresh();
        };

        var onPlus = function () {
            var v = parseInt(App.ValueLabel.getText(), 10);

            App.ValueLabel.setText((v + 1).toString());
            App.GridPanel1.getView().refresh();
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <table border="1">
            <tr>
                <td id="minusTd" style="width:50px;height:50px;text-align:center;cursor:pointer;">
                    <ext:Label runat="server" Icon="Delete" />
                </td>
                <td style="width:100px;text-align:center;">
                    <ext:Label ID="ValueLabel" runat="server" Text="11" />
                </td>
                <td id="plusTd" style="width:50px;height:50px;text-align:center;cursor:pointer;">
                    <ext:Label runat="server" Icon="Add" />
                </td>
            </tr>
        </table>
        
        <ext:ClickRepeater runat="server" Target="minusTd" PressClass="pressedTd">     
            <Listeners>
                <Click Fn="onMinus" Buffer="250" />
            </Listeners>
        </ext:ClickRepeater>
        
        <ext:ClickRepeater runat="server" Target="plusTd" PressClass="pressedTd">     
            <Listeners>
                <Click Fn="onPlus" Buffer="250" />
            </Listeners>
        </ext:ClickRepeater>

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Test2" DataIndex="test2">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Test3" DataIndex="test3">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Aug 01, 2013, 1:17 PM
    Quote Originally Posted by Daniil View Post
    Hi @vikram,

    I would implement it like this.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var fontRenderer = function (value, metadata) {
            metadata.style = "font-size:" + App.ValueLabel.getText() + "px;";

            return value;
        };

        var onMinus = function () {
            var v = parseInt(App.ValueLabel.getText(), 10);

            App.ValueLabel.setText((v - 1).toString());
            App.GridPanel1.getView().refresh();
        };

        var onPlus = function () {
            var v = parseInt(App.ValueLabel.getText(), 10);

            App.ValueLabel.setText((v + 1).toString());
            App.GridPanel1.getView().refresh();
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <table border="1">
            <tr>
                <td id="minusTd" style="width:50px;height:50px;text-align:center;cursor:pointer;">
                    <ext:Label runat="server" Icon="Delete" />
                </td>
                <td style="width:100px;text-align:center;">
                    <ext:Label ID="ValueLabel" runat="server" Text="11" />
                </td>
                <td id="plusTd" style="width:50px;height:50px;text-align:center;cursor:pointer;">
                    <ext:Label runat="server" Icon="Add" />
                </td>
            </tr>
        </table>
        
        <ext:ClickRepeater runat="server" Target="minusTd" PressClass="pressedTd">     
            <Listeners>
                <Click Fn="onMinus" Buffer="250" />
            </Listeners>
        </ext:ClickRepeater>
        
        <ext:ClickRepeater runat="server" Target="plusTd" PressClass="pressedTd">     
            <Listeners>
                <Click Fn="onPlus" Buffer="250" />
            </Listeners>
        </ext:ClickRepeater>

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Test2" DataIndex="test2">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Test3" DataIndex="test3">
                        <Renderer Fn="fontRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>


    thanks alot Daniil : ),
    Can we increase the header font-size too ?

    Regards
    Vik
  4. #4
    Aug 01, 2013, 1:52 PM
    There is no a renderer stuff for columns' header. So, I can suggest to try this.
    App.GridPanel1.getView().headerCt.items.each(function (c) {
    c.getEl().down(".x-column-header-text").applyStyles({
        "font-size": "15px"
    });
});
  5. #5
    Aug 01, 2013, 3:56 PM
    Quote Originally Posted by Daniil View Post
    There is no a renderer stuff for columns' header. So, I can suggest to try this.
    App.GridPanel1.getView().headerCt.items.each(function (c) {
    c.getEl().down(".x-column-header-text").applyStyles({
        "font-size": "15px"
    });
});

    thanks Daniil,
    i tried your suggestion but was't working , getting "App.GridPanel1...." is undefined.
    So, I created CSS for header.
    <style type="text/css">
            .x-column-header-text
        {
            font-size: 15px !important;
        }
    </style>
    Now, i have one more requirement.
    suppose, We have one masterpage and rest of the other pages are content page.
    and in few content pages has GridPanel in it with different ID's.
    i want to set Increment and decrement the value for GridPanel not for GridPanel ID's

    E.g: if i open any page if there is GridPanel is using then "Increment and Decrement option will display.
    so user can increase or decrease the font-size of the GridPanel Data.

    Can we set "Increment & Decrement value in Masterpage and it display only if GridPanel renders in masterpage ?


    Regards
    vik
    Last edited by Daniil; Aug 02, 2013 at 5:43 AM. Reason: Please use [CODE] tags
  6. #6
    Aug 02, 2013, 5:46 AM
    You can retrieve all grids on the page this way.
    Ext.ComponentQuery.query("gridpanel");
    http://docs.sencha.com/extjs/4.2.1/#...y-method-query

    getting "App.GridPanel1...." is undefined.
    It means that "App.GridPanel1" is not a client side reference to your page.

Similar Threads

  1. [CLOSED] How can increase the size line of the lineSeries
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 1:59 PM
  2. [CLOSED] Need to increase size of controls inside Form Panel
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 23, 2012, 1:58 PM
  3. [CLOSED] increase font size
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 29, 2011, 7:04 AM
  4. Editable Grid Panel default style properties (font size and weight, header and cells background color, etc...)
    By garag in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM
  5. [CLOSED] how to change grid font size
    By sharif in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 16, 2010, 1:35 PM

Tags for this Thread

Posting Permissions