jQWidgets Forums

Tagged: grid, jqxgrid, popup vallidation, Theme

This topic contains 3 replies, has 2 voices, and was last updated by Keshavan 10 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Grid – popup vallidation not getting fired Posts

April 17, 2015 at 6:54 am Grid – popup vallidation not getting fired #69979

Keshavan

Participant

Hi,

Popup validation is not getting fired on clicking Save. Jqwidgets ver 3.7.1.

Please help with the issue.

Have pasted the code below.

Thanks,

Keshavan

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
In order to enter in edit mode, click any of the ‘Edit’ buttons. To save the changes, click the ‘Save’ button in the popup dialog. To cancel the changes
click the ‘Cancel’ button in the popup dialog.
</title>
<link rel=”stylesheet” href=”/Content/Site.css” type=”text/css” />
<link rel=”stylesheet” href=”/jqWidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css” type=”text/css” />
<script type=”text/javascript” src=”/JqWidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/JqWidgets/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxdropdownlist.js”></script>
<style>
input[type=text]:focus {
border-color: #0000ff;
border-width: 3px;
background-color: aliceblue;
}
</style>
<!–style>
body,html {
width: 80%;
height: 90%;
overflow: scroll ;
}
<style–>
<script type=”text/javascript”>
$(document).ready(function ()
{
var editrow = -1;
// create new row.
var datarow;
var theme = ‘ui-sunny’;
$(“#addrowbutton”).jqxButton({ width: ‘4.5%’, height: 30, theme: ‘ui-sunny’ });
$(“#deleterowbutton”).jqxButton({ width: ‘4.5%’, height: 30, theme: ‘ui-sunny’ });
$(“#Cancel”).jqxButton({ theme: ‘ui-sunny’, width: ‘22%’ });
$(“#Save”).jqxButton({ theme: ‘ui-sunny’, width: ‘22%’ });
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: ‘30%’, resizable: false, theme: ‘ui-sunny’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
var generaterow = function (id) {
var row = {};
row[“CategoryId”] = id;
row[“CategoryName”];
return row;
}
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘CategoryId’ },
{ name: ‘CategoryName’, type: ‘string’ }
],
id: ‘CategoryId’,
url: ‘/Category/GetCategories’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax
({
cache: false,
dataType: ‘json’,
url: ‘/Category/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
// $(‘#n1’).val(data.GroupCompanyId);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“err Occured ” + errorThrown);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘/Category/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
alert(“entry saved!”);
console.log(xhr.rowdata);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Fails … “);
commit(false);
}
}
);
}
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: ‘70%’,
height: ‘25%’,
source: dataAdapter,
theme: ‘ui-sunny’,
pageable: true,
sortable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
enabletooltips: true,

columns:
[
{
text: ‘Select’, width: ‘9%’, datafield: ‘select’, pinned: true, columntype: ‘button’, cellsrenderer: function () {
return “select”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 110, y: parseInt(offset.top) + (-65) } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#categoryId”).val(dataRecord.CategoryId);
$(“#categoryName”).val(dataRecord.CategoryName);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
{ text: ‘Category’, datafield: ‘CategoryName’, width: ‘90%’ },
]
});
$(“#addrowbutton”).bind(‘click’, function () {
var datainformation = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var rowscount = datainformation.rowscount;
editrow = rowscount + 1;
datarow = generaterow(rowscount + 1);
$(“#jqxgrid”).jqxGrid(‘addrow’, (rowscount + 1), generaterow(), ‘top’);
});

$(“#updaterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
$(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
}
});
// initialize the input fields.
$(“#categoryId”).jqxInput({ theme: ‘ui-sunny’ });
$(“#categoryName”).jqxInput({ theme: ‘ui-sunny’ });
$(“#categoryId”).width(‘10%’);
$(“#categoryId”).height(‘3%’);
$(“#categoryName”).width(‘200%’);
$(“#categoryName”).height(‘3%’);
$(“#popupWindow”).on(‘open’, function () {
$(“#categoryId”).jqxInput(‘selectAll’);
});
$(‘#Save’).bind(‘click’, function () {
$(‘#testForm’).jqxValidator(‘validate’);
});
// Validate
$(‘#testForm’).jqxValidator({
rules: [
{ input: ‘#categoryName’, message: ‘Category Name is required!’, action: ‘keyup’, rule: ‘required’ },
{ input: ‘#categoryName’, message: ‘Category Name must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ }
]
});
$(“#Cancel”).click(function () {
$(‘#testForm’).jqxValidator(‘hideHint’, ‘#çategoryName’);
});
$(“#Save”).click(function () {
var result = $(‘#testForm’).jqxValidator(‘validate’);
if (result == true) {
if (editrow >= 0) {
// alert(“dasda”);
var row =
{ CategoryId: $(“#categoryId”).val(), CategoryName: $(“#categoryName”).val() };
}
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

});
var menuNo = 2;
var lenth = 14;

for (var j = 1; j <= lenth; j++) {
if (j == menuNo) {
$((“#”) + (j)).css(“background-color”, “maroon”);
}
else
$((“#”) + (j)).css(“background-color”, “null”);
}
</script>
</head>
<body class=”default” >
<div>
<input id=”addrowbutton” type=”button” style=”margin-left:1 %;margin-top:1%” value=”INS” />
<input id=”deleterowbutton” type=”button” style=”margin-top: 1%;” value=”DEL” />
</div>
<div id=’jqxWidget’>
<div id=”jqxgrid” style=”margin-left:10%;margin-top:1%;”></div>
<br />
<div style=”margin-top: 1%;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 1%;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<form id=”testForm” action=”./”>
<table>
<tr>
<td style=”text-align:right”>Id:</td>
<td style=”text-align:left”>
<div id=”categoryId”> </div>
</td>
</tr>
<tr>
<td style=”text-align:right”>Category:</td>
<td style=”text-align:left”>
<input type=”text” id=”categoryName” class=”text-input” placeholder=”Category description/ name” autofocus required />
</td>
</tr>
<tr>
<td style=”text-align:right”></td>
<td style=”padding-top: 1%;text-align:right”>
<input style=”text-align: justify” type=”button” id=”Save” value=”Save” />
<input id=”Cancel” style=”text-align: justify” type=”button” value=”Cancel” />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>`

April 17, 2015 at 6:55 am Grid – popup vallidation not getting fired #69980

Keshavan

Participant

Hi,

Here is the formatted code.

Thanks,

Keshavan

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
        click the 'Cancel' button in the popup dialog.
    </title>
    <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <style>
        input[type=text]:focus {
            border-color: #0000ff;
            border-width: 3px;
            background-color: aliceblue;
        }
    </style>
    <!--style>        
        body,html {            
            width: 80%;            
            height: 90%;            
            overflow: scroll ;       
        }    
    <style-->
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var editrow = -1;
            // create new row.
            var datarow;
            var theme = 'ui-sunny';
            $("#addrowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' });
            $("#deleterowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' });
            $("#Cancel").jqxButton({ theme: 'ui-sunny', width: '22%' });
            $("#Save").jqxButton({ theme: 'ui-sunny', width: '22%' });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({
                width: '30%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            var generaterow = function (id) {
                var row = {};
                row["CategoryId"] = id;
                row["CategoryName"];
                return row;
            }
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'CategoryId' },
                    { name: 'CategoryName', type: 'string' }
                ],
                id: 'CategoryId',
                url: '/Category/GetCategories',
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    $.ajax
                        ({
                            cache: false,
                            dataType: 'json',
                            url: '/Category/Add',
                            data: rowdata,
                            type: "POST",
                            success: function (data, status, xhr) {
                                // insert command is executed.
                                commit(true);
                                //      $('#n1').val(data.GroupCompanyId);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert("err Occured  " + errorThrown);
                                commit(false);
                            }
                        });
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    {
                        $.ajax(
                                 {
                                     cache: false,
                                     dataType: 'json',
                                     url: '/Category/Update',
                                     data: rowdata,
                                     type: "POST",
                                     success: function (data, status, xhr) {
                                         alert("entry saved!");
                                         console.log(xhr.rowdata);
                                         commit(true);
                                     },
                                     error: function (jqXHR, textStatus, errorThrown) {
                                         alert("Fails ... ");
                                         commit(false);
                                     }
                                 }
                             );
                    }
                }  
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
           {
               width: '70%',
               height: '25%',
               source: dataAdapter,
               theme: 'ui-sunny',
               pageable: true,
               sortable: true,
               filterable: true,
               columnsresize: true,
               columnsreorder: true,
               enabletooltips: true,

               columns:
               [
               {
                   text: 'Select', width: '9%', datafield: 'select', pinned: true, columntype: 'button', cellsrenderer: function () {
                       return "select";
                   }, buttonclick: function (row) {
                       // open the popup window when the user clicks a button.
                       editrow = row;
                       var offset = $("#jqxgrid").offset();
                       $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 110, y: parseInt(offset.top) + (-65) } });
                       // get the clicked row's data and initialize the input fields.
                       var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                       $("#categoryId").val(dataRecord.CategoryId);
                       $("#categoryName").val(dataRecord.CategoryName);
                       // show the popup window.
                       $("#popupWindow").jqxWindow('open');
                   }
               },
                 { text: 'Category', datafield: 'CategoryName', width: '90%' },
               ]
           });
            $("#addrowbutton").bind('click', function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                editrow = rowscount + 1;
                datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), generaterow(), 'top');
            });

            $("#updaterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                }
            });
            // initialize the input fields.
            $("#categoryId").jqxInput({ theme: 'ui-sunny' });
            $("#categoryName").jqxInput({ theme: 'ui-sunny' });
            $("#categoryId").width('10%');
            $("#categoryId").height('3%');
            $("#categoryName").width('200%');
            $("#categoryName").height('3%');
            $("#popupWindow").on('open', function () {
                $("#categoryId").jqxInput('selectAll');
            });
            $('#Save').bind('click', function () {
                $('#testForm').jqxValidator('validate');
            });
            // Validate
            $('#testForm').jqxValidator({
                rules: [
                           { input: '#categoryName', message: 'Category Name is required!', action: 'keyup', rule: 'required' },
                           { input: '#categoryName', message: 'Category Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }
                ]
            });
            $("#Cancel").click(function () {
                $('#testForm').jqxValidator('hideHint', '#çategoryName');
            });
            $("#Save").click(function () {
                var result = $('#testForm').jqxValidator('validate');
                if (result == true) {
                    if (editrow >= 0) {
                        //   alert("dasda");
                        var row =
                             { CategoryId: $("#categoryId").val(), CategoryName: $("#categoryName").val() };
                    }
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });

        });
        var menuNo = 2;
        var lenth = 14;

        for (var j = 1; j <= lenth; j++) {
            if (j == menuNo) {
                $(("#") + (j)).css("background-color", "maroon");
            }
            else
                $(("#") + (j)).css("background-color", "null");
        }
    </script>
 </head>
<body class="default" >
    <div>
        <input id="addrowbutton" type="button" style="margin-left:1 %;margin-top:1%" value="INS" />
        <input id="deleterowbutton" type="button" style="margin-top: 1%;" value="DEL" />
    </div>
    <div id='jqxWidget'>
        <div id="jqxgrid"  style="margin-left:10%;margin-top:1%;"></div>
        <br />
        <div style="margin-top: 1%;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 1%;" id="cellendeditevent"></div>
        </div>
        <div id="popupWindow">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <form id="testForm" action="./">
                    <table>
                        <tr>
                            <td style="text-align:right">Id:</td>
                            <td style="text-align:left">
                                <div id="categoryId"> </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right">Category:</td>
                            <td style="text-align:left">
                                <input type="text" id="categoryName" class="text-input" placeholder="Category description/ name" autofocus required />
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right"></td>
                            <td style="padding-top: 1%;text-align:right">
                                <input style="text-align: justify" type="button" id="Save" value="Save" />
                                <input id="Cancel" style="text-align: justify" type="button" value="Cancel" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

April 17, 2015 at 9:51 am Grid – popup vallidation not getting fired #69990

Nadezhda

Participant

Hello Keshavan,

The following line <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script> is not supported in v3.7.1. Please, refer to API of jqxGrid to learn how to set ‘theme’ property: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm.

Do you have any errors with above example? If you have the following unhandled exception “jqxInput: Missing Text Input in the Input Group” you can look at http://www.jqwidgets.com/community/topic/jqxinput-missing-text-input-in-the-input-group/.

Best Regards,
Nadezhda

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

April 17, 2015 at 10:27 am Grid – popup vallidation not getting fired #69991

Keshavan

Participant

Hi Nadezhda,

Thanks for the Quick solution, Yes I had the “jqxInput: Missing Text Input in the Input Group” too.

The Issue is Solved with your help.

Thanks & Regards,
Keshavan

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.