[Solved] Client Side Binding

[ihsan]

hi all,
i m trying to bind grid from client side and i have an issue..
i m useing PageMethods and loading business object from IList, in IList i have custom objects like this;

class A
{
    ..
    public strng x {get..set..}
    public B b {get..set..}
    ..
}

so the data source is like IList<A> ..

on client side, i can see all of values each A object  (while debugging javascript) but grid can not show B.Name
i m using bound column like this;

<

 

telerik:GridBoundColumn DataField="B.Name" HeaderText="Name" UniqueName="B.Name">  

 

</telerik:GridBoundColumn>

how can i solve this problem?

thanks in advance..

 

 

[Pavlina]

Hello Ihsan,

RadGrid for ASP.NET AJAX supports client-side binding to web services or page methods. In order to assign data source for the grid and refresh its state on the client, utilize the set_dataSource(dataSource) and dataBind() methods from its client-side API. Keep in mind that the data source passed as an argument to the set_dataSource method should have JSON signature which can be serialized by a web service or a page method.

All grid commands will raise the OnCommand client grid event which can be intercepted in order to cancel the default operation and perform a custom action client-side.

For more information about client-side data-binding, please refer to the following links:
Client-side binding topic
Demo

I hope this helps.

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ihsan]

thanks for your reply, but there is not answer of my question..

i also using radgrid like your example, but there is a difference about data sources.. your sample's data source is more basic according mine.. (i mean Employee object has not sub object properties, but mine have )
in your example; if i add a sub object property to Employee object, rad grid can not show its value..

modified code like below;

[WebMethod]
    public static List<Employee> GetData(int startIndex, int maximumRows, string sortExpressions, string filterExpressions)
    {
        startIndex = startIndex + 1;

        List<Employee> list = new List<Employee>();

        StringBuilder sqlBuilder = new StringBuilder();
        sqlBuilder.AppendLine("DECLARE @startRowIndex int");
        sqlBuilder.AppendLine("DECLARE @maximumRows int");
        sqlBuilder.AppendLine(String.Format("SET @startRowIndex = {0}", startIndex));
        sqlBuilder.AppendLine(String.Format("SET @maximumRows = {0}", maximumRows));
        sqlBuilder.AppendLine("DECLARE @first_id int, @startRow int ");
        sqlBuilder.AppendLine("SET ROWCOUNT @startRowIndex");
        sqlBuilder.AppendLine("SELECT ");
        sqlBuilder.AppendLine(" @first_id = EmployeeID ");
        sqlBuilder.AppendLine("FROM LargeEmployees ");
        sqlBuilder.AppendLine("ORDER BY EmployeeID");

        sqlBuilder.AppendLine("SET ROWCOUNT @maximumRows");
        sqlBuilder.AppendLine("SELECT e.*");
        sqlBuilder.AppendLine("FROM LargeEmployees e");
        sqlBuilder.AppendLine("WHERE EmployeeID >= @first_id");

        string where = string.Empty;

        if (filterExpressions != String.Empty)
        {
            sqlBuilder.AppendLine(String.Format(" And {0}", filterExpressions));
        }

        if (sortExpressions != String.Empty)
        {
            sqlBuilder.AppendLine(String.Format(" Order By {0}", sortExpressions));
        }

        using (SqlConnection connection =
            new SqlConnection(
                ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString))
        {
            SqlCommand command = new SqlCommand(sqlBuilder.ToString(), connection);
            connection.Open();

            SqlDataReader reader = command.ExecuteReader();

            while (reader.Read())
            {
                Employee newEmployee = new Employee();

                for (int i = 0; i < reader.FieldCount; i++)
                {
                    switch (reader.GetName(i))
                    {
                        case "EmployeeID":
                            newEmployee.EmployeeID = reader.GetInt32(i);
                            break;
                        case "LastName":
                            newEmployee.LastName = reader.GetString(i);
                            break;
                        case "FirstName":
                            newEmployee.FirstName = reader.GetString(i);
                            break;
                        case "Title":
                            newEmployee.Title = reader.GetString(i);
                            break;
                        case "TitleOfCourtesy":
                            newEmployee.TitleOfCourtesy = reader.GetString(i);
                            break;
                        case "BirthDate":
                            newEmployee.BirthDate = reader.GetDateTime(i);
                            break;
                        default:
                            break;
                    }
                    newEmployee.Status = new MyStatus(i.ToString());
                }
                list.Add(newEmployee);
            }

            reader.Close();
        }

        return list;
    }

    public class Employee
    {
        private int _EmployeeID;
        private string _LastName;
        private string _FirstName;
        private string _Title;
        private string _TitleOfCourtesy;
        private System.Nullable<System.DateTime> _BirthDate;
        private MyStatus _Status;

        public Employee()
        {

        }

        public int EmployeeID
        {
            get
            {
                return this._EmployeeID;
            }
            set
            {
                if ((this._EmployeeID != value))
                {
                    this._EmployeeID = value;
                }
            }
        }

        public string LastName
        {
            get
            {
                return this._LastName;
            }
            set
            {
                if ((this._LastName != value))
                {
                    this._LastName = value;
                }
            }
        }

        public string FirstName
        {
            get
            {
                return this._FirstName;
            }
            set
            {
                if ((this._FirstName != value))
                {
                    this._FirstName = value;
                }
            }
        }

        public string Title
        {
            get
            {
                return this._Title;
            }
            set
            {
                if ((this._Title != value))
                {
                    this._Title = value;
                }
            }
        }

        public string TitleOfCourtesy
        {
            get
            {
                return this._TitleOfCourtesy;
            }
            set
            {
                if ((this._TitleOfCourtesy != value))
                {
                    this._TitleOfCourtesy = value;
                }
            }
        }

        public System.Nullable<System.DateTime> BirthDate
        {
            get
            {
                return this._BirthDate;
            }
            set
            {
                if ((this._BirthDate != value))
                {
                    this._BirthDate = value;
                }
            }
        }

        public MyStatus Status
        {
            get
            {
                return this._Status;
            }
            set
            {
                if ((this._Status != value))
                {
                    this._Status = value;
                }
            }
        }
    }

    public class MyStatus
    {
        private string _status;

        public MyStatus() { }

        public MyStatus(string status)
        {
            this._status = status;
        }

        public string Status
        {
            get { return _status; }
            set { _status = value; }
        }
    }

