[MinkoBlocked]

Hello,

You can achieve that with few little changes in your code. You have to change the columnType to ‘button’.
Another thing you have to change is the body of the callback – buttonclick.
Here is the example:

    $(document).ready(function () {
        var data = {
            datatype: "json",
            datafields: [
        { name: 'CustomerID' },
        { name: 'CompanyName' },
        { name: 'Address' },
        { name: 'City' }],
            url: 'Customers/GetCustomers'
        };
        var editrowindex = -1;
        $('#jqxgrid').jqxGrid({
            width: 620,
            source: data,
            theme: 'energyblue',
            columns: [
            { text: 'CustomerID', datafield: 'CustomerID', hidden: 'true' },
            { text: 'Company Name', datafield: 'CompanyName', width: 250 },
            { text: 'Address', datafield: 'Address', width: 150 },
            { text: 'City', datafield: 'City', width: 150 },
            { text: 'Edit', datafield: 'Edit', columntype: 'button', width: 50, cellsrenderer: function () {
                return "Edit";
            }, buttonclick: function (row) {
                editrowindex = row;
                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "CustomerID");
                window.location = '/Customers/Edit/?id=' + id;
            }
            }]
        });
    });

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello David,

When you set the jqxTab’s width to auto, the jqxTab’s width depends on the content width maximum width. So if your first tab’s content is with width bigger than the contents of the all other tabs jqxTab’s width will be as big as your first tab content.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello David,

Here you can see the upper example modified to work with html:

$(document).ready(function () {
    var theme = 'classic',
        addButton,
        addButtonWidth = 29,
        index = 0;
    // create jqxTabs.
    $('#jqxTabs').jqxTabs({ height: 200, width: 300, theme: theme, showCloseButtons: true });
    var index = 0;
    $('#jqxTabs').bind('tabclick', function (event) {
        var header,
            content;
        if (event.args.item === $('#unorderedList').find('li').length - 1) {
            //Loading the header and the content of the new tab with AJAX
            $.ajax({
                type: 'get',
                url: index + '.html',
                //On success - adding the new tab with the loaded content
                success: function (data) {
                    header = "Header " + (index + 1);
                    content = data;
                    //Checking the tab name
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs').jqxTabs('addAt', event.args.item, header, content);
                    index++;
                },
                //On error - alerting an error message
                error: function () {
                    alert('Error (probably the file you want to load is missing)!');
                }
            });
        }
    });
});

And the html markup for the jqxTabs structure:

<div id='jqxTabs' style="float: left;">
    <ul style="margin-left: 30px;" id="unorderedList">
        <li canselect='false' style='padding: 5px; font-style:italic; font-size: 14px; border: none; background: transparent;' hasclosebutton='false'>+</li>
    </ul>
    <div>
    </div>
</div>

The example will load the content of html files with names 0.html, 1.html and 2.html.
Here is sample content of the html files:

0.html:

<strong>First tab's content</strong>

1.html:

<strong><i>Second tab's conent</i></strong>

2.html:

<a href="http://jqwidgets.com/" target="_blank">Third tabs</a>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

To have the smallest value at the bottom you can use the following workaround:

$('#jqxSlider').bind('change', function (event) {
    var val = $('#jqxSlider').jqxSlider('max') - event.args.value;
});

Take a look at the custom Slider theme here: Slider with Custom Theme

Download Demo: slider_demo.zip

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello,

You can use jqxNumberInput with bigger value if you change the digits property (it’s default is 8). If you’re looking for better precision, you can achieve it with the decimalDigits property.

Here is an example:

$("#numericInput").jqxNumberInput({ width: '250px', decimal: 1234, height: '25px', min: 0, spinButtons: true, digits: 10, decimalDigits: 5 });

Best regards,

Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hi balow,

The web.config on my test project is:

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=152368
  -->
<configuration>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      </assemblies>
    </compilation>
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880" />
    </authentication>
    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
      </namespaces>
    </pages>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <connectionStrings>
    <add name="NORTHWNDEntities" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=MINKO-PC;Initial Catalog=Northwind;Integrated Security=True;&quot;" providerName="System.Data.EntityClient" />
    <add name="NORTHWNDEntities1" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=MINKO-PC;Initial Catalog=Northwind;Integrated Security=True;&quot;" providerName="System.Data.EntityClient" />
    <add name="NORTHWNDEntities2" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=MINKO-PC;Initial Catalog=Northwind;Integrated Security=True;&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
