[robrichardMember]

This is what I came up with for a temporary fix:

        if ($(window).width() < 1600) {
            $('#jqxMenu2').jqxMenu({rtl : true}); 
        }
        else {
            $('#jqxMenu2').jqxMenu({rtl : false}); 
        }

[robrichardMember]

Can you give an example of this? I don’t follow…

[robrichardMember]

In addition to the above, even if in the second case it works, but there are additional validation tooltips out of view, they will also show up floating “outside” of the window.

[robrichardMember]

COMPLETELY UNACCEPTABLE!!!

A user does not want to have their entire page taken up by a grid and scroll. This is a SEVERE oversight!

[robrichardMember]

I think we’re not on the same page with this question. Let’s say I have a grid with 100 records in it, but the page size is 25. Currently, when a grouping occurs manually on a page, it shows only 25 items inside of the group. I would like it to pull all 100 and then group them. How can this be done?

[robrichardMember]

Ugh – on a whim I decided to remove the first rule, and wouldn’t you know it, it works. The trick is to use ONLY the function. Ummm, why not just modify the validator code to accommodate this very common scenario instead of requiring the developers to jump through hoops?

[robrichardMember]

Is it for sure that this works? I implemented the same sort of code, and when I manually type something in the combobox, it says that it is still required. I tried this using both 2.8.3 and 2.9.3

Here are my rules:

{ input: '#Vendor', message: 'A vendor is required - please select or enter a vendor', action: 'keyup, blur', rule: 'required' },
{ input: '#Vendor', message: 'A vendor is required - please select or enter a vendor', action: 'select', rule: function(input){if($("#Vendor").jqxComboBox('val') == "") {alert("false"); return false;} else {alert("true"); return true};} }

Here is the combobox definition:

$("#Vendor").jqxComboBox({source: dataAdapter1, displayMember: "Vendor", valueMember: "Vendor", width: 200, height: 25, theme: 'orion', searchMode: 'containsignorecase', autoComplete: true });

And here is the html:

<div id="Vendor" class="text" />

[robrichardMember]

That’s not very practical, sorry. For those of you who stumble upon this, here is how I handle validating a US zip code entry.

1. Change the jqxMaskedInput to just a jqxInput.
2. In your validator, add a custom function to capture the values and validate it (I used a regex that checks for either a 5 digit zip code or the zip plus 4):

                   {
                       input: '#zipcode', message: 'A five digit zip code (11111) or five digit zip plus 4 (11111-1111) is for a zip code', action: 'keyup, blur', rule:
                           function (input) {
                               var zippattern = /^\d{5}([\-]?\d{4})?$/;
                               return (zippattern.test(input.val())==true);
                           }
                   },

[robrichardMember]

Where is setRegex in the documentation??? I wanted to set a zipcode mask to use either the US 5 digit zip code or the US zip plus 4, and setRegex seems like it would do the trick. Is there a way to apply it to the entire input element rather than to each character?

[robrichardMember]

I would also REALLY like to see this enhancement. It really is useless to bind to an index – the index of a selected value may change over time; the value itself will remain constant.

[robrichardMember]

I’m also curious if we can use jqxscrollbars for this instead of the native scroll bar.

[robrichardMember]

Well that response doesn’t inspire much confidence. It appears that setting the maxlength property of the underlying HTML input tag accomplishes this (appears to work in latest versions of chrome, firefox and IE).

So in your HTML:

<input id="MiddleInitial" name="MiddleInitial" class="text" type="text" maxlength="1" />

Then in your js:

$("#MiddleInitial").jqxInput({ width: '150px', height: '25px' });

[robrichardMember]

Still not working (not updating the grid with latest data)… Something happened between 2.6 and 2.8 (I am now using 2.8.3). Here is the code to build the grid:

// prepare the data
var gridsource = {
datatype: “json”,
datafields: [
{ name: ‘addressId’ },
{ name: ‘address1’ },
{ name: ‘city’ },
{ name: ‘state’ },
{ name: ‘zipcode’ },
{ name: ‘municipality’ },
{ name: ‘name’ },
{ name: ‘femaname’ },
{ name: ‘damage’ }
],
url: ‘@Url.Action(“IncidentAddresses”)’ + “?IncidentID=” + incidentID
};

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

var settings = {
width: $(“#jqxExpanderGrid”).width() – 4,
source: dataAdapter,
autoheight: true,
groupable: true,
autoshowloadelement: false,
showdefaultloadelement: false,
pageable: true,
pagesize: 25,
pagesizeoptions: [25, 50, 100, 200, 500],
sortable: true,
theme: ‘orion’,
columns: [
{ text: ”, datafield: ‘addressId’, width: 78,
cellsrenderer: function (row, colum, value) {
var cell = ‘View / Edit‘;
cell += ‘Delete‘;
cell += ‘Property Report‘;
return cell;
}
},
{ text: ‘Address 1’, datafield: ‘address1’, width: 200 },
{ text: ‘City’, datafield: ‘city’, width: 150 },
{ text: ‘Municipality’, datafield: ‘municipality’, width: 150 },
{ text: ‘State’, datafield: ‘state’, width: 50 },
{ text: ‘Zip’, datafield: ‘zipcode’, width: 80 },
{ text: ‘Structure Type’, datafield: ‘name’, width: 150},
{ text: ‘Damage Level’, datafield: ‘femaname’, width: 130 },
{ text: ‘Damage Values’, datafield: ‘damage’, width: 100, cellsformat: ‘c0’, cellsalign: ‘right’, align: ‘right’ }
],
autoshowfiltericon: true
};

$(“#jqxgrid”).jqxGrid(settings);

$(“#expand”).jqxButton({});
$(“#collapse”).jqxButton({});
$(“#expandall”).jqxButton({});
$(“#collapseall”).jqxButton({});

$(“#jqxgrid”).bind(“pagechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
if ($(“#events”).find(‘.logged’).length >= 5) {
$(“#events”).jqxPanel(‘clearcontent’);
}
var args = event.args;
var eventData = “pagechanged

Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “

“;
$(‘#events’).jqxPanel(‘prepend’, ‘

‘ + eventData + ‘

‘);
// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“

Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount);
});
$(“#jqxgrid”).bind(“pagesizechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
$(“#events”).jqxPanel(‘clearcontent’);
var args = event.args;
var eventData = “pagesizechanged

Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “, Old Page Size: ” + args.oldpagesize + “

“;
$(‘#events’).jqxPanel(‘prepend’, ‘

‘ + eventData + ‘

‘);
// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“

Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount);
});

// expand group.
$(“#expand”).bind(‘click’, function () {
var groupnum = parseInt($(“#groupnum”).val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘expandgroup’, groupnum);
}
});
// collapse group.
$(“#collapse”).bind(‘click’, function () {
var groupnum = parseInt($(“#groupnum”).val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘collapsegroup’, groupnum);
}
});
// expand all groups.
$(“#expandall”).bind(‘click’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});
// collapse all groups.
$(“#collapseall”).bind(‘click’, function () {
$(“#jqxgrid”).jqxGrid(‘collapseallgroups’);
});
// trigger expand and collapse events.
$(“#jqxgrid”).bind(‘groupexpand’, function (event) {
var args = event.args;
$(“#expandedgroup”).html(“Group: ” + args.group + “, Level: ” + args.level);
});
$(“#jqxgrid”).bind(‘groupcollapse’, function (event) {
var args = event.args;
$(“#collapsedgroup”).html(“Group: ” + args.group + “, Level: ” + args.level);
});

And then to “refresh” the grid, I use:

$(“#jqxGrid”).jqxGrid(‘updatebounddata’, ‘cells’);

It does nothing. The old data is still presented in the grid.

[robrichardMember]

Ah, got it… Wrap each section inside of the splitters with a blank DIV. That would have been a more appropriate error message…

[robrichardMember]

SkippingAdi:

What did you do to fix this issue???

[Author]

Posts