[DavidParticipant]

Peter,

I’m not sure you understand the issue. If a user does not set the width and height of the Masked Input control there should be NO DEFAULTS assigned to the DOM element. As shown in the code above, the Masked Input control is setting a default width and height property for the control when none is provided. These are rendering as inline styles. Default width and height should be removed and let to be controlled by the browser. I understand the current condition 100% and it may be by design to function that way but it causes incompatibility issues with frameworks that size certain controls via CSS, like Bootstrap.

Thanks

[DavidParticipant]

Dimitar,

I do not use PHP and I encoded my ASP.NET Web Service return as the instructions on the website said:

public static string ToJSON(DataTable MyTable)
{
    List<Dictionary<string, object>> JSON = new List<Dictionary<string, object>>();
    foreach (DataRow Row in MyTable.Rows)
    {
        Dictionary<string, object> JSONRow = new Dictionary<string, object>();
        foreach (DataColumn col in MyTable.Columns)
        {
            JSONRow[col.ColumnName] = Row[col];
        }
        JSON.Add(JSONRow);
    }
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(JSON);
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string GetProspectsJSON(
    int AuctionID
)
{
    DataTable Results = GetProspects(AuctionID);
    return Helper.ToJSON(Results);
}

[DavidParticipant]

Nadezhda,

I did use a custom one. This is a suggestion to improve the zipCode rule not a question. It would be nice if the rule would perform the proper zip code regex validation for both 5 and 9 digits without having to customize the rule.

[DavidParticipant]

Dimitar,

While I don’t understand the bug in the Grid which causes the above, I did find out how to fix the issue.

downloadComplete: function (data, textStatus, jqXHR) {
    return JSON.parse(data.d);
}

[DavidParticipant]

Dimitar,

I have confirmed that I am using version 3.7.1. The data posted above is from the data.d object in the downloadComplete event. There are no console errors when using IE11 Developer Tools.

Thanks

[DavidParticipant]

Nadezhda,

I know that I could do a 5-digit or 9-digit mask and validation. The issue I am reporting is that the zipCode rule, and as I also just found out, and the required rule do not function properly for the above example. When the rule is zipCode it needs to validate for BOTH a 5-digit or a 9-digit entry. These are considered valid zip codes and our users will need to be able to enter either. There is a proper RegEx method in JavaScript for handling this which I am using as a custom validation:

$(“#Zip”).jqxMaskedInput({ width: ‘100px’, mask: ‘#####-####’, promptChar: ” ” });

$(‘#myform).jqxValidator({
rules: [
{ input: ‘#Zip’, message: ‘Zip Code is Required’, rule: ‘required’ },
{
input: ‘#Zip’, message: ‘Invalid Zip Code Format (##### or #####-####)’, rule: function () {
var zipcode = /^\d{5}$|^\d{5}-$|^\d{5}-\d{4}$/;
var pattern = new RegExp(zipcode);
return pattern.test($(‘#Zip’).val());
}
}
]
});

In the above example the input is validated correctly for the format but the required validation is failing for some reason. I am guessing it is because I did not fill in all 9 values of the Masked Input control. If that is the case I will need to write a custom validation for required as well. I would suggest changing how the zipCode rule works to support 5-digit (#####), 5-digit of 9 (#####- ), or the full 9-digit (#####-####).

Thanks

[DavidParticipant]

Thanks!

[DavidParticipant]

Peter,

It may not be added in the bootstrap class but there is an inline style being added during the application of the Masked Input. Here is the setup. I created a standard text input.

<input type=”text” id=”test” />

I then used IE11 developer tools to confirm the rendered HTML matches the above code with no extra added code. I then applied a simple Masked Input command:

$(“#test”).jqxMaskedInput({ mask: ‘#####’, promptChar: ” ” });

Once the Masked Input is applied to the text field the rendered HTML looks like the following:

<input class=”jqx-input jqx-rc-all jqx-widget jqx-widget-content jqx-reset jqx-input-content” id=”test” role=”textbox” aria-disabled=”false” aria-readonly=”false” aria-valuenow=”” style=”width: 150px; height: 25px; text-align: left;” spellcheck=”false” aria-multiline=”false” type=”text” data-role=”input” autocomplete=”off” autocorrect=”off” autocapitalize=”off”>

The key is the inline style attribute added to the control. Even though I did not specify a width or height in my control or Masked Input properties there are default heights and widths being applied via CSS as well as text-align. This is the reason I override the height in my style with the !important flag. That is the only way I can override the inline style being applied to the control.

[DavidParticipant]

Peter,

You actually do define height as a CSS style. When the height property of the Masked Input control is applied it is set as an inline style. If I do not specify a height in the Masked Input control it is automatically inserting a height: 25px style. I would suggest removing this default control height style and you won’t need it in the primary bootstrap css. Also, here is an updated version to not mess with the input fields on other controls, like the pager in the jqxGrid:

.form-control.jqx-input
{
color: rgb(85, 85, 85);
font-size: 14px;
height: 20px !important;
line-height: 19.99px;
margin: 0px;
padding: 6px 12px !important;
}

[DavidParticipant]

To those who want to correct the difference I have an application.css file which is always loaded last in my solution. I added the following to that css file:

input[type=text].jqx-input,
input[type=password].jqx-input,
.jqx-input
{
color: rgb(85, 85, 85);
font-size: 14px;
height: 20px !important;
line-height: 19.99px;
margin: 0px;
padding: 6px 12px;
}

[Author]

Posts