</configuration>

I’ve also uploaded the project from the tutorial and you can download it from here: Server-Side-Filtering.zip

Best regards,

Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello,

I reproduced that error by removing the reference to the Entity Framework. Could you please double-check your reference or add it again? You can add the reference to the Entity Framework with the following steps:

1) Right click on your project
2) Choose “Add Reference”
3) Select the tab with title “.NET”
4) Find and select the component with name “Entity Framework”
5) Click “OK.”

You also have to check the connection strings in the web.config.
After that rebuild your project.

Best regards,

Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello Jon,

I’m sorry that I missed that issue. It seems that KnockoutJS is passing different parameters to the buildWindow function in IE8.
Here is the code with that issue fixed:

$(document).ready(function () {
    var theme = 'classic',
        PeopleModel = function () {
            //We define observable variable for the name
            this.personName = ko.observable();
            //We define observable variable for the credits
            this.personCredits = ko.observable();
            //We define observable array for the pairs (name, credits)
            this.people = ko.observableArray([{ name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800}]);
            var self = this,
                sectionsCount = 0,
                windowsCount = 0,
                maxSections;
            //This method will handle the new added sections
            function handleSection(el) {
                var id = 'knockout-section-' + sectionsCount;
                sectionsCount += 1;
                el.id = id;
                $(el).appendTo($('#docking'));
                $(el).css('width', '47%');
            }
            //This method will handle the new added windows
            function handleWindow(el) {
                var id = 'knockout-window-' + windowsCount,
                    section = windowsCount % sectionsCount;
                windowsCount += 1;
                $(el).attr('id', id);
                $('#docking').jqxDocking('addWindow', id, 'docked', section, windowsCount);
            }
            function getDOMElement(args) {
                for (var i = 0; i < args.length; i += 1) {
                    if (args[i].tagName && args[i].tagName.toUpperCase() === 'DIV') {
                        return args[i];
                    }
                }
                return null;
            }
            //We define the docking's sections count to be equal to the startup count of the objects in the
            //people array. This is not mandatory but it's important to create all different sections before the docking initialization
            maxSections = this.people().length;
            //This method handles adding a new person (when the user click on the Add button)
            this.addPerson = function () {
                if (this.personName() && this.personCredits()) {
                    this.people.push({
                        name: this.personName(),
                        credits: this.personCredits()
                    });
                }
            }
            //This custom render takes care of adding new windows
            this.buildWindow = function (element) {
                var el = getDOMElement(element);
                if (sectionsCount < maxSections) {
                    handleSection(el);
                    handleWindow($(el).children('.knockout-window'));
                } else {
                    handleWindow($(el).children('.knockout-window'));
                    $(el).remove();
                }
            }
        };
    ko.applyBindings(new PeopleModel());
    $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 380, mode: 'docked' });
});

Best regards,

Minko

jQWidgets Team
http://jqwidgets.com/

[MinkoBlocked]

Hello John,

For your aim you have to add a custom render which handles new added windows, when the observableArray is changed.
In this render you have to add an id to the window and add it to the docking.
In the source bellow there’s a better illustration of my description.

You can achieve the searched effect this with the following JavaScript:

var theme = 'classic',
    PeopleModel = function () {
        //We define observable variable for the name
        this.personName = ko.observable();
        //We define observable variable for the credits
        this.personCredits = ko.observable();
        //We define observable array for the pairs (name, credits)
        this.people = ko.observableArray([{ name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800}]);
        var self = this,
            sectionsCount = 0,
            windowsCount = 0,
            maxSections;
        //This method will handle the new added sections
        function handleSection(el) {
            var id = 'knockout-section-' + sectionsCount;
            sectionsCount += 1;
            el.id = id;
        }
        //This method will handle the new added windows
        function handleWindow(el) {
            var id = 'knockout-window-' + windowsCount,
                section = windowsCount % sectionsCount;
            windowsCount += 1;
            $(el).attr('id', id);
            $('#docking').jqxDocking('addWindow', id);
            $(el).detach();
            $(el).appendTo($('#knockout-section-' + section));
        }
        //We define the docking's sections count to be equal to the startup count of the objects in the
        //people array. This is not mandatory but it's important to create all different sections before the docking initialization
        maxSections = this.people().length;
        //This method handles adding a new person (when the user click on the Add button)
        this.addPerson = function () {
            if (this.personName() && this.personCredits()) {
                this.people.push({
                    name: this.personName(),
                    credits: this.personCredits()
                });
            }
        }
        //This custom render takes care of adding new windows
        this.buildWindow = function (element) {
            var el = element[1];
            if (sectionsCount < maxSections) {
                handleSection(el);
                handleWindow($(el).children('.knockout-window'));
            } else {
                handleWindow($(el).children('.knockout-window'));
                $(el).remove();
            }
        }
    };
ko.applyBindings(new PeopleModel());
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 380, mode: 'docked' });
});

Using this HTML5 markup:

<input type="text" data-bind="value: personName" />
<input type="text" data-bind="value: personCredits" />
<input type="button" data-bind="click: addPerson" value="Add" />
<div id='jqxWidget'>
    <div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }">
        <div class="knockout-section">
            <div class="knockout-window">
                <div>Name <span data-bind="text: name"></span></div>
                <div>
                    Credits count: <span data-bind="text: credits"></span>
                </div>
            </div>
        </div>
    </div>
</div>

Best regards,

Minko

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello David,

You can add new tabs which content is loaded via Ajax using the following code:

        $(document).ready(function () {
            var theme = 'classic';
            var addButton,
                addButtonWidth = 29,
                index = 0;
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 200, width: 300, theme: theme, showCloseButtons: true });
            var index = 0;
            $('#jqxTabs').bind('tabclick', function (event) {
                var header,
                    content;
                if (event.args.item === $('#unorderedList').find('li').length - 1) {
                    //Loading the header and the content of the new tab with AJAX
                    $.ajax({
                        type: 'get',
                        url: (index + 1) + '.json',
                        //On success - adding the new tab with the loaded content
                        success: function (data) {
                            data = $.parseJSON(data);
                            header = data['tab']['header'];
                            content = data['tab']['content'];
                            var length = $('#unorderedList').find('li').length;
                            $('#jqxTabs').jqxTabs('addAt', event.args.item, header, content);
                            index++;
                        },
                        //On error - alerting an error message
                        error: function () {
                            alert('Error (probably the file you want to load is missing)!');
                        }
                    });
                }
            });
        });

Here is the required HTML markup:

    <div id='jqxTabs' style="float: left;">
        <ul style="margin-left: 30px;" id="unorderedList">
            <li>Static 1</li>
            <li>Static 2</li>
            <li canselect='false' style='padding: 5px; font-style:italic; font-size: 14px; border: none; background: transparent;' hasclosebutton='false'>+</li>
        </ul>
        <div>
            Static 1
        </div>
        <div>
            Static 2
        </div>
        <div>
        </div>
    </div>

The example is using JSON files called 1.json, 2.json and 3.json, which content is loaded dynamically using AJAX. Here is sample content of 1.json:

{
	"tab": {
		"header": "Dynamic 1",
		"content": "Dynamic 1"
	}
}

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello Jeff,

This issue will be fixed in the next release.
Here is a simple workaround until then:

$(document).ready(function () {
    var target = $('.target'),
        targetHandle = [],
        width = $('#dragme').width(),
        height = $('#dragme').height();
    (function init() {
        var currElement;
        $.each(target, function (idx, el) {
            el = $(el);
            targetHandle.push({
                bounds: { width: el.width(), height: el.height(), left: el.offset().left, top: el.offset().top },
                entered: false,
                el: el
            });
        });
    } ())
    $(document).mousemove(function (event) {
        var offset = $('#dragme').offset(),
            left = offset.left,
            top = offset.top;
        $.each(targetHandle, function (idx, el) {
            b = el.bounds;
            if (left + width > b.left &&
                left < b.left + b.width &&
                top + height > b.top &&
                top < b.top + b.height) {
                if (!el.entered) {
                    fireEvent('dropTargetEnter', { target: el.el });
                    el.entered = true;
                }
            } else {
                if (el.entered) {
                    fireEvent('dropTargetLeave', { target: el.el });
                    el.entered = false;
                }
            }
        });
    });
    function fireEvent(name, args) {
        var e = $.Event(name);
        e.args = args;
        return $('#dragme').trigger(e);
    }
    $('#dragme').jqxDragDrop({ dropTarget: target, feedback: 'original' });
    $('#dragme').bind('dropTargetEnter', function (event) { $(event.args.target).css('border', '2px solid #000'); }); //Works just fine.
    $('#dragme').bind('dropTargetLeave', function (event) { $(event.args.target).css('border', '0px'); }); //Never fires when I leave 
});

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello Ron,

Unfortunately, at that moment, we are not supporting this functionality. Currently you can drop windows just over the jqxDocking they belongs. We plan to work on similar feature in the next version of jqxDocking.

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello Mahesh,

You can change the default scrollbar by using jqxPanel with jqxTabs. In the next example you can see how you can do this:

<!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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //initializing jqxTabs
            $('#jqxTabs').jqxTabs({ width: 380, height: 150, position: 'top', theme: 'classic' });
            //initializing jqxPanel
            $('.panel').jqxPanel({ height: 110, width: 374, autoUpdate: true, theme: 'classic' });
        });
    </script>
</head>
<body>
    <div id='jqxTabs'>
        <ul>
            <li>Node.js</li>
            <li>JavaServer Pages</li>
        </ul>
        <div>
            <div id="panel1" class="panel">
                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
            </div>
        </div>
        <div>
            <div id="panel2" class="panel">
                JavaServer Pages (JSP) is a Java technology that helps software developers serve
                dynamically generated web pages based on HTML, XML, or other document types. Released
                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
                the perception that the Java programming environment didn't provide developers with
                enough support for the Web. To deploy and run, a compatible web server with servlet
                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
                container.
            </div>
        </div>
    </div>
</body>
</html>

Important parts are the initialization of the jqxTabs and jqxPanel and wrapping the jqxTabs contents into a panels.

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[MinkoBlocked]

Hello Richard,

It seems that there’s an issue with the offset() method of jQuery when is used a border on the html. We are using this method in jqxSplitter. There are two approaches for handling the issue:

1) Using any html element which is going to simulate the same effect as a top border.
2) Putting the splitter into iframe. The only thing that should be fixed is attaching to the parent window’s mouseup event:

if (window.frameElement) {
    if (window.top != null) {
        $(window.top.document).bind('mouseup', function (event) {
            $(document).trigger('mouseup');
        });
    }
}

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com

[MinkoBlocked]

Hello Alec,

You can do it by overriding the CSS classs containing the pictures which you want to change:
For example:

.jqx-rating-image-default-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb.png);
    overflow: hidden;
}
/*applied to the rating when it is hovered.*/
.jqx-rating-image-hover-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb_hover.png);
    overflow: hidden;
}
/*applied to the rating when it is disabled.*/
.jqx-rating-image-backward-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb_disabled.png);
    overflow: hidden;
}

This is going to change your rating picture for the classic theme.
Here is the full source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Rating, jqxRating, Rating Widget" /> 
    <meta name="description" content="The jqxRating control represents a widget that allows you to choose a rating." />
    <title id='Description'>The jqxRating control represents a widget that allows you to choose a rating. You can configure the rating item's size, image and the number of displayed items.</title>
    <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.6.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrating.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxPanel
            var theme = $.data(document.body, 'theme');
            if (theme == null || theme == undefined) theme = 'classic';
            $("#jqxRating").jqxRating({ width: 350, height: 35, theme: theme });
            $("#jqxRating").bind('change', function (event) {
                $("#rate").find('span').remove();
                $("#rate").append('<span>' + event.value + '</span');
            });
        });
    </script>
    <style type="text/css">
        .jqx-rating-image-default-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb.png);
            overflow: hidden;
        }
        /*applied to the rating when it is hovered.*/
        .jqx-rating-image-hover-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb_hover.png);
            overflow: hidden;
        }
        /*applied to the rating when it is disabled.*/
        .jqx-rating-image-backward-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb_disabled.png);
            overflow: hidden;
        }
    </style>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div id='jqxRating'></div>
        <div style='margin-top:10px;'>
           <div style='float: left;'>Rating:</div> <div style='float: left;' id='rate'></div>
        </div>
  </div>
  </body>
</html>

Best regards!

Minko.

[Author]

Posts