Grid panel foreign key usage problem

  1. #1

    Grid panel foreign key usage problem

    Hi,

    I'm using grid panel with a table which contains foreign keys. There is no problem for binding these but the row filtering is not working for foreign keys columns. For other columns the row filtering is working successfully. Are there any solution for this problem?
  2. #2
    Hello, and welcome to Ext.NET forums!

    I can't really guess all the quirks in your sample but I can make a couple guesses. And my first one is that you got the foreign keys as integer numbers and so you should set the column's field type to integer. This will help with data handling, if the column type matches the actual data type inside it.

    If you can make a simpler and working test case to illustrate your issue, we could further help you and provide a more accurate tip.

    For example for int numbers, a model definition for such fields should be:

    <ext:ModelField Name="foreign_key" Type="Int" />

    This example gives you a good overview of column types: Grid Panel - Column Model - Column Variations

    And maybe you didn't see our examples on filtering, which could give you more insights about it. For instance: Grid Panel - Filter Header - Overview

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello, thanks for your reply.

    My page's source code is in below. My foreign key integer but i'm showing a string value by this foreign key. For example i have two tables such as USER and COUNTRY. In my USER table there is a column with name COUNTRY_ID. This COUNTRY_ID is ID column in COUNTRY table. So i'm showing NAME field from COUNTRY table with COUNTRY_ID foreign key but the header filter is not working.

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            using (KitapOkuyorum.Model.dbEntities db = new KitapOkuyorum.Model.dbEntities())
            {
                if (!X.IsAjaxRequest)
                {
                    this.Store1.DataSource = db.USER.ToList();
                    this.Store1.DataBind();
                }
            }
        }
    
        protected void Edit(int UserId)
        {
            Response.Redirect("/admin/edit/user-" + UserId);
        }
        
        protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
        {
            if (column.DataIndex == "ID")
            {
                ((TextField)defaultField).Icon = Icon.Magnifier;
            }
    
            return defaultField;
        }
    
        //burada hata var
        public void DeleteSelected(int[] idArray)
        {
            using (KitapOkuyorum.Model.dbEntities db = new KitapOkuyorum.Model.dbEntities())
            {
                foreach (int item in idArray)
                {
                    db.USER.Remove(db.USER.FirstOrDefault(x => x.ID == item));
                    db.SaveChanges();
                }
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel runat="server">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <items>
                            <ext:Button runat="server" Text="Delete" Handler="
                                var idArray = new Array();
                                var selection = #{Store1}.getSelectionModel().getSelection();
                                for(i in selection){
                                    idArray.push(selection[i].data.ID);
                                }
                                App.direct.DeleteSelected(idArray);" />
                        </items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="10">
                        <Model>
                            <ext:Model runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="USER_NAME" Type="String" />
                                    <ext:ModelField Name="FIRST_NAME" Type="String" />
                                    <ext:ModelField Name="LAST_NAME" Type="String" />
                                    <ext:ModelField Name="PAY" Type="Int" />
                                    <ext:ModelField Name="ACTIVE" Type="Int" />
                                    <ext:ModelField Name="LAST_LOGIN" Type="String" />
                                    <ext:ModelField Name="COUNTRY">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="NAME"/>
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:ModelField>
                                    <ext:ModelField Name="REGION">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="NAME"/>
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:ModelField>
                                    <ext:ModelField Name="STATE">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="NAME"/>
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:ModelField>
                                     <ext:ModelField Name="CITY">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="NAME"/>
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:ModelField>
                                     <ext:ModelField Name="SCHOOL_ORG">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="NAME"/>
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:ModelField>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="User Name" DataIndex="USER_NAME" Flex="1" />
                        <ext:Column runat="server" Text="First Name" DataIndex="FIRST_NAME" Flex="1" />
                        <ext:Column runat="server" Text="Last Name" DataIndex="LAST_NAME" Flex="1" />
                        <ext:Column runat="server" Text="Payment" DataIndex="PAY" Flex="1">
                            <Renderer Handler="return (value == 1) ? 'True':'False';" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Active" DataIndex="ACTIVE" Flex="1">
                            <Renderer Handler="return (value == 1) ? 'Active':'Passive';" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Last Login" DataIndex="LAST_LOGIN" Flex="1" />
                        <ext:Column runat="server" Text="Country" DataIndex="COUNTRY" Flex="1" >
                            <Renderer Handler="return value.NAME;" />  
                        </ext:Column>
                        <ext:Column runat="server" Text="Region" DataIndex="REGION" Flex="1" >
                            <Renderer Handler="return value.NAME;" />  
                        </ext:Column>
                        <ext:Column runat="server" Text="State" DataIndex="STATE" Flex="1" >
                            <Renderer Handler="return value.NAME;" />  
                        </ext:Column>
                        <ext:Column runat="server" Text="City" DataIndex="CITY" Flex="1" >
                            <Renderer Handler="return value.NAME;" />  
                        </ext:Column>
                        <ext:Column runat="server" Text="School" DataIndex="SCHOOL_ORG" Flex="1" >
                            <Renderer Handler="return value.NAME;" />  
                        </ext:Column>
                        <ext:CommandColumn Text="Exams" runat="server">
                            <Commands>
                                <ext:GridCommand Icon="Magnifier" CommandName="Exams" Text="Exams" />
                            </Commands>
                            <Listeners>
                                <Command Handler="document.location.href='/admin/list/studentexams-' + record.data.ID" />
                            </Listeners>
                        </ext:CommandColumn>
                        <ext:CommandColumn Text="Edit" runat="server">
                            <Commands>
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
                            </Commands>
                            <Listeners>
                                <Command Handler="document.location.href='/admin/edit/user-' + record.data.ID" />
                            </Listeners>
                        </ext:CommandColumn>
    
                         <ext:CommandColumn Text="Delete" runat="server">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                            </Commands>
                            <Listeners>
                                <%--<Command Handler="document.location.href='/admin/edit/user-' + record.data.ID" />--%>
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:FilterHeader runat="server" OnCreateFilterableField="OnCreateFilterableField" />
                </Plugins>
                <BottomBar>
                    <ext:PagingToolbar runat="server" HideRefresh="True">
                    </ext:PagingToolbar>
                </BottomBar>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
                </SelectionModel> 
                <DockedItems>
                </DockedItems>
            </ext:GridPanel>
    
        </form>
    </body>
    </html>
  4. #4
    Can you help me help you by stubbing out a sample result query that reproduces the issue?

    I started to stub out KitapOkuyorum class so you can continue until you can reproduce your view without an actual database query. There are some fields missing and I am sure you can come up with better dummy sample values than I can. :)

    Here is a copypaste of your <script> block, initiating the stub out of the class. I believe that with this I will be able to run your sample here and try what is not working for you.

    If it sounds too much like trouble for you, I believe you can flat out the results and simplify your model (without submodels in it -- like in Country and Region). For example, by instead of bringing COUNTRY { ID, NAME }, showing it just as COUNTRY_ID, COUNTRY_NAME.

    I also suspect that the problem may be in this sub-model declaration. Instead of a model with two entities inside, you could directly reference the model items, but to ensure that I would have to be able to run the sample here with a good stub of the results you get on a query.

        <script runat="server">
            public class KitapOkuyorum
            {
                public class Model
                {
                    public class UserInfo
                    {
                        public int ID;
                        public string USER_NAME;
                        public string FIRST_NAME;
                        public string LAST_NAME;
                        public int PAY;
                        public int ACTIVE;
                        public string LAST_LOGIN;
                        public Country COUNTRY;
                        public Region REGION;
                    }
                    
                    public class Country
                    {
                        public int ID;
                        public string NAME;
                    }
                    
                    public class Region
                    {
                        public int ID;
                        public string NAME;
                    }
                    
                    public class dbEntities : IDisposable
                    {
                        public List<UserInfo> USER;
                        
                        // Fill the list with dummy data.
                        public dbEntities()
                        {
                            // Just three entries, you might feel like adding more (say, 10, 20) dummy entries.
                            USER = new List<UserInfo>() {
                                new UserInfo() {
                                    ID = 20, USER_NAME = "user1", FIRST_NAME = "Robert", LAST_NAME = "Wickinson",
                                    PAY = 20, ACTIVE = 1, LAST_LOGIN = DateTime.Now.ToString(),
                                    COUNTRY = new Country() { ID=1, NAME="Singapore" },
                                    REGION = new Region() { ID=1, NAME="Complex A" }
                                },
                                new UserInfo() {
                                    ID = 21, USER_NAME = "user2", FIRST_NAME = "Athens", LAST_NAME = "Moondust",
                                    PAY = 20, ACTIVE = 1, LAST_LOGIN = DateTime.Now.ToString(),
                                    COUNTRY = new Country() { ID=2, NAME="Chile" },
                                    REGION = new Region() { ID=4, NAME="Complex G" }
                                },
                                new UserInfo() {
                                    ID = 1, USER_NAME = "admin", FIRST_NAME = "Jan", LAST_NAME = "Stanley",
                                    PAY = 20, ACTIVE = 1, LAST_LOGIN = DateTime.Now.ToString(),
                                    COUNTRY = new Country() { ID=3, NAME="Japan" },
                                    REGION = new Region() { ID=3, NAME="Oriental Junction" }
                                }
                            };
                        }
    
                        public void SaveChanges()
                        {
                            X.AddScript("console.log('All changes would have been saved at this point.');");
                        }
                    }
                }
            }
            
            protected void Page_Load(object sender, EventArgs e)
            {
                using (KitapOkuyorum.Model.dbEntities db = new KitapOkuyorum.Model.dbEntities())
                {
                    if (!X.IsAjaxRequest)
                    {
                        this.Store1.DataSource = db.USER.ToList();
                        this.Store1.DataBind();
                    }
                }
            }
    
            protected void Edit(int UserId)
            {
                Response.Redirect("/admin/edit/user-" + UserId);
            }
    
            protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
            {
                if (column.DataIndex == "ID")
                {
                    ((TextField)defaultField).Icon = Icon.Magnifier;
                }
    
                return defaultField;
            }
    
            //burada hata var
            public void DeleteSelected(int[] idArray)
            {
                using (KitapOkuyorum.Model.dbEntities db = new KitapOkuyorum.Model.dbEntities())
                {
                    foreach (int item in idArray)
                    {
                        db.USER.Remove(db.USER.FirstOrDefault(x => x.ID == item));
                        db.SaveChanges();
                    }
                }
            }
        </script>
    Fabrício Murta
    Developer & Support Expert
  5. #5
    hi again fabricio.murta;

    your solution is good but i have lots of data and 5 foreign key. If i apply your solution for each foreign key, it will take long.

    Please look at this example https://examples3.ext.net/#/GridPanel/FilterHeader/Overview/

    In visible column, type Yes and you will see that the filter doesn't work. My problem is similar.
  6. #6
    Oh, sure! I remember this. The 'yes' does not map to true, false, 1 or 0 due to the "renderer" masquerading. To address that, that is not much an "issue" but rather "normalisation" (you change one side with renderer, you have to change the other with filter).

    The custom examples next to the one you shown are the way to implement filters to columns that are arbitrarily built.

    For convenience, links for them:
    - Custom Field for FilterHeader
    - Custom Behaviour for FilterHeader

    What you have to do is in the match method, manipulate the test to match the actual shown contents when the table is built.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. grid Panel problem
    By Egale in forum 1.x Help
    Replies: 0
    Last Post: Jun 22, 2011, 11:26 AM
  2. problem with grid panel
    By anuar in forum 1.x Help
    Replies: 1
    Last Post: Jan 25, 2011, 9:22 AM
  3. Problem With Grid Panel in Extjs
    By a_elsayed2010 in forum 1.x Help
    Replies: 2
    Last Post: Sep 29, 2010, 1:48 PM
  4. Usage of ampersand (& <> &) in grid editors
    By plykkegaard in forum Bugs
    Replies: 3
    Last Post: May 28, 2009, 4:44 AM
  5. Problem with updating grid panel
    By Nagaraj K Hebbar in forum 1.x Help
    Replies: 0
    Last Post: May 09, 2009, 12:52 PM

Tags for this Thread

Posting Permissions