passing data between controls clientside?

[Alex]

Hello,

Is there a way to pass data from one control to another, using clientside JavaScript, without using AjaxManager?

What I would like to accomplish, is to display the child items in a grid control when a node is selected in a treeview control. Vice versa, when an item is selected in the grid, I would like the treeview to display it also.

One way I can think of to go about this is to call a web service from a treeview clientside NodeClicked handler. The web service would get data  for the grid, and then will callback the updateGrid function to rebind it with the data.

Is there another, direct way via Javascript, without having to make a web service round trip?

Thanks,
Alex

[Nikita Gourme]

Alex, if I were in your shoes, I would go for the solution with the web service call. This will guarantee that the controls will be refreshed consistently on the client when the result from the service returns. Pure javascript "changes" in the controls state may not be persisted properly when other operation occurs.

Take this demo for a start you choose the web services.

Nikita

[Alex]

Nikita,

Thank you, I would like to try this out. I couldn't find the source code for the web service for this demo, could you please attach it?

Regards,
Alex

[Yavor]

Hi Alex,

Here is the relevant code for Directories.cs:

.cs

using System;
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using Telerik.Web.UI;
using System.Collections.Generic;
using System.IO;

/// <summary>
/// Summary description for Directories
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Directories : System.Web.Services.WebService
{

    public Directories()
    {
        //
    }

    [WebMethod]
    public NodeData[] GetDirectories(RadTreeNodeData node)
    {
        return BindDirectory(node.Value).ToArray();
    }

    [WebMethod]
    public List<Info> GetFilesAndFolders(string dirPath)
    {
        List<Info> list = new List<Info>();

        string[] dirs = Directory.GetDirectories(dirPath);
        foreach (string path in dirs)
        {
            Info info = new Info();
            info.Name = Path.GetFileName(path);
            list.Add(info);
        }

        DirectoryInfo dir = new DirectoryInfo(dirPath);

        foreach (FileInfo file in dir.GetFiles())
        {
            Info info = new Info();
            info.Name = file.Name;
            info.Size = file.Length;
            list.Add(info);
        }

        return list;
    }

    public List<NodeData> BindDirectory(string dirPath)
    {
        List<NodeData> nodes = new List<NodeData>();

        string[] dirs = Directory.GetDirectories(dirPath);
        foreach (string path in dirs)
        {
            NodeData node = new NodeData();
            node.Text = Path.GetFileName(path);
            node.Value = path;

            if (Directory.GetDirectories(path).Length > 0)
            {
                node.ExpandMode = TreeNodeExpandMode.WebService;
            }

            node.ImageUrl = "Img/mailfolder.gif";

            nodes.Add(node);
        }

        return nodes;
    }

    [Serializable]
    public class NodeData
    {
        private string _text;
        private string _value;
        private string _imageurl;
        private TreeNodeExpandMode _expandMode;
        public string Text
        {
            get { return _text; }
            set { _text = value; }
        }

        public string Value
        {
            get { return _value; }
            set { _value = value; }
        }

        public string ImageUrl
        {
            get { return _imageurl; }
            set { _imageurl = value; }
        }

        public TreeNodeExpandMode ExpandMode
        {
            get { return _expandMode; }
            set { _expandMode = value; }
        }
    }

    public class Info
    {
        private string _name;
        private long? _size;

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public long? Size
        {
            get { return _size; }
            set { _size = value; }
        }
    }
}

I hope this helps.

All the best,
Yavor
the Telerik team

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

[Alex]

Dear Telerik,

I am following the example provided, and I would like to update a grid when a node is clicked in a tree, very similar to your example. My grid displays the row text values correctly when using GridTemplateColumn, but not when I use GridBoundColumn. Could you please explain the difference between the two, and also what the function rowDataBound is used for?


Here is my code:

Code-behind

------------

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = new MyWebService().GetFilesAndFolders("someDirectory");

}

WebService.cs

----------------

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class MyWebService : System.Web.Services.WebService {

...

public class Info

{

private string _name;

private long _size;

public string Name

{

get { return _name; }

set { _name = value; }

}

public long FileSize

{

get { return _size; }

set { _size = value; }

}

}

[WebMethod]

public List<Info> GetFilesAndFolders(string dirPath)

{

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

Info info = new Info();

info.Name = "Test Name";

info.FileSize = 20;

list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);         list.Add(info);

return list;

}

}

JavaScript

-------------

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

// During a Firebug debug session, this function is reached when a tree node is

// clicked and result contains an item with my test values

tableView.set_dataSource(result);

