WebDataTree + Templates + Chrome: Looks different

1810

Ricardo Calvo posted over 12 years ago

Hi,

I am trying to use a simple template with a checkbox for some nodes in a WebDataTree added programmatically.

The solution seems to work but it looks slightly different when viewed with Chrome, the problem is an img tag (with no image) that appears on the left of the node but in Chrome the text is below that image.

I attach a print screen for you to see the problem and the source code of the template (just in case I am doing something wrong)

Thank you in advance.

WebDataTreeTemplate.zip

Parents

12679

[Infragistics] Radoslav Minchev posted over 12 years ago
Hello rickycl,

Thank your for posting in the community! I’ve taken a look at your code and I was wondering if you need only checkboxes to put in the template, why don’t you stick with the built-in feature of the control? I’ve just commented the template and turn on the checkbox feature of the tree with the code below:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1"

                runat="server">

        </asp:ScriptManager>

        <asp:Button ID="btnAddNode" runat="server" Text="Add Node" OnClick="btnAddNode_Click" />

        <asp:TextBox ID="txtNodeText" runat="server" ToolTip="Node's text"></asp:TextBox>

        <ig:WebDataTree

                ID="WebDataTree1"

                runat="server"

                Height="300px"

                Width="200px"

                CheckBoxMode="BiState">

        </ig:WebDataTree>

    </div>

    </form>

</body>

</html>

Here is the code – behind after the modifications:

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected override void OnPreInit(EventArgs e)

    {

        base.OnPreInit(e);

        LoadTemplate();

    }

    protected void btnAddNode_Click(object sender, EventArgs e)

    {

        var lNode = WebDataTree1.Nodes.Add(txtNodeText.Text);

       // lNode.TemplateId = "checknode";

    }

    private void LoadTemplate()

    {

        //Infragistics.Web.UI.ItemTemplate lTemplate = new Infragistics.Web.UI.ItemTemplate();

        //lTemplate.Template = new checkNodeTemplate();

        //lTemplate.TemplateID = "checknode";

        ////WebDataTree1.Templates.Add(lTemplate);

    }

    public class checkNodeTemplate : ITemplate

    {

        public void InstantiateIn(Control container)

        {

            var lcont = (Infragistics.Web.UI.TemplateContainer)container;

            var lNode = (Infragistics.Web.UI.NavigationControls.DataTreeNode)lcont.Item;

            var lCheckBox = new CheckBox();

            lCheckBox.Text = lNode.Text;

            lCheckBox.Style.Add(HtmlTextWriterStyle.PaddingBottom, "10px");

            container.Controls.Add(lCheckBox);

        }

    }

}

Here is the outlook:
Cancel
Reply

Cancel
1810

Offline Ricardo Calvo posted over 12 years ago in reply to [Infragistics] Radoslav Minchev

Hi Rado,

I do not want the whole tree to have checkboxes, only some of the nodes and I didn't find a way with the built in options. If there is a way to achieve that please share it with me, otherwise the question remains.

The sample is made that way to try how would we add nodes with checkboxes dinamically.

Thanks!!
Cancel
Reply

Cancel
12679

Verified Answer
[Infragistics] Radoslav Minchev posted over 12 years ago in reply to Ricardo Calvo
Hi,

I got your point, so if that the case you can do a js trick to hide the image tag e.g.

<form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1"

                runat="server">

        </asp:ScriptManager>

        <asp:Button ID="btnAddNode" runat="server" Text="Add Node" OnClick="btnAddNode_Click" />

        <asp:TextBox ID="txtNodeText" runat="server" ToolTip="Node's text"></asp:TextBox>

        <ig:WebDataTree

                    ID="WebDataTree1"

                    runat="server"

                    Height="300px"

                    Width="200px">

                    <ClientEvents  Initialize="InitializeHandler"/>

        </ig:WebDataTree>

    </div>

    <script type="text/javascript">

        function InitializeHandler(sender,args) {

            $('li[class="igdt_NodeHolder"] > img') .css('display','none');

        }

    </script>

    </form>

Hope this helps
Cancel
Reply

Reject Answer

Cancel

Reply

1810

Offline Ricardo Calvo posted over 12 years ago in reply to [Infragistics] Radoslav Minchev

Indeed, that solves the problem despite not being too elegant but we thought it could be a kind of bug as it looks different on different browsers.

Thanks.
Cancel
Reply

Cancel

Children

No Data