[jean-fredericParticipant]

It seems to be fixed with the latest release 3.3.0

Merci !

[jean-fredericParticipant]

Hello,

Unfortunately, this is not better, this is even worst.

If the validation of the field is “must not be empty”.

Then I hit TAB, I enter that field and yes, there is no error validation.

But when I type the first Key, on keydown event, it will look for the field to not be empty, but it will be empty since the letter is not added to the field before the “keydown” event.

So, I end up with a field, with one letter inside and an error message saying the field must not be empty.

[jean-fredericParticipant]

Hello, this worked perfectly.

Im use often display:block because most of the time, what I hide, I dont want it to take “screen space”. But in that case, some project properties will be hidden with display:block since not all project have the same properties. But, for the listbox, i will initialize them inside visibility:hidden div, this work.

I updated http://jsfiddle.net/JeanFrederic/Ke68G/

Now, If I click on

Update – Hidden – Update – Visible

it work like a charm !

Thanks a lot.

[jean-fredericParticipant]

Hello Peter,

Once again, thanks for your advice, will try with visibility instead of display.

Keep you in touch

[jean-fredericParticipant]

Hello Peter, thanks for your reply.

Im doing this since I dont want to have any “visual glitch” for a windows “in construction”.

In my application, i have a list of project on the left. When we click on one project in that list, I want to show properties of that project on the right side. Im doing an ajax call and on the success callback, I show the information on the right side. I must “clean” right side between user selection.

But, I dont want to start showing the project information section then, “draw” control in front of customer eye. When information appear on the right side, it’s “ready” to be see.

I hope you will find a way to solve this.
Thanks a lot.

[jean-fredericParticipant]

Hello and thanks for your reply.

I did found a solution, if this can help someone.

(function($){
$.fn.disableSelectionCustom = function() {
return this
.attr(‘unselectable’, ‘on’)
.css(‘user-select’, ‘none’)
.on(‘selectstart’, false);
};
})(jQuery);

$(“#jqxgrid”).disableSelectionCustom();

*i did add “custom” because there is a function .disableSelection inside jqueryUI*

You can see this in action :
http://jsfiddle.net/JeanFrederic/KqQ4W/

Have a nice day !

[jean-fredericParticipant]

Thanks Peter,

Meanwhile, if this can help someone, here is how I did solve it :

There is a Div ID wich is “filterrow.(GridNameHere)”

so, if your Grid name is : jqxgrid, id will be : “filterrow.jqxgrid”

So, I reach all “jqx-input” below that point and disable them.
Since there is a dot in the Div ID, we need to double-backslash it.

$(“div#filterrow\\.jqxgrid .jqx-input”).prop(‘disabled’, true);

Have a nice day !

[jean-fredericParticipant]

Hello,

The fact is, the class jax-fill-state-disabled is NOT applied to the switch button if it’s disabled. This might be a bug.

Here’s a demo.

http://jsfiddle.net/JeanFrederic/6THC9/

But thanks for your reply, I used your trick to get around it.
I used the “addClass” from jQuery to add the class myself.
This is inside the demo also.

Thanks a lot

Jean-Frederic

[jean-fredericParticipant]

Would be nice to find your framework there :
https://github.com/borisyankov/DefinitelyTyped

[jean-fredericParticipant]

Thanks, Very useful to me also.

Jean-Frederic

[jean-fredericParticipant]

Hello,

That the solution I used.

Since the area where the switch button is used MUST be hidden, I needed to do a trick.

I use a place holder that I initialize AFTER I make the area visible.

http://jsfiddle.net/JeanFrederic/GT57j/10/

Thanks for your help

Jean-Frederic

[jean-fredericParticipant]

Oh, and by the way, we have the issue ONLY if the value of the initialized switch button is false.

Thanks again !

[jean-fredericParticipant]

I got the solution :

I discovered that when a dataAdapter contain a properties “expanded” wich may containt anything, it will expand the tree.
Since I return a list of object (PagesDTO), if I name a propertie “expanded” with true of false, it will expand ALL tree level, wich I dont want.

So, here is my Jedi Trick to bypass that.

I didnt wanted to have a “server-side” load with recursive proc. So i decided to use the client computer to manipulate the data. I added a properties “state” (string) wich will containt the word “expanded” if the tree need to be open.

Then, when building the dataAdapter, will iterate thru all of it and If I see a “state==expanded”, I will ADD a new properties wich will be called “expanded”.

So now, I expand my tree on the LOADING. I dont trigger my “expand” event while I expand my tree AND , there is not “visual glitch”, like a tree that is closed and open after that.

Here is my example :

function showPagesForCurrentSite() {
$(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
updateTreeSource();
bindTreeRightClickEvent();
bindTreeExpand();
bindTreeCollapse();
}

function updateTreeSource()
{
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘id’, map: ‘id’ },
{ name: ‘Ordre’, map: ‘Ordre’ },
{ name: ‘label’, map: ‘label’ },
{ name: ‘parentid’, map: ‘parentid’ },
{ name: ‘state’, map: ‘state’ },
],
root: “ArrayOfPagesDto”,
record: “PagesDto”,
id: ‘id’,
url: “/api/AllPages”,
async: false
};

var dataAdapter = new $.jqx.dataAdapter(source);

dataAdapter.dataBind();

var length = dataAdapter.records.length;

for (var i = 0; i < length; i++) {
if (dataAdapter.records[i].state == “expanded”)
dataAdapter.records[i].expanded = true;
/*this is the MAGIC, only records wich have the state expanded will have the propertie “expanded” */
}
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);