<telerik:RadGrid ID="RadGrid1" EnableViewState="false" Skin="Office2007" runat="server"
                AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="true" GridLines="None">
                <ItemStyle Wrap="False"></ItemStyle>
                <PagerStyle AlwaysVisible="True"></PagerStyle>
                <MasterTableView AllowMultiColumnSorting="True" TableLayout="Fixed" EnableViewState="False"
                    ClientDataKeyNames="EmployeeID">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridNumericColumn NumericType="Number" DataField="EmployeeID" HeaderText="EmployeeID"
                            UniqueName="EmployeeID">
                            <HeaderStyle Width="150px"></HeaderStyle>
                        </telerik:GridNumericColumn>
                        <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" UniqueName="LastName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" UniqueName="FirstName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy"
                            UniqueName="TitleOfCourtesy">
                        </telerik:GridBoundColumn>
                        <telerik:GridDateTimeColumn DataField="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                            HeaderText="BirthDate" UniqueName="BirthDate">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridBoundColumn DataField="Status.Status" HeaderText="Status" UniqueName="Status.Status">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="True"></Selecting>
                    <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound"
                        OnRowDblClick="RadGrid1_RowDblClick" OnRowSelected="RadGrid1_RowSelected"></ClientEvents>
                </ClientSettings>
                <FilterMenu Skin="Sunset" EnableTheming="True">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                </FilterMenu>
            </telerik:RadGrid>

thanks in advance..

[Pavlina]

Hi Ihsan,

I followed your scenario in order to replicate the issue but to no avail.
Please open a support ticket and send us a small sample project that isolates the problem so we can check it.

Greetings,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ihsan]

hi,

i solved this problem, but there is new specific problem for me on this link (about custom attributes) 

my solution is not  the best, but working for now..

function

 

grid_RowDataBound(sender, args) {

 

args.get_item().get_cell(

"Status").innerText = args.get_dataItem()["Status"].Name;

 

}

[Sub]

Hi,

I am also facing the same issue of displaying the sub object's properties when I do client side binding on RadGrid as posted in this thread. Is there any update on this issue from Telerik?

I saw a work around posted at the end of this thread but is there any better way to handle this?


thanks

[Sub]

In addition to the issue in Sub-Object there is also issue in binding non string values such as int, bool, decimal on client side binding. It works only in server side binding.

Any help on these issues are greatly appreciated.

[Pavlina]

Hi Sub,

I suggest that you try adding a custom attribute to your grid with the code snippet bellow:
CS:

protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid1.Attributes.Add("customAttribute", "customvalue");
    }

Give it a try and see how it goes or if I am leaving something out.
Additionally, for more information about accessing cells and rows look at the following help topic.

I hope this helps.

All the best,
Pavlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Sub]

Thanks for the reply. But It does not answer my question about the Sub Object binding. I am repeating the question here again.


I am loading business object from IList, in IList i have custom objects like this;

class Employee
{
    ..
    public strng x {get..set..}
    public Department Dept {get..set..}
    ..
}

so the data source is IList<Employee> ..

on client side, i can see all of values each A object  (while debugging javascript) but grid can not bind the Dept.Name on the client side. It works well in the server side.
i m using bound column like this;

<

 

telerik:GridBoundColumn DataField="Department.Name" HeaderText="Deparment Name" UniqueName="Dept.Name">  

 

 

</telerik:GridBoundColumn>

Any working sample to do client side binding on sub objects would be really usefull.

Thanks

[Pavlina]

Hi Sub,

I am sending you a small runnable application which handles the only possible workaround. Give it a try and let me know if you have other questions or problems.

Kind regards,
Pavlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.