[mail2taurusParticipant]

Dear Sir,

Thank you for your response. Actually I have a jqxSplitter by the code are follows:

index.cshtml:
@{
    ViewBag.Title = "Index";
}

@section scripts {
    <script src="~/Scripts/jqwidgets/jqxcore.js"></script>
    <script src="~/Scripts/jqwidgets/jqxsplitter.js"></script>
    <script src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
    <script src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
    <script src="~/Scripts/jqwidgets/jqxpanel.js"></script>

    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.selection.js"></script>
}

<span>Role Menu</span>
<div id='jqxWidget'>
    <div id="mainSplitter">
        <div class="splitter-panel">
            <div id='tabswidget'>
                <ul style='margin-left: 20px;'>
                    <li style="margin-left: 30px;">กลุ่ม
                    <li>บุคคล</li>
                
                <div>
                    @Html.Partial("_GroupColumn")
                </div>
                <div>
                    Content 2
                </div>
            </div>
        </div>
        <div class="splitter-panel">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var theme = "classic";
        $('#mainSplitter').jqxSplitter({ width: '100%', height: 500, theme: theme, panels: [{ size: '25%' }, { size: '75%' }] });
        //$('#panelRight').jqxSplitter({ width: '100%', height: 500, theme: theme, panels: [{ size: '35%' }, { size: '65%' }] });
        $("#tabswidget").jqxTabs({ theme: theme, height: '100%', width: '100%' });
    });
</script>

GroupColumn.cshtml: (partial view)
<div id='jqxListBox' class="jqx-hideborder">
    
</div>

<script type="text/javascript">
    var ListBoxSelectFlag = -1;         //
    $(document).ready(function () {

        var theme = "classic";
        var url = "/GroupRole/GetGroups";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'GROUP_ID' },
                { name: 'GROUP_NAME' }
            ],
            //id: 'id',
            url: url
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        // Create a jqxListBox
        $("#jqxListBox").jqxListBox({
            source: dataAdapter, displayMember: "GROUP_NAME", valueMember: "GROUP_ID",
            width: '100%', height: 450, theme: "classic"
        });

        $("#jqxListBox").bind('select', function (event) {
            console.log(event);
            if (event.args) {
                var item = event.args.item;
                // flag used for blocking the second event, the bug that fires event twice
                if (item.index == ListBoxSelectFlag)
                    return;
                else
                    ListBoxSelectFlag = item.value;
                if (item) {
                    $.post("/GroupRole/GetRolesByGroupId", { "GROUP_ID": item.index })
                        .done(function (data) {
                            $("#jqxListBox_Role").jqxListBox('uncheckAll');
                            var items = $("#jqxListBox_Role").jqxListBox('getItems');
                            for (i = 0; i < data.length; i++) {
                                for (j = 0; j < items.length; j++)
                                    if (data[i].ROLE_ID == items[j].value) {
                                        $("#jqxListBox_Role").jqxListBox('checkIndex', j);
                                    }
                            }
                     }); 
                }
            }
        });
    });
</script>

[mail2taurusParticipant]

Additional information,

I use console.log() to write the parameter when the events fired.
One came from the script but another came from “VMxx”.

Thanks you,
W

[mail2taurusParticipant]

Dear Dimitar,

The navigation bar that I mention is the bar that use for paging the grid that normally lay under the grid.
Could we change it to the top of the grid?

Best regards,
Wijit

[mail2taurusParticipant]

Dear Peter,

I solved the problem by enclosed the unicode string with encodeURIComponent(). It works fine with IE 10 and other browsers.

Thank you
Best regards,
Wijit

[mail2taurusParticipant]

Dear Peter,

Why it works different between chrome and IE? Can I set the content type for the request that grid send to the server ?

Thank you,
Best Regards,
Wijit

[mail2taurusParticipant]

Dear Peter,

It’s call “Stacked Header”. You replied my mail on October 2012.

Best Regards;
Wijit

[mail2taurusParticipant]

I had asked this question to supported team about 4 months ago. He said the combine header feature would release on December 2012. But I haven’t seen it yet?

[Author]

Posts