$(‘#jqxTree-pages’).jqxTree({ source: records });
}

function bindTreeRightClickEvent()
{
var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
var clickedItem = null;

var attachContextMenu = function () {
// open the context menu when the user presses the mouse right button.
$(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
var target = $(event.target).parents(‘li:first’)[0];
var rightClick = isRightClick(event);
if (rightClick && target != null) {
$(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});
}
attachContextMenu();
$(“#jqxMenu”).on(‘itemclick’, function (event) {
var item = $.trim($(event.args).text());
switch (item) {
case “Open”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
alert(‘Page Id:’ + selectedItem.id);
break;
case “Add Item”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree-pages’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element);
attachContextMenu();
}
break;
case “Remove Item”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree-pages’).jqxTree(‘removeItem’, selectedItem.element);
attachContextMenu();
}
break;
}
});

// disable the default browser’s context menu.
$(document).on(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}
return true;
});

function isRightClick(event) {
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
return rightclick;
}

$(“#jqxTree”).on(‘itemclick’, function (event) {
var id = event.args.id;
var custom;
var recursion = function (object) {
for (var i = 0; i < object.length; i++) {
if (id == object[i].id) {
custom = object[i].custom;
break;
} else if (object[i].items) {
recursion(object[i].items);
};
};
};
recursion(records);
$(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
});
}

function bindTreeExpand() {

$(‘#jqxTree-pages’).on(‘expand’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: true,
}
updateUserProfileOpenPage(obj);
});
}

function bindTreeCollapse() {
$(‘#jqxTree-pages’).on(‘collapse’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: false,
}
updateUserProfileOpenPage(obj);
});
}

function updateUserProfileOpenPage(obj) {
$.ajax({
url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
type: “post”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: JSON.stringify(obj),
async: false
});
}

[jean-fredericParticipant]

Maybe a solution ??

I receive a list of xml like this :

<ArrayOfPagesDto xmlns:i=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://schemas.datacontract.org/2004/07/Octopus_v2.Dto”>
<PagesDto>
<Order>1</Order>
<id>125</id>
<label>Home</label>
<langues i:nil=”true”></langues>
<parentid>0</parentid>
</PagesDto>
<PagesDto>
<Order>1</Order>
<id>137</id>
<label>À propos</label>
<langues i:nil=”true”></langues>
<parentid>125</parentid>
</PagesDto>
<PagesDto>
<Order>1</Order>
<id>153</id>
<label>Bénéfices</label>
<langues i:nil=”true”></langues>
<parentid>151</parentid>
</PagesDto>

…

</ArrayOfPagesDto>

I could receive a parameter that say the page need to be open or not. So, I would not have to iterate thru all tree item and “open them” manually. This way, I would not “fire” the expand event.

But, HOW, can I tell the tree to open the item ? I did try that approach in the past (with the param bool expanded, but as soon as there is a param named expanded, even if true or false, it will expand the tree).

Thanks

Jean-Frederic
Canam Group

[jean-fredericParticipant]

Hello,

We did achive this function. But, we have a small “performance” issue. Well, this is working good, but, each time the Tree is shown, we iterate through all “open” branch to open them. But since there is an event on “expand” (wich is asynchronous), we fire that event each time we open a branch.

So, Im looking for a solution for not “firing” the updateDatabase each time we refresh the tree. I was trying to figure if it was possible to use “click” event instead of “expand” event.

Le me show you.

We have this function on the

On the page loading (where the tree is) , we call that function.

function showPagesForCurrentSite() {
$(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
updateTreeSource();
bindTreeRightClickEvent();
bindTreeExpand();
bindTreeCollapse();
}

each time, we want to only refresh the tree, we call updateTreeSource();

Now, the function wich expend all “open page” :
(this return from the database, a list of all open page for the current user/site)

function expandPages()
{
var obj =
{
‘siteId’: $(‘#userSite’).val()
}

var array= [];

var jqXHR = $.ajax({
url: ‘/api/UserProfileOpenPageForCurrentSiteApi/GetAllOpenPages’,
data: obj,
async: false
});

array = jqXHR.responseText;

var items = $(‘#jqxTree-pages’).jqxTree(‘getItems’);
for (var i = 0; i < items.length; i++) {
if (array.indexOf(items[i].id) != -1)
{
$(‘#jqxTree-pages’).jqxTree(‘expandItem’, items[i]);
}
};
}

function updateTreeSource()
{
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘id’, map: ‘id’ },
{ name: ‘Ordre’, map: ‘Ordre’ },
{ name: ‘label’, map: ‘label’ },
{ name: ‘parentid’, map: ‘parentid’ },
{ name: ‘expanded’, map: ‘expanded’ },
],
root: “ArrayOfPagesDto”,
record: “PagesDto”,
id: ‘id’,
url: “/api/AllPages”,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);
$(‘#jqxTree-pages’).jqxTree({ source: records });
expandPages();
}

function bindTreeRightClickEvent()
{
var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
var clickedItem = null;

var attachContextMenu = function () {
// open the context menu when the user presses the mouse right button.
$(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
var target = $(event.target).parents(‘li:first’)[0];
var rightClick = isRightClick(event);
if (rightClick && target != null) {
$(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});
}
attachContextMenu();
$(“#jqxMenu”).on(‘itemclick’, function (event) {
var item = $.trim($(event.args).text());
switch (item) {
case “Open”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
alert(‘Page Id:’ + selectedItem.id);
break;
}
});

// disable the default browser’s context menu.
$(document).on(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}
return true;
});

function isRightClick(event) {
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
return rightclick;
}

$(“#jqxTree”).on(‘itemclick’, function (event) {
var id = event.args.id;
var custom;
var recursion = function (object) {
for (var i = 0; i < object.length; i++) {
if (id == object[i].id) {
custom = object[i].custom;
break;
} else if (object[i].items) {
recursion(object[i].items);
};
};
};
recursion(records);
$(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
});
}

function bindTreeExpand() {
$(‘#jqxTree-pages’).on(‘expand’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: true,
}
updateUserProfileOpenPage(obj);
});
}

function bindTreeCollapse() {
$(‘#jqxTree-pages’).on(‘collapse’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: false,
}
updateUserProfileOpenPage(obj);
});
}

function updateUserProfileOpenPage(obj) {
$.ajax({
url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
type: “post”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: JSON.stringify(obj),
async: false
});
}

Jean-Frédéric
Canam Group

[Author]

Posts