Hi,

I'm having a few problems learning the ADC Data Controls.

I'm starting with the GridView and am having troubling understand what steps I need to take to build something from scratch.

Please note that I am using an XML file as the datasource, which is loaded into a dataTable for use with the GridView.

I've looked at the Sample site but I can't quite see how it's hanging together.

I know that I can display an image in a field using this markup for example:

<AjaxData:GridViewImageColumn DataImageUrlField="image1thumb"   ItemStyle-Height="60" ItemStyle-Width="60" HeaderText="Picture" ColumnID="1" />

...But how do I implement an image on a template field:

<AjaxData:GridViewTemplateColumn>
 <ItemTemplate>
           
  ?? What goes here to display an IMAGE ??
         
        </ItemTemplate>
</AjaxData:GridViewTemplateColumn>

Likewise, how do I display field data the ItemTemplate, such as a string field?

Thanks in advance.

The GridViewImageColumn should work fine, however if you want to use the GridViewTemplateColumn, then you will have to do some additional steps:

1. Add the RowDataBoundEvent event to the GridView
2. Add the necessary code into the event to load the image into an HTML element.
   

<AjaxData:GridView ID="OverviewGrid" runat="server" RowDataBoundEvent="OnRowDataBound">
        <AjaxData:GridViewTemplateColumn HeaderText="pic">
            <ItemTemplate>
                <img src='' alt='' id="img1"/>
            </ItemTemplate>
        </AjaxData:GridViewTemplateColumn>
</AjaxData:GridView>

<script type="text/javascript">
        var gridView = null;
        function pageLoad(sender, e)
        {
            gridView = $find('<%= OverviewGrid.ClientID %>');
            ....
        }

        function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;
            }
        }
</script>

That should do the trick.

You can use the same approach to display strings etc.. However I think it would be easier if you would use the GridViewBoundColumn instead, unless you need to format the output or something.

 For the strings, I want to have more than one field displayed in one column.

For example, a "header" field (which I want to be displayed in bold) and then another field underneath that.

Would I need to use a template field and the method described above to achieve this?

Thanks.

Thats correct.

I do not quite understand.

 I wander what you mean by another field underneath that.

If it is static addon, you may reformat the header.

If you want to combine two fields into one, then you may modify your source table.

Just a thought.

xxxd:

I do not quite understand.

 I wander what you mean by another field underneath that.

If it is static addon, you may reformat the header.

If you want to combine two fields into one, then you may modify your source table.

Just a thought.

Hi,

I have a field that contains a simple header string for each item of data. I want this to be displayed in bold. Directly underneath that on a new line in the same cell column, I also want another field to be displayed that contains other data.  This info is not to be in bold. So, I think the ItemTemplate is the place to do it???  And I think I need the two fields seperate to achieve this??

Regarding the client side code, this was to achieve the image within the template field - so it's just returning/dealing with one field.  But how would I implement it the client side code so that two or more fields could accessed to be used in one cell column?

Thanks.

 No matter what, template column gives you the full control.

 <AjaxData:GridViewTemplateColumn>
     <ItemTemplate>
                             <ItemTemplate>
                                        <img src='' alt='' id="img1"/>

                               <span id="spnSomething"></span>
     
                            </ItemTemplate>

    </ItemTemplate>
 </AjaxData:GridViewTemplateColumn>

   function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;

     var spnSomething = row.findControl('spnSomething');
               
                    setText(spnSomething, data.dataid);
               
            }
        } 

Sorry, forgot this function (copied from the ADC example)     

function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

xxxd:

 No matter what, template column gives you the full control.

 <AjaxData:GridViewTemplateColumn>
     <ItemTemplate>
                             <ItemTemplate>
                                        <img src='' alt='' id="img1"/>

                               <span id="spnSomething"></span>
     
                            </ItemTemplate>

    </ItemTemplate>
 </AjaxData:GridViewTemplateColumn>

  

   function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;

 

     var spnSomething = row.findControl('spnSomething');
               
                    setText(spnSomething, data.dataid);
               
            }
        } 

Ok, I do not understand the "spnSomethin" bit - how does that all fit together???

 It is just a random id, you may give your element any name, and attach your data to it.

I have to say I'm still not clear on this...

Is this:

" <span id="spnSomething"></span>"

...like a placeholder in the markup for whatever data is returned/generated in the client-side function?

Thanks.

 you could say that. In html, we use <span id="xx">, the same as in .net, <asp:Label id="xx" runat=server>. You can use as many as these DOM elements (it is just another way of saying html controls) as you want. Then in the  OnRowDataBound(sender, e) event, you can bind data sent back from the server to them.

Let me know if you have more questions. We are all learning.

In this function:

function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;

     var spnSomething = row.findControl('spnSomething');
               
                    setText(spnSomething, data.dataid);
               
            }
        } 

Regarding this line: "  setText(spnSomething, data.dataid); "

Where does the "data.dataid" come from?

This code obviously gets the image, but how would I get a text field in the template? :

                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;

? What's the equivalent for string field?

Thanks - Darren

data.dataid is actually not correct here. It should have been item.headerbullet1. Based on your project that you sent me item is the row and headerbullet1 is the column name. To see it for yourself, do this:

1. If you dont have it, get Firebug for firefox: https://addons.mozilla.org/en-US/firefox/addon/1843
2. Open the project in Visual studio
3. Open the overview.aspx file
4. In the OnRowDataBound add the following in the if part debugger;
5. Open the page (enable firebug (go in the tools section)) in Firefox and as soon as it comes into the if the firebug debugger will stop. 
6. Now you can use the debugger and see how the item object looks - you can use almost the same keyboardy shortcuts as in VS. 
7. You will be able to see all objects/properties of "item"

Regarding your 2nd question: To set the text into a dom field, you will use the helper function "setText" that Xun showed. This function takes an dom element as the parameter and the text to set. The dom element is the element that will appear in each row, the same way as the img does. You can use a span, which is what Xun did. Here is how your code would look:

<AjaxData:GridView ID="OverviewGrid" runat="server" CellPadding="3" DataKeyName="propertyrefno" RowDataBoundEvent="OnRowDataBound">
    <Columns>
        <AjaxData:GridViewTemplateColumn HeaderText="pic">
            <ItemTemplate>
                <img src='' alt='' id="img1"/>
                <span id="spn1" />
            </ItemTemplate>
        </AjaxData:GridViewTemplateColumn>
        <AjaxData:GridViewTemplateColumn HeaderText="Description">
            <ItemTemplate>
                <%# Eval("header") %><br />
                <%# Eval("para1") %>
            </ItemTemplate>
        </AjaxData:GridViewTemplateColumn>
        <AjaxData:GridViewBoundColumn DataField="header" HeaderText="Desc" ColumnID="2"></AjaxData:GridViewBoundColumn>
        <AjaxData:GridViewBoundColumn DataField="propertyrefno" HeaderText="Ref No." ColumnID="3"></AjaxData:GridViewBoundColumn>
       
    </Columns>
    </AjaxData:GridView>
     <script type="text/javascript">
        var gridView = null;
        function pageLoad(sender, e)
        {
            gridView = $find('<%= OverviewGrid.ClientID %>');
            DataService.GetAllProperties(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            gridView.set_dataSource(result.rows);
            gridView.dataBind();
        }
       
        function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;
               
                var spn = row.findControl("spn1");
                // set the text - You could also do this:
                // setText(spn, "Hello World!!!");
                setText(spn, item.headerbullet1);
            }
        }
       
        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }
        </script>