[Solved] Improved CheckBox

[Tgaud]

I have a specific need, and i wanted to know if some telerik solution exist.


I have a search page on my application, and i need a checkbox with 3 options :

_ Checked
_ Unchecked
_ Not modified

With a pratical example :

My user need to search on the nationality of a person :

I have an "american" checkbox

If the checkbox is checked , i need all the american and only them
if the checkbox is unchecked, i need ALL exept american
and i need another state (the "not modified" option) , to not filter on this criteria and have american AND non american.

with a radio button my need would be :

O American (Checkbox cheked)              O Non American (Checkbox unchecked)   

    O All(Checkbox unmodified, i dont filter on this)

Do you know if it exist ?

[Ivo]

Hello Tgaud,

We do not have a tri-state checkbox. You should probably use a radio button group instead. All(Checkbox unmodified, i dont filter on this) would be the default then.

Sincerely yours,
Ivo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tgaud]

Hi,

Do you know a way to emulate the 3 state with a checkbox?

I can't have radiobutton, i have to keep checkbox.

Is there a way to simulate this behavior :
or to make a custom control ?

[Tgaud]

Here is the code to simulate a tree-state combobox with a Telerik:RadTreeView.

div.RadTreeView .rtMinus,
div.RadTreeView .rtPlus
{
display: none;
}
div.RadTreeView .rtTop,
div.RadTreeView .rtMid,
div.RadTreeView .rtBot
{
padding: 0;
}

    protected void Clicker(object sender, EventArgs e)
        {
            if (RadTreeView1.Nodes[0].Nodes[1].Text == "Indeterminé")
            {
                    RadTreeView1.Nodes[0].Nodes[0].Checked = false;
                    RadTreeView1.Nodes[0].Nodes[1].Checked = false;
                    RadTreeView1.Nodes[0].Nodes[1].Text = "Décoché";
            }
            else if (RadTreeView1.Nodes[0].Nodes[1].Text == "Coché")
                {
                    RadTreeView1.Nodes[0].Nodes[0].Checked = true;
                    RadTreeView1.Nodes[0].Nodes[1].Checked = false;
                    RadTreeView1.Nodes[0].Nodes[1].Text = "Indeterminé";
                }
            else
                {
                    RadTreeView1.Nodes[0].Nodes[0].Checked = true;
                    RadTreeView1.Nodes[0].Nodes[1].Checked = true;
                    RadTreeView1.Nodes[0].Nodes[1].Text = "Coché";
                }
        }

                          <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" OnNodeCheck="Clicker" TriStateCheckBoxes="true"  >
                    <Nodes>
                        <telerik:RadTreeNode Text="Software" Expanded="false">
                            <Nodes>
     <telerik:RadTreeNode Text="Indeterminé" Checked="true" Visible="false"/>
     <telerik:RadTreeNode Text="Indeterminé" Checked="false" Visible="false"/>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>

But i have two problem :

First, i still have a little appearrance problem,  i still have a  ...   (three dot) between my checkbox and the text
Second, its a Server Side behavior, so there is a little latency between the user's click and the server  ajax response where the checkbox has the wrong checked state and it can be confusing for the user.

It would be great to make the same thing in Client side, with javascript, but i'm not good enough in javascript to deal with it.

Can someone help me?

Thx

[Tgaud]

Fixed !!!

With this javascript function :

   function ClientNodeChecked(sender, eventArgs)
            {
                var node = eventArgs.get_node();
                var childnode = eventArgs.get_node().get_nodes();

                    if (childnode.getNode(0).get_text() == 'indetermine') {
                        childnode.getNode(0).set_checked(true);
                        childnode.getNode(1).set_checked(true);
                        childnode.getNode(0).set_text('coche');
                    }
                   else if (childnode.getNode(0).get_text() == 'coche') {
                        childnode.getNode(0).set_checked(false);
                        childnode.getNode(1).set_checked(false);
                        childnode.getNode(0).set_text('decoche');
                    }
                else if (childnode.getNode(0).get_text() == 'decoche') {
                    childnode.getNode(0).set_checked(true);
                    childnode.getNode(1).set_checked(false);
                    childnode.getNode(0).set_text('indetermine');
                }

            }