[Solved] Server code executes faster than Client code?

[Saed]

Hello again,

Scenario:
A Tree Node selection should set selection of 4 combos, based on Node's value.

Scope:
Node value consists of 4 numbers, delimited by a comma, representing the depth of the Node (similar to Value Path of ASP Tree Node). The 4 values form the item values of the 4 combos; one per item. Splitting Node value upon its selection retrieves the 4 distinct values.

Task:
Set item selection of each of the 4 combos to respective extracted value of the Node. Because item selection was the result of Node value casting, the 4 combos need to be disabled in order to prevent user from altering any selection. this is to distinguish combos behaviour form normal situation where user can select different combinations to create/delete/update a Node at a certain depth.

Code:
 At first, the task was accomplished in code-behind without a problem. Having a combo being disabled didn't prevent item selection. However, when I shifted the task to client-side hoping for a faster performance, it turned to be the opposite!

Due to a bug that was reported earlier, in client-side you cannot select an item if the combo is disabled. Therefore, you need to enable it first, select the item then disable it. Repeat that with the 4 combos. This has to be done with every Node click! Baring in mind that every enable/disable results in a callback request,  observed process turned to be slower than doing the same in code-behind.

Required:
While sticking to client-side, I'm wandering if someone can suggest a way to simulate the process of combo disabling without actually disabling it? Something that prevents user from opening the dropdown while having selected item dimmed (item.disable()?) as well as dimming the combo (alter its style?)...

Thank you in advance.

Regards,
Saed

[Simon]

Hello Saed,

You could prevent the drop down from opening by handling the client-side DropDownOpening event of the ComboBox as shown below:

var preventDropDownOpening = false;

function onDropDownOpening(sender, eventArgs) {
    eventArgs.set_cancel(preventDropDownOpening);
}

You could set the preventDropDownOpening to true whenever necessary.


One could not easily change the Disabled style of the ComboBox manually let alone maintain it (RadComboBox changes its styles in dependence of the user actions). This approach is generally unadvisable.

An easier approach would be to actually enable/disable the ComboBox at the client. This requries only client-side processsing. Could you show us how you are enabling/disabling the ComboBox in your case?

Regards,
Simon
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.

[Saed]

"An easier approach would be to actually enable/disable the ComboBox at the client. This requries only client-side processsing."

This is what I've been doing Simon. Yet, not much happy with performance compared with server-side.


"Could you show us how you are enabling/disabling the ComboBox in your case?"

With pleasure. Here is the complete snippet (function in question is CastNodeInfo()):

        var tree, unitCombo, divCombo, deptCombo, secCombo;
        var recFlag, nodeFlag;
        var unit, div, dept, sec;

        function pageLoad() {
            tree = $find("<%= orgTV.ClientID %>");
            unitCombo = $find("<%= rcb_Unit.ClientID %>");
            divCombo = $find("<%= rcb_Div.ClientID %>");
            deptCombo = $find("<%= rcb_Dept.ClientID %>");
            secCombo = $find("<%= rcb_Sec.ClientID %>");
            recFlag = document.getElementById("<%= recFlag.ClientID %>");
            nodeFlag = document.getElementById("<%= nodeFlag.ClientID %>");
        }

        function NodeClicked(sender, e) {
            // 1.  Get selected Node & its Level
            var clickedNode = e.get_node();
            var nodeLevel = clickedNode.get_level();

            // 2.  Check Node Level
            if (nodeLevel == 0) {
                // 2.1 Selected Node is RootNode:
                //     2.1.1 Disable selection then Expand/Collapse; no Casting.
                clickedNode.set_selected(false);
                clickedNode.toggle();

                //     2.1.2 Restore selection of previously selected node
                RestoreSelection();

            } else {
                // 2.2 Selected Node is ChildNode:
                //     2.2.1 Capture selected Node value
                var nodeValue = clickedNode.get_value();

                //     2.2.2 Save selected Node value for later restoration
                nodeFlag.value = nodeValue;

                //     2.2.3 Extract selected Node info
                GetNodeInfo(nodeValue);
            }
        }

        function GetNodeInfo(selectedValue) {
            unit = "0";
            div = "0";
            dept = "0";
            sec = "0";

            var nodeInfo = selectedValue.split(",");
            var depth = nodeInfo.length;

            switch (depth) {
                case 1:
                    unit = nodeInfo[0];
                    break;
                case 2:
                    unit = nodeInfo[0];
                    div = nodeInfo[1];
                    break;
                case 3:
                    unit = nodeInfo[0];
                    div = nodeInfo[1];
                    dept = nodeInfo[2];
                    break;
                case 4:
                    unit = nodeInfo[0];
                    div = nodeInfo[1];
                    dept = nodeInfo[2];
                    sec = nodeInfo[3];
                    break;
            }
            CastNodeInfo(selectedValue);
        }

        function CastNodeInfo(nodeValue) {
            // 1. Set RecFlag to 'Update'
            recFlag.value = "U";

            // 2. Set selection of target ComboBox
            //    2.1 Unit
            unitCombo.enable();
            unitCombo.findItemByValue(unit).select();
            unitCombo.disable();
            //    2.2 Div
            divCombo.enable();
            divCombo.findItemByValue(div).select();
            divCombo.disable();
            //    2.3 Dept
            deptCombo.enable();
            deptCombo.findItemByValue(dept).select();
            if (deptCombo.get_selectedIndex() == 0) {
                deptCombo.disable();
            }
            //    2.4 Sec
            secCombo.enable();
            secCombo.findItemByValue(sec).select();
            if (secCombo.get_selectedIndex() == 0) {
                secCombo.disable();
            }

            // 3. Highlight currentNode if not emphasised
            var currentNode = tree.findNodeByValue(nodeValue);
            if (!currentNode.get_selected()) {
                currentNode.set_selected(true);
            }
        }

        function ResetFields() {
            // Record Flag
            recFlag.value = "N";

            // Selected Node
            var activeNode = tree.get_selectedNode();
            if (activeNode != null) {
                activeNode.set_selected(false);
                nodeFlag.value = "";
            }

            // ComboBoxes
            unitCombo.clearSelection();
            divCombo.clearSelection();
            deptCombo.clearSelection();
            secCombo.clearSelection();
        }

        function RestoreSelection() {
            if (nodeFlag.value != "") {
                var wasSelected = tree.findNodeByValue(nodeFlag.value);
                wasSelected.set_selected(true);
            }
        }

        function GetConfirm(arg) {
            var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
            if (arg != null) {
                ajaxManager.ajaxRequest(arg);
            }
        }

Hope this satisfies...

Regards,

[Simon]

Hello Saed,

Thank you for providing the code.

The enable and disable client-side methods of the ComboBox work solely at the client-side, they do not initiate any postbacks/callbacks.

Why don't you continue using the same approach?

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Saed]

"The enable and disable client-side methods of the ComboBox work solely at the client-side ..."

So I'm right in my observation... But why so? Shouldn't that be faster that server-side?!


"Why don't you continue using the same approach?"

Sorry Simon, but I don't seem to get what you mean by that. Do you suggest to stay with server-side approach? If so, then the answer is simple... I'm trying to comply with the advice to minimise utilising server-side for tasks not concerned with network, database manipulation or similar advanced processes that really leverage server power. Consequently, I'm shifting all non server-dependent tasks to client-side whenever applicable.

Regards,

[Simon]

Hello Saed,

The enable/disable are relatively simple methods and they are faster that posting back to the server and enable/disable the control there.

I meant that you continue using the client-side approach.

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.