tableView.dataBind();

}

function OnTreeClientNodeClickedHandler(sender, args) {

// UPDATE GRID

MyWebService.GetFilesAndFolders(sender.get_selectedNode().get_value(), updateGrid);

} Page.aspx --------------- <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="Telerik" AllowSorting="True"                             AutoGenerateColumns="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"                             Font-Strikeout="False" Font-Underline="False" ForeColor="Black"                             ShowFooter="True" onneeddatasource="RadGrid1_NeedDataSource">                             <MasterTableView>                                 <RowIndicatorColumn>                                     <HeaderStyle Width="20px"></HeaderStyle>                                 </RowIndicatorColumn>                                 <ExpandCollapseColumn>                                     <HeaderStyle Width="20px"></HeaderStyle>                                 </ExpandCollapseColumn>                                 <Columns>                                     <telerik:GridBoundColumn HeaderText="Name" UniqueName="column1" DataField="Name">                                     </telerik:GridBoundColumn>                                     <telerik:GridBoundColumn HeaderText="Size" UniqueName="column" DataField="FileSize">                                     </telerik:GridBoundColumn>                                 </Columns>                             </MasterTableView>                             <ClientSettings AllowKeyboardNavigation="true" AllowRowsDragDrop="true" AllowColumnsReorder="True"                                 ReorderColumnsOnClient="True">                                 <Selecting AllowRowSelect="True" />                                                             </ClientSettings>                             <FilterMenu EnableTheming="True">                                 <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>                             </FilterMenu>                         </telerik:RadGrid>

Best Regards,
Alex

[Alex]

Hi Nikita,

Update: The grid binds, sort of.  I modified my code slightly to return a list of Info items, like in the File Browser live demo. The json response I am getting back, as displayed by Fiddler, is:


HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Sun, 28 Sep 2008 23:10:28 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private, max-age=0
Content-Type: application/json; charset=utf-8
Content-Length: 229
Connection: Close

{"d":[{"__type":"MyWebService+Info","Name":"subdirectory 1","FileSize":0},{"__type":"MyWebService+Info","Name":"subdirectory 2","FileSize":0},{"__type":"MyWebService+Info","Name":"subdirectory 3","FileSize":0}]}


After the updateGrid() function is called, the grid populates with three rows, I assume this corresponds to the three json items above.  However, the "Name"s in the rows are set to the names of the first three items previously contained in the grid before the node was cliked in the tree, not to "subdirectory 1", "subdirectory 2", and "subdirectory 3" as I would like them to. I may be doing something wrong in the way I set up my grid?

I wanted to debug the File Browser live demo using breakpoints in Visual Studio and Firebug so I could see how my implementation differs from the live demo. I found the demo source in my Telerik installation, but could not get it to run inside Visual Studio because some of the tags and user controls are not easily found. Could you please attach a slimmed-down version of the File Browser that uses web services and updateGrid() that is self-contained in a project/solution which I could run in Visual Studio?

I appreciate all your help,
Alex


    * ASP.NET version: 3.5 SP1
    * OS: Windows XP SP3
    * IDE: VS 2008 SP1
    * exact browser version: 7.0.5730.13
    * exact version of the Telerik product: 2008.2.826.35
    * preferred programming language: C#

[Nikita Gourme]

Hi again Alex,

The thing that comes to my mind is to test whether feeding the grid with another data source client-side reflects the changes with one step behind again. If so, I suppose that it is not bound properly to data using the setDataSource(source) and dataBind() client methods as in the demo.

Nikita

[Alex]

Nikita,

Thank you, I found the problem - I didn't have function rowDataBound(sender, args) so I guess it wasn't evaluating the names without it.

Please forgive me, I am new to the Telerik AJAX controls. Could you please comment on the difference between GridTemplateColumn and GridBoundColumn?   Also, as I read about integrating the controls I see that AjaxManager is being used in some cases, but here we are using a web service. Could you please also comment on when to use Ajax Manager versus a web service?

Best Regards,
Alex

[Nikita Gourme]

I am happy that my pointers are helpful, Alex.

Onto your other questions:

1. The GridBoundColumn is built-in type and is equivalent to the BoundField of the Visual Studio's GridView control. The GridTemplateColumn is the same as the TemplateField of the GridView.
2. I use the ajax manager when I need to transform plain postbacks into ajax requests. When utilizing client-side binding with web service, you do not need to have RadAjaxManager because the actions are performed on the client.

Nikita

[Alex]

I will read up on the GridView documentation. Again, thanks for your help, web service calls working well so far.

Alex