[CLOSED] ext:GridPanel Column sort ASC or DESC in Turkish characters wrong!

  1. #1

    [CLOSED] ext:GridPanel Column sort ASC or DESC in Turkish characters wrong!

    ext:GridPanel Column sort ASC or DESC in Turkish charcters (İ,?,?,Ş,?,?,ş) wrong!

    if ADISOYADI column startsh with Turkish charcters (İ,?,?,Ş,?,?,ş) it appears ADISOYADI at the end of gridpanel.

    what can we do about this problem?

    
    <ext:Column ID="Column77" runat="server" Align="left" DataIndex="ADISOYADI" Header="Adı Soyadı"                                               Sortable="true" Flex="1" />
    Last edited by Daniil; Dec 24, 2014 at 5:58 AM. Reason: [CLOSED]
  2. #2
    Hi @cottimucin,

    Please provide a full test case to reproduce.
  3. #3

    on GridPanel1 column company sorting turkish charecters problem

    on GridPanel1 column company sorting turkish charecters problem

    turkish sort alphabet sequence is "A B C ? D E F G H I İ J K L M N O ? P R S Ş T U ? V Y Z"


    Click image for larger version. 

Name:	1.PNG 
Views:	9 
Size:	13.4 KB 
ID:	17661

    But company sort must be = "ALİ , ?AĞDAŞ , MEHMET , TAMER , ?MİT , VELİ"


    Click image for larger version. 

Name:	2.PNG 
Views:	8 
Size:	23.9 KB 
ID:	17662

    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="deneme.aspx.cs" Inherits="ogrenci.deneme" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "Tamer", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Ali", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "?mit", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Mehmet", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "?ağdaş", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "Veli", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
    
        
    </body>
    </html>
    Last edited by cottimucin; Dec 23, 2014 at 10:06 AM.
  4. #4
    Thank you. It appears to be a known issue in the Web world.

    Please look at the second comment from the top here:
    http://www.sitepoint.com/javascript-array-sorting/

    Please try to put the @glenngould's function on the page and use it in this way:
    <ext:ModelField Name="company">
        <CustomSortType Fn="sortTR" />
    </ext:ModelField>
    Last edited by Daniil; Dec 24, 2014 at 5:58 AM.
  5. #5

    Hi daniil

    I do this but sort company doesnt work




    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="deneme.aspx.cs" Inherits="ogrenci.deneme" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "Tamer", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Ali", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "?mit", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Mehmet", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "?ağdaş", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "Veli", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
    
    
    
            function sortTR(a, b) {
                switch (a) {
                    case '?': a = 'CA'; break;
                    case 'Ğ': a = 'GA'; break;
                    case 'İ': a = 'IA'; break;
                    case '?': a = 'OA'; break;
                    case 'Ş': a = 'SA'; break;
                    case '?': a = 'UA'; break;
                    case '?': a = 'ZA'; break;
    
                }
                switch (b) {
                    case '?': b = 'CA'; break;
                    case 'Ğ': b = 'GA'; break;
                    case 'İ': b = 'IA'; break;
                    case '?': b = 'OA'; break;
                    case 'Ş': b = 'SA'; break;
                    case '?': b = 'UA'; break;
                    case '?': b = 'ZA'; break;
                }
    
                if (a > b)
                    return 1;
                if (a == b)
                    return 0;
                if (a < b)
                    return -1;
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" >
                                <CustomSortType Fn="sortTR" />
                                </ext:ModelField>
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
    
        
    </body>
    </html>
  6. #6
    I see "?" instead of some Turkish symbols. Does the forums break those characters? Are there correct characters on your page and in the browser? Is the sortTR function being rendered correctly in the browser (please see Page Sources)?

    Somehow I cannot get correct characters (some of them) in my browser. They are always replaced with something and I cannot test the issue normally. I've already tried a lot of suggestions like some language meta tags on the HTML page, setting ASP.NET culture, setting Turkish in the browsers' language settings. Oh, I need to look into that again with a fresh head.

    I think it is need to change the sortTR function to something like that:
    function sortTR(value) {
        return value.replace('?','CA').replace('Ğ','GA').replace(...).replace(...)...;
    }
    You should do that for all "non-English" Turkish characters - both lowercase and uppercase.
  7. #7

    thanks daniil

    thanks daniil

    it is ok.

    solved my problem.

Similar Threads

  1. Replies: 8
    Last Post: Mar 15, 2013, 2:24 AM
  2. Replies: 8
    Last Post: Dec 21, 2012, 6:42 AM
  3. [CLOSED] Remove sort Asc/Desc from grid header context menu
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2009, 2:59 PM
  4. [CLOSED] Turkish special characters problem
    By tansu in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 26, 2009, 12:01 PM

Tags for this Thread

Posting Permissions