[CLOSED] render teacher_id to teacher_name, but render event not be triggered?

**hdsoso** · Aug 28, 2013, 10:41 PM

I want to render teacher's id to teacher's name through direct event, in code behind , I can get teacher's id through direct event parameter, and find teacher's name by teacher id in database, but ,first step, render event not execute,please help me.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="extdemo.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                store1.DataSource = new object[]
                    {
                         new object[]{"1","user1","1"},
                         new object[]{"2","user1","2"},
                         new object[]{"3","user1","1"},
                    };
            }

        }
        protected void RenderTeacher(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("sss","ssss").Show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server"></ext:ResourceManager>
        <ext:GridPanel runat="server">
            <Store>
                <ext:Store runat="server" ID="store1">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="id"></ext:ModelField>
                                <ext:ModelField Name="student_name"></ext:ModelField>
                                <ext:ModelField Name="teacher_id"></ext:ModelField>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" DataIndex="id" Text="id"></ext:Column>
                    <ext:Column ID="Column2" runat="server" DataIndex="student_name" Text="student's name"></ext:Column>
                    <ext:Column ID="Column3" runat="server" DataIndex="teacher_id" Text="teacher's name">
                        <DirectEvents>
                            <Render OnEvent="RenderTeacher">
                                <ExtraParams>
                                    <ext:Parameter Name="tid" Value="record.data.teacher_id" Mode="Raw"/>
                                </ExtraParams>
                            </Render>
                        </DirectEvents>
                    </ext:Column>
                </Columns>

            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Aug 29, 2013, 4:26 AM

Hi @hdsoso,

A record is not passed to a Column's Render event. So, this throws a JavaScript error since record is not defined.

Value="record.data.teacher_id"

You probably want to use a Column's Renderer instead. However, it doesn't support remote calls. All the data required for rendering of GridPanel should be preloaded.

**hdsoso** · Aug 29, 2013, 7:56 AM

Originally Posted by Daniil

Hi @hdsoso,

A record is not passed to a Column's Render event. So, this throws a JavaScript error since record is not defined.

Value="record.data.teacher_id"

You probably want to use a Column's Renderer instead. However, it doesn't support remote calls. All the data required for rendering of GridPanel should be preloaded.

because the data of teacher is big and must page so can not be preloaded.
my idea is : when student grid is load , because teacher_id is in the student grid, so must render the teacher's id to teacher's name,
so when student grid is load , pass the teacher_id to the server , then find the teacher's name according teacher's id in the database.
then render the teacher's id to teacher's name , then it is ok .
but how to pass the teacher's id to code behind?

**Daniil** · Aug 29, 2013, 9:59 AM

Unfortunately, it is not going to work.

You are going to make an individual request to server for each row. From one side it is not possible to implement on the rendering stage of GridPanel. From another side, it would be extremely slow.

You do have to preloaded all the required data. However, you don't need to preload all the teachers. Just the ones which are going to be rendered in the GridPanel.

**hdsoso** · Aug 29, 2013, 2:21 PM

Originally Posted by Daniil

Unfortunately, it is not going to work.

You are going to make an individual request to server for each row. From one side it is not possible to implement on the rendering stage of GridPanel. From another side, it would be extremely slow.

You do have to preloaded all the required data. However, you don't need to preload all the teachers. Just the ones which are going to be rendered in the GridPanel.

must I create a store about teacher which has teacher id and teacher name ModelField? and the teachers' ids must equal with the ids of the student's gird?

it is a common function of grid ? need so complicated？

**Daniil** · Aug 29, 2013, 2:47 PM

I think the best is to load the teachers' names into the existing Store - store1.

In my opinion it doesn't look complicated. But making an individual request to server for each row to get a teacher's name - this looks complicated for me.

**hdsoso** · Aug 30, 2013, 6:22 AM

Originally Posted by Daniil

I think the best is to load the teachers' names into the existing Store - store1.

In my opinion it doesn't look complicated. But making an individual request to server for each row to get a teacher's name - this looks complicated for me.

I wrote a test case below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="TobrosCWT.test.WebForm7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script runat="server">
        public class Student
        {
            public int id { get; set; }
            public string student_name { get; set; }
            public int teacher_id { get; set; }
            public Teacher teacher { get; set; }
            public List<Student> getStudent()
            {
                Teacher t = new Teacher { id = 1, teacher_name = "张老师" };
                Teacher t1 = new Teacher { id = 2, teacher_name = "李老师" };
                Student s = new Student { id = 1, student_name = "张三", teacher_id = 1, teacher = t };
                Student s1 = new Student { id = 2, student_name = "李四", teacher_id = 2, teacher = t1 };
                List<Student> list = new List<Student> {s,s1};
                return list;
            }
        }
        public class Teacher
        {
            public int id { get; set; }
            public string teacher_name { get; set; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<Student> list_s =new Student().getStudent();

                store_student.DataSource = list_s;
            }

        }
        
    
    </script>
    <script type="text/javascript">
        var RenderTeacher = function (item) {
            alert(item);
            if (!Ext.empty(item)) {
                //return item.data.    how to render teahcer's name(teacher.teacher_name) accord teacher's id(item)   ??
            }
            return item;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" SourceFormatting="True" runat="server"></ext:ResourceManager>
        <ext:Store runat="server" ID="store_student">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="id"></ext:ModelField>
                        <ext:ModelField Name="student_name"></ext:ModelField>
                        <ext:ModelField Name="teacher_id">
                        </ext:ModelField>
                        <ext:ModelField Name="teacher" Type="Object">
                        </ext:ModelField>

                    </Fields>

                </ext:Model>
            </Model>

        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="store_student">
             
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" DataIndex="id" Text="id"></ext:Column>
                    <ext:Column ID="Column2" runat="server" DataIndex="student_name" Text="student's name"></ext:Column>
                    <ext:Column ID="Column3" runat="server" DataIndex="teacher_id" Text="teacher's name">
                        <Renderer Fn="RenderTeacher"></Renderer>
                    </ext:Column>
                </Columns>

            </ColumnModel>
            
        </ext:GridPanel>
    </form>
</body>
</html>

I make student store to globle, and render student_id from student object , but some difficulty.
how to render teahcer's name(teacher.teacher_name) accord teacher's id(item) ??

**hdsoso** · Aug 30, 2013, 7:04 AM

i modify the RenderTeacher function , debug is ok , but why not show in the cell?

    <script type="text/javascript">
        var RenderTeacher = function (value) { 
            var r = App.store_student.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.tacher.teacher_name;
        }
    </script>

**hdsoso** · Aug 30, 2013, 7:11 AM

Originally Posted by hdsoso

i modify the RenderTeacher function , debug is ok , but why not show in the cell?

    <script type="text/javascript">
        var RenderTeacher = function (value) { 
            var r = App.store_student.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.tacher.teacher_name;
        }
    </script>

sorry, should be

var tname = r.data.teacher.teacher_name;

the whole test is :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="TobrosCWT.test.WebForm7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script runat="server">
        public class Student
        {
            public int id { get; set; }
            public string student_name { get; set; }
            public int teacher_id { get; set; }
            public Teacher teacher { get; set; }
            public List<Student> getStudent()
            {
                Teacher t = new Teacher { id = 1, teacher_name = "张老师" };
                Teacher t1 = new Teacher { id = 2, teacher_name = "李老师" };
                Student s = new Student { id = 1, student_name = "张三", teacher_id = 1, teacher = t };
                Student s1 = new Student { id = 2, student_name = "李四", teacher_id = 2, teacher = t1 };
                List<Student> list = new List<Student> {s,s1};
                return list;
            }
        }
        public class Teacher
        {
            public int id { get; set; }
            public string teacher_name { get; set; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<Student> list_s =new Student().getStudent();

                store_student.DataSource = list_s;
            }

        }
        
    
    </script>
    <script type="text/javascript">
        var RenderTeacher = function (value) { 
            var r = App.store_student.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }
            var tname = r.data.teacher.teacher_name;
            return tname;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" ScriptMode="Debug" SourceFormatting="True" runat="server"></ext:ResourceManager>
        <ext:Store runat="server" ID="store_student">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="id"></ext:ModelField>
                        <ext:ModelField Name="student_name"></ext:ModelField>
                        <ext:ModelField Name="teacher_id">
                        </ext:ModelField>
                        <ext:ModelField Name="teacher" Type="Object">
                        </ext:ModelField>

                    </Fields>

                </ext:Model>
            </Model>

        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="store_student">
             
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" DataIndex="id" Text="id"></ext:Column>
                    <ext:Column ID="Column2" runat="server" DataIndex="student_name" Text="student's name"></ext:Column>
                    <ext:Column ID="Column3" runat="server" DataIndex="teacher_id" Text="teacher's name">
                        <Renderer Fn="RenderTeacher"></Renderer>
                    </ext:Column>
                </Columns>

            </ColumnModel>
            
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Aug 30, 2013, 10:11 AM

Thank you for the test case.

I might misunderstand something, but the example appears to be working as expected.

Could you elaborate what the issue is?

Thread: [CLOSED] render teacher_id to teacher_name, but render event not be triggered?

Thread Tools

Search Thread

Display

[CLOSED] render teacher_id to teacher_name, but render event not be triggered?

Similar Threads

Grid. Checkbox render function - how to execute default render of control

[CLOSED] Render a Chart on a DirectEvent

2 functions in the render event

[CLOSED] Toggle Render? Refresh Render?

[CLOSED] After Render Event for Slider

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] render teacher_id to teacher_name, but render event not be triggered?

[CLOSED] render teacher_id to teacher_name, but render event not be triggered?

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us