[MinkoBlocked]

Hello David,

Here is how you can update tab’s label based on it’s current value:

JavaScript

$(document).ready(function () {
    $('#jqxTabs').jqxTabs({ width: 580, height: 200 });
    var tabName = 'Node.js';
    $('.jqx-tabs-titleContentWrapper:contains("' + tabName + '")').text('Node.js 2');
});

In the code above the tab with label “Node.js” is changed to “Node.js 2“.

HTML

<div id='jqxTabs'>
    <ul>
        <li>Node.js</li>
        <li>JavaServer Pages</li>
        <li>Active Server Pages</li>
        <li>Python</li>
        <li>Perl</li>
    </ul>
    <div>
        Node.js
    </div>
    <div>
        JavaServer Pages (JSP)
    </div>
    <div>
        ASP.NET
    </div>
    <div>
        Python
    </div>
    <div>
        Perl
    </div>       
</div>

Best regards,
Minko.

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Kyano,

You can set the content of any of the windows inside jqxDocking using the following code:

JavaScript

$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 550, mode: 'default' });
$.ajax({
    url: 'test.txt',
    success: function (data) {
        $('#window0').jqxWindow('setContent', data);
    }
});

In the success callback the content of the window with id window0 is set to “Sample content“.

HTML

<div id="docking" style="float: left;">
    <div style="overflow: hidden;">
        <div id="window0" style="height: 100px">
            <div>
                CISC</div>
            <div>Content about CISC</div>
        </div>
        <div id="window1" style="height: 80px">
            <div>
                Database management system</div>
            <div>DBMS content</div>
        </div>
    </div>
    <div style="overflow: hidden;">
        <div id="window2" style="height: 80px">
            <div>
                RISC</div>
            <div>RISC content</div>
        </div>
    </div>
</div>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Chris,

you can achieve this by adding text and button into the element of the tab with class jqx-tabs-headerWrapper.
It’s with relative position so you can add the desired content like this:

JavaScript

$('#jqxTabs').jqxTabs({ width: 430, height: 200, position: 'top', theme: theme });
var container = $('#jqxTabs').children('.jqx-tabs-headerWrapper');
container.append('<div style="position:absolute;right:5px;top:5px;">Some text<button>X</button></div>');

HTML

<div id='jqxTabs'>
    <ul>
        <li style="margin-left: 3px;">Node.js</li>
        <li>JSP</li>
        <li>ASP</li>
        <li>Python</li>
    </ul>
    <div>
        Node.js
    </div>
    <div>
        JavaServer Pages
    </div>
    <div>
        ASP.NET
    </div>
    <div>
        Python
    </div>     
</div>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Adrian,

for setting jqxTooltip’s size you can use the following approach:

$("#jqxTooltip").jqxTooltip({ showHtml: true });
$("#jqxTooltip").jqxTooltip('add', element, '<div style="width: 100px; height: 50px;">Content</div>');

The code above creates tooltip which content could be HTML (this is because of setting showHtml property to true).
For tooltip’s content is used a div element with the desired size of the tooltip: 100×50.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Seekpunk,

Currently jqxDocking is not supporting this feature. We’ll consider it’s implementation in future.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hi Kloc,

Make sure that you’re using the last version of jQWidgets (2.2.0). Here is approach that works with the sample data that you’ve posted and jQWidgets 2.2.0:

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="jqxgrid"></div>
@{
ViewBag.Title = "Index";
}
@Html.ActionLink("Create New", "Create")
<script type="text/javascript">
    var datafields = [{ name: 'CPT1' },
                      { name: 'MOD' },
                      { name: 'SDESC' },
                      { name: 'FAGE' },
                      { name: 'TAGE'}];
    var source = {
        datatype: "json",
        datafields: datafields,
        url: 'Customers/GetCustomers'
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true });
    var records = dataAdapter.records;
    $("#jqxgrid").jqxGrid({
        source: { datafields: datafields, totalrecords: records.length },
        theme: 'classic',
        virtualmode: true,
        rendergridrows: function (params) {
            var start = params.startindex;
            var end = params.endindex;
            var array = new Array();
            for (var i = start; i < end; i++) {
                array[i] = records[i];
            }
            return array;
        }, columns: [{ text: 'CPT Code', datafield: 'CPT1', width: 250 },
            { text: 'Modifiers', datafield: 'MOD', width: 150 },
            { text: 'Short Description', datafield: 'SDESC', width: 180 },
            { text: 'From Age', datafield: 'FAGE', width: 200 },
            { text: 'To Age', datafield: 'TAGE', width: 120}]
        });
</script>

Here is the Controller:

public string GetCustomers()
{
    return "[{\"CPT1\":\"01844\",\"MOD\":null,\"SDESC\":\"Anesth vascular shunt surg\",\"FAGE\":0,\"TAGE\":0},{\"CPT1\":\"01844\",\"MOD\":null,\"SDESC\":\"Anesth vascular shunt surg\",\"FAGE\":0,\"TAGE\":0}, {\"CPT1\":\"01844\",\"MOD\":null,\"SDESC\":\"Anesth vascular shunt surg\",\"FAGE\":0,\"TAGE\":0},{\"CPT1\":\"01844\",\"MOD\":null,\"SDESC\":\"Anesth vascular shunt surg\",\"FAGE\":0,\"TAGE\":0},{\"CPT1\":\"01900\",\"MOD\":null,\"SDESC\":\"Anes- inj proc hysterosalpingography (Deleted 12/31/99)\",\"FAGE\":0,\"TAGE\":0},{\"CPT1\":\"01900\",\"MOD\":null,\"SDESC\":\"Anes- inj proc hysterosalpingography (Deleted 12/31/99)\",\"FAGE\":0,\"TAGE\":0}]";
}

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello ScottNL,

actually you can do it without using DOM ids. The problem with DOM ids comes from the uncertainty whether the current DOM id is set to the jqxTab’s header or content.
I suggest the following approach:

JavaScript:

var currentItem = 0,
    tabs = { 'tab_zero': currentItem },
    tabId;
$('#menu').jqxMenu({ width: 370 });
$('#menu').bind('itemclick', function (e) {
    tabId = 'tab_' + e.args.id;
    if (typeof tabs[tabId] === 'number') {
        $('#jqxTabs').jqxTabs('select', tabs[tabId]);
    } else {
        currentItem += 1;
        tabs[tabId] = currentItem;
        $('#jqxTabs').jqxTabs('addLast', e.args.innerHTML, 'Data: ' + e.args.innerHTML);
    }
});

HTML:

<div id="menu">
    <ul>
        <li id="zero">Node.js</li>
        <li id="first">First</li>
        <li id="second">Second</li>
        <li id="third">Third</li>
        <li id="fourth">Fourth</li>
        <li id="fifth">Fifth</li>
    </ul>
</div><br />
<div id='jqxTabs'>
    <ul>
        <li id="tab_zero">Node.js</li>
    </ul>
    <div>
        Data: Node.js
    </div>
</div>

The only difference here is that the jqxMenu is created statically from a fixed HTML markup.
In the hash tabs are saved fake ids (which are not set to any DOM element) and the position for each tab (corresponding to the id). The tab position is depending on the variable currentItem which is incrementing each time a new tab is added.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Carlo,

you can detect whether the browser is mobile and/or it’s screen resolution and resize the jqxMenu depending on that information.
Here is how you can resize jqxMenu:

$('#menu').jqxMenu('width', '500px');
$('#menu').jqxMenu('height', '100px');

The code above will make jqxMenu with height 100px and width 500px.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello m13badry,

In the following example new rule to the jqxValidator is added after it was initialized:

JavaScript

$(document).ready(function () {
    var theme = 'classic',
        rules = [{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                    { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' }];
    $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
    $("#register").jqxExpander({ width: '300px', theme: theme, showArrow: false, toggleMode: 'none' });
            
    //On click calling the validate method of the jqxValidator
    $('#sendButton').bind('click', function () {
        $('#testForm').jqxValidator('validate');
    });
    // initialize validator.
    $('#testForm').jqxValidator({
        rules: rules, theme: theme
    });
    //Append a new row to the table
    $('#registerTable').children('tbody').prepend(
    '<tr><td>New input:</td><td><input type="text" id="numberInput" /></td></tr>'
    );
    //Append new rule
    rules.push(
        { input: '#numberInput', message: 'This value is required!', action: 'keyup', rule: 'required' }
    );
    //Update jqxValidator's rules
    $('#testForm').jqxValidator('rules', rules);
});

HTML

<div id="register">
    <div><strong>Register</strong></div>
    <div>
        <form id="testForm" action="./">
            <table id="registerTable">
                <tr>
                    <td>Username:</td>
                    <td><input type="text" id="userInput" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td>
                </tr>
            </table>
        </form>
    </div>
</div>

In the code above first the variable rules is initialized with all rules we need at the beginning, after that the jqxValidator is initialized with it and with specific theme. Later new row is appended to the table inside the form which we want to validate. New rule is pushed in the rules array and at last jqxValidator’s rules are updated.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

you can load the content of the jqxWindow dynamically using the following function:

$(document).ready(function () {
    //Initializing the window
    $('#window').jqxWindow({ height: '130px' });
    //Make AJAX request and set window's content with the responed data
    function changeContent(url, window) {
        window.jqxWindow('setContent', 'Loading...');
        $.ajax({
            dataType: 'jsonp',
            url: url,
            success: function (data) {
                //Parsing the data if needed
                window.jqxWindow('setContent', data[0].text);
            },
            error: function () {
                window.jqxWindow('setContent', 'Error');
            }
        });
    }
    changeContent('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jqwidgets&count=1', $('#window'));
});

In the example above the content of the window will be the last tweet of jQWidgets.

First we define function which accepts as arguments url (used for getting JSONP) and specific window.
In the function we make ajax request. The success callback sets jqxWindow’s content.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

here is a solution for your problem:

CSS:

<style type="text/css">
.dropdown-shadow
{        
    -webkit-box-shadow: 5px 4px 10px #333333;
    box-shadow: 5px 4px 10px #333333;
}
.dropdown-parent
{
    padding-left: 7px;
    padding-top: 7px;
    padding-right: 7px;
}
</style>

JavaScript:

//Initialization of jqxMenu
$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'classic' });
//Set shadow to jqxMenu's submenus and padding to their wrapper
$('.jqx-menu-dropdown').addClass('dropdown-shadow').parent().addClass('dropdown-parent');

In the code above after the initialization of jqxMenu you have to set shadow to all it’s submenus and padding to the submenu’s wrapper.
If your shadow is with bigger length the padding should be bigger.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

make sure you’ve set jqxTree’s height to ‘100%’:

$('#treeView').jqxTree({ height: '100%', width: '100%', source: source });

Here is the whole source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows a complex layout implementation that shows nesting multiple splitters.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#mainSplitter').jqxSplitter({ width: 800, height: 800, orientation: 'horizontal', panels: [{ size: 650 }, { size: 150}] });
        $('#viewSplitter').jqxSplitter({ width: 800, height: 650, orientation: 'vertical', panels: [{ size: 200 }, { size: 600}] });
        $('#mainSplitter').jqxSplitter({ splitBarSize: '3px' });
        $('#viewSplitter').jqxSplitter({ splitBarSize: '3px' });
        $('#headerSplitter').jqxSplitter('disable');
        var source = [
		{ label: "Root1", expanded: true, selected: true, items: [
			{ label: "Group1", items: [
				{ label: "Group1-1", items: [
					{ label: "Group1-1-1", items: [
						{ label: "Group-1-1-1-1-1-1-1-1-1" }]
					}]
				}]
			}]
		},
		{ label: "Root2", items: [
			{ label: "Group1" }]
		}];
        $('#treeView').jqxTree({ height: '100%', width: '100%', source: source });
    });
</script>
</head>
<body>
<div id="jqxWidget">
    <div id="mainSplitter">
	    <div id="viewSplitter">
		    <div id="treeView">
		    </div>
		    <div id="listView">
                Right Panel
		    </div>
	    </div>
	    <div id="outputSplitter">
            Bottom Panel
	    </div>
    </div>
</div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Stephen,

the method displayWindowsPositions in the code below shows the positions of all windows in their parent section:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#docking').jqxDocking({ theme: 'classic', orientation: 'horizontal', width: 310, mode: 'default' });
            $('#docking').jqxDocking('hideAllCloseButtons');
            function displayWindowsPositions(window) {
                var parent = $('#' + window).parent(),
                    windows = parent.children('.jqx-window'),
                    current;
                $('#data').empty();
                for (var position = 0; position < windows.length; position += 1) {
                    current = windows[position];
                    $('#data').append(
                        '<div>' + $(current).find('.jqx-window-header').text() + '</div>'
                    );
                    if ($(window).attr('id') === window) {
                        return position;
                    }
                }
            }
            $('#docking').bind('dragEnd', function (event) {
                displayWindowsPositions(event.args.window);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="docking" style="float: left;">
        <div>
            <div id="window0" style="height: 150px">
                <div>
                    CISC</div>
                <div>
                    Before the RISC philosophy became prominent, many computer architects tried to bridge
                    the so called semantic gap, i.e. to design instruction sets that directly supported
                    high-level programming constructs such as procedure calls, loop control, and complex...</div>
            </div>
            <div id="window1" style="height: 150px">
                <div>
                    Database management system</div>
                <div>
                    A database management system (DBMS) is a software package with computer programs
                    that control the creation, maintenance, and the use of a database. It allows organizations
                    to conveniently develop databases...</div>
            </div>
            <div id="window2" style="height: 150px">
                <div>
                    RISC</div>
                <div>
                    Some aspects attributed to the first RISC-labeled designs around 1975 include the
                    observations that the memory-restricted compilers of the time were often unable
                    to take advantage...</div>
            </div>
        </div>
    </div>
    <div id="data" style="border-width: 0px; float: left;
        margin-left: 30px;">
    </div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello kerusia,

you can do this with the new release of jQWidgets v2.1.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

I’m glad that I was helpful. For ASP.NET MVC 3 you can start with these materials of http://www.asp.net/mvc/tutorials.
If you want to go further you can look at the book section http://www.asp.net/mvc/books.
For jQuery I recommend you jQuery Docs at http://docs.jquery.com/Main_Page.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[Author]

Posts