jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 46 through 60 (of 82 total)

← 1 … 3 4 5 6 →

Author

Posts
June 3, 2013 at 3:26 am in reply to: Master-Detail Grid – Filter not working. Master-Detail Grid – Filter not working. #22382

Keshavan
Participant

Hi Peter,

Thanks for the quick response, will go through the sample code you have sent and complete it.

Thanks,

Keshavan

April 19, 2013 at 10:51 am in reply to: Grid – cell rendering Grid – cell rendering #19633

Keshavan
Participant

Hi Peter,

Will the support be on the same lines, once i become a licensed user ?

Thanks,

Keshavan

April 19, 2013 at 10:07 am in reply to: Grid – cell rendering Grid – cell rendering #19619

Keshavan
Participant

Hi Peter,

I am struck for over a week now, need some solution for my problem above.

Thanks,

Keshavan

April 19, 2013 at 9:00 am in reply to: Grid – cell rendering Grid – cell rendering #19609

Keshavan
Participant

Hi Peter,

Hi,

1) I have implemented ‘Timestamp’ column in grid.

2) I have with out any issues completed the corresponding server side code.

Issue.

1) When ‘addrow’ is invoked, the value for the said column gets generated properly in SQL server table by the Db.

2) When i press ‘F5’ explicitly, the value appears in Grid.

3) I need to bring that value in to the Timestamp column of grid , each time update is called. ( without using F5).

Thanks,

Keshavan

April 12, 2013 at 11:06 am in reply to: Grid – Initialize 'TimeStamp' Column Grid – Initialize 'TimeStamp' Column #19114

Keshavan
Participant

Hi all,

I have an Urgent requirement and am struck,

Let me know how to define Byte array in Grid, as i have a byte[] column in my C# class which corresponds to ‘rowversion’ Column type
in the SQL server Table, to check Concurrency issues.

Thanks,

Keshavan

April 12, 2013 at 5:59 am in reply to: Grid – Initialize 'TimeStamp' Column Grid – Initialize 'TimeStamp' Column #19100

Keshavan
Participant

Hi Peter,

Further to my earlier post ,

1) in my C# class, it’s a property defined as datatype Byte[], column name : Timestamp
2) the corresponding column type on SQL server , table is defined as ‘timestamp’, it will show the data as binary,

How to initialize a TimeSTamp column (with some value) for the grid on client side , i have the line in Bold Below,

var generaterow = function (id) {
var row = {};
row[“GroupCompanyId”] = id;
row[“GroupName”] = ” “;
row[“Miscellaneous1”] = ” “;
row[“Culture”] = ” “;
row[“TimeStamp;
return row;

I have a TimeSTamp column as per Json structure below.

var source =
{
datatype: “json”,
datafields: [
{ name: ‘GroupCompanyId’ },
{ name: ‘GroupName’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Culture’ },
{ name: ‘TimeStamp’ }
],
id: ‘GroupCompanyId’,
url: ‘GroupCompany/GetGroupCompanies’,

Thanks,

Keshavan

April 10, 2013 at 10:12 am in reply to: Grid – Popupedit – Update issue Grid – Popupedit – Update issue #18989

Keshavan
Participant

Hi Peter,

Please let me know how to show ‘server’ errors on client.

I corrected the code accordingly, but the sample code u gave results in ‘System.Data.Entity.Infrastructure.DbUpdateConcurrencyException’ on the server.

Mine is .net integration.

Thanks,

Keshavan

April 9, 2013 at 2:42 pm in reply to: Grid – Issue using popupedit Grid – Issue using popupedit #18906
Keshavan
Participant
Hi Dimitar,

I have pasted the code upon formatting accordingly,

Thanks,

Keshavan

<ht
```
ml>
<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="/JqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/Scripts/gettheme.js"></script>
    <script type="text/javascript" src="/JqWidgets/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.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.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.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.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.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/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare sample data.
            var data = {};
            var generaterow = function (id) {
                var row = {};
                row["GroupCompanyId"] = id;
                row["GroupName"] = " ";
                row["Miscellaneous1"] = " ";
                row["Culture"] = " ";
                return row;
            }
            var source =
            {
                datatype: "json",
                datafields: [
                        { name: 'GroupCompanyId' },
                        { name: 'GroupName' },
                        { name: 'Miscellaneous1' },
                        { name: 'Culture' },
                        ],
                id: 'GroupCompanyId',
                url: 'GroupCompany/GetGroupCompanies',
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: 'GroupCompany/Add',
                        data: rowdata,
                        type: "POST",
                        success: function (data, status, xhr) {
                            // insert command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    $.ajax({
                        dataType: 'json',
                        cache: false,
                        url: '/GroupCompany/Delete/5',
                        type: "POST",
                        success: function (data, status, xhr) {
                            // delete command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(jqXHR.statusText);
                            commit(false);
                        }
                    });
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    {
                        $.ajax(
                                 {
                                     cache: false,
                                     dataType: 'json',
                                     url: 'GroupCompany/Update',
                                     data: rowdata,
                                     type: "POST",
                                     success: function (data, status, xhr) {
                                         // update command is executed.
                                         alert(success);
                                         commit(true);
                                     },
                                     error: function (jqXHR, textStatus, errorThrown) {
                                         alert(errorThrown);
                                         commit(false);
                                     }
                                 }
                             );
                    }
                }
            };
            // initialize the input fields.
            $("#GroupName").addClass('jqx-input');
            $("#Miscellaneous1").addClass('jqx-input');
            $("#Culture").addClass('jqx-input');
            $("#GroupName").width(375);
            $("#GroupName").height(23);
            $("#Miscellaneous1").width(375);
            $("#Miscellaneous1").height(23);
            $("#Culture").width(50);
            $("#Culture").height(23);
            if (theme.length > 0) {
                $("#GroupName").addClass('jqx-input-' + theme);
                $("#Miscellaneous1").addClass('jqx-input-' + theme);
                $("#Culture").addClass('jqx-input-' + theme);
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid<a href="../../JqWidgets/index.htm">../../JqWidgets/index.htm</a>
            $("#jqxgrid").jqxGrid(
            {
                width: 950,
                height: 350,
                source: dataAdapter,
                sortable: true,
                theme: 'ui-smoothness',
                selectionmode: 'singlecell',
                pageable: true,
                editable: true,
                rowdetails: true,
                filterable: true,
                columnsresize: true,
                columnsreorder: true,
                groupable: true,
                rowsheight: 20,
                altrows: true,
                columns: [
                { text: 'Group', datafield: 'GroupName', width: 400 },
                { text: 'Other Info ', datafield: 'Miscellaneous1', width: 400 },
                { text: 'Culture', datafield: 'Culture', width: 120 }
                ]
            });
            $("#jqxgrid").bind('cellselect', function (event) {
                // open the popup window when the user clicks a button.
                editrow = event.args.rowindex;
                alert("editrow  " + editrow);
                var offset = $("#jqxgrid").offset();
                $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                // get the clicked row's data and initialize the input fields.
                var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                alert(dataRecord.GroupName);
                alert(dataRecord.Miscellaneous1);
                alert(dataRecord.Culture);
                $("#GroupName").val(dataRecord.GroupName);
                $("#Miscellaneous1").val(dataRecord.Miscellaneous1);
                $("#Culture").val(dataRecord.Culture);
                // show the popup window.
                $("#popupWindow").jqxWindow('show');
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 480, resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false,
                cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                alert("Save  " + editrow);
                if (editrow >= 0) {
                    var row = { GroupName: $("#GroupName").val(), Miscellaneous1: $("#Miscellaneous1").val(), Culture: $("#Culture").val() }
                };
                alert(row.GroupName);
                alert(row.Miscellaneous1);
                alert(row.Culture);
                var id = $("#jqxgrid").jqxGrid('getrowid', editrow);
                $('#jqxgrid').jqxGrid('updaterow', id, row);
                $("#popupWindow").jqxWindow('hide');
            });
            $("#addrowbutton").jqxButton();
            $("#deleterowbutton").jqxButton();
            $("#updaterowbutton").jqxButton();
            // update row.
            $("#updaterowbutton").bind('click', function () {
                /*var datarow s generaterow(); */
                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);
                }
            });
            // create new row.
            $("#addrowbutton").bind('click', function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                editrow = rowscount + 1;
                var datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', rowscount + 1, generaterow(), 'top');
            });
            //new code ends
            // delete row.
            $("#deleterowbutton").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('deleterow', id);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div style="margin-left: 5px;">
        <div>
            <input id="addrowbutton" type="button" value=" (+) record" />
            <input id="deleterowbutton" type="button" style="margin-top: 10px;" value=" (-) record" />
            <input id="updaterowbutton" type="button" style="margin-top: 10px;" value=" Edit/Save" />
        </div>
    </div>
    <br />
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">
                            Group:
                        </td>
                        <td align="left">
                            <input id="GroupName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Other Info:
                        </td>
                        <td align="left">
                            <input id="Miscellaneous1" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Culture:
                        </td>
                        <td align="left">
                            <input id="Culture" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                type="button" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
```
April 9, 2013 at 9:56 am in reply to: Grid – Issue using popupedit Grid – Issue using popupedit #18867

Keshavan
Participant

Hi,

Finally, pasted the left out code.

Thanks,

Keshavan

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 9:52 am in reply to: Grid – Issue using popupedit Grid – Issue using popupedit #18865

Keshavan
Participant

Hi,

I have pasted the display part of popup below, because of file size limit in editor, i could not paste the entire code.

Thanks,

Keshavan

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 9:44 am in reply to: Grid – Issue using popupedit Grid – Issue using popupedit #18864

Keshavan
Participant

Hi,

here is the full code,

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.

$(document).ready(function () {
var theme = getDemoTheme();
// prepare sample data.
var data = {};
var generaterow = function (id) {
var row = {};
row[“GroupCompanyId”] = id;
row[“GroupName”] = ” “;
row[“Miscellaneous1″] = ” “;
row[“Culture”] = ” “;
return row;
}
var source =
{
datatype: “json”,
datafields: [
{ name: ‘GroupCompanyId’ },
{ name: ‘GroupName’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Culture’ },
],
id: ‘GroupCompanyId’,
url: ‘GroupCompany/GetGroupCompanies’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘GroupCompany/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/GroupCompany/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘GroupCompany/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};

// initialize the input fields.
$(“#GroupName”).jqxInput({ theme: theme });
$(“#Miscellaneous1”).jqxInput({ theme: theme });
$(“#culture”).jqxInput({ theme: theme });
$(“#GroupName”).width(375);
$(“#GroupName”).height(23);
$(“#Miscellaneous1”).width(375);
$(“#Miscellaneous1”).height(23);
$(“#culture”).width(20);
$(“#culture”).height(23);
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid../../JqWidgets/index.htm
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: source,
sortable: true,
theme: ‘ui-smoothness’,
pageable: true,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
rowsheight: 20,
altrows: true,
columns: [
{ text: ‘Group’, datafield: ‘GroupName’, width: 375 },
{ text: ‘Other Info ‘, datafield: ‘Miscellaneous1’, width: 350 },
{ text: ‘Culture’, datafield: ‘Culture’, width: 120 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, wdth: 70, cellsrenderer: function () {
return “Edit”;
}, 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) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#GroupName”).val(dataRecord.GroupName);
$(“#Miscellaneous1”).val(dataRecord.Miscellaneous1);
$(“#Culture”).val(dataRecord.Culture);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
]
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 480, resizable: false, theme: ‘ui-lightness’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var rowdata = { GroupName: $(“#GroupName”).val(), Miscellaneous1: $(“#Miscellaneous1”).val(), Culture: $(“#Culture”).val()
};
alert($(“#GroupName”).val());
alert($(“#Miscellaneous1”).val());
alert($(“#Culture”).val());
var rowid = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, rowdata);
$(“#popupWindow”).jqxWindow(‘hide’);

}
});

$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.
$(“#updaterowbutton”).bind(‘click’, function () {
/*var datarow s generaterow(); */
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

Edit

Group:

Other Info:

Culture:

April 5, 2013 at 6:04 am in reply to: checkbox column checkbox column #18642

Keshavan
Participant

Hi,

I have checkbox in my grid and responds with out any delay, see my pasted code below if it helps,

{ text: ‘Select’, datafield: ‘Active?’, columntype: ‘checkbox’, width: 50,
// select or unselect rows when the checkbox is checked or unchecked.
cellendedit: function (event)
{
if (event.args.value)
{
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else
{
$(“#jqxgrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
}
},

Thanks,

Keshavan

April 3, 2013 at 8:58 am in reply to: Grid- Dropdownlist issue Grid- Dropdownlist issue #18487

Keshavan
Participant

Hi Peter,

I upgraded to latest version (2.8) and followed your sample code, Issue still persists .

I have pasted my full code, request you to have a look in to pasted code .

Thanks,

Keshavan

This example shows CRUD with Db

$(document).ready(function () {
// prepare data from external Company entity
var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘CompanyName’ }
],
id: ‘CompanyId’,
url: ‘Company/GetPartCompanies’,
async: false
};
var dataAdapater1 = new $.jqx.dataAdapter(source1, { autoBind: true });
// prepare data from external Department entity
var source2 =
{
datatype: “json”,
datafields:
[
{ name: ‘DepartmentId’ },
{ name: ‘DepartmentName’ }
],
id: ‘DepartmentId’,
url: ‘Department/GetPartDepartments’,
async: false
};
var dataAdapater2 = new $.jqx.dataAdapter(source2, { autoBind: true });
var data = {};
var depId = -1;
var compId = 1;
// source for main grid
var generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“CompanyId”] = 1;
row[“DepartmentId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
};
var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records, value: ‘CompanyId’, name: ‘CompanyName’} },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records,
value: ‘DepartmentId’,name:’DepartmentName’ }},
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.

commit(true);
alert(“Commit done …… “);
alert(rowdata.MemberEmployeeId);
alert(rowdata.DepartmentId);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/MemberEmployee/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
/* if (depId != undefined && depId != -1) {
rowdata.Department = depId;
depId = -1;
}*/
/* if (compId != undefined && compId != -1) {
rowdata.CompanyId = compId;
compId = -1;
}*/
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};
var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid
({
width: 945,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable:true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘CompanyName’, valueMember: ‘CompanyId’, source: dataAdapater1 })
}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, displayfield:’DepartmentName’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor)
{
editor.jqxDropDownList({ displayMember: ‘DepartmentName’, valueMember: ‘DepartmentId’, source: dataAdapater2 })
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});

})

April 2, 2013 at 4:17 pm in reply to: Grid- Dropdownlist issue Grid- Dropdownlist issue #18436

Keshavan
Participant

Hi,

Please find the complete code below,

the version -jQWidgets v2.7.0 Release, Feb-08-2013

Thanks,

Keshavan

This example shows CRUD with Db

$(document).ready(function () {
// prepare data from external Company entity
var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘CompanyName’ }
],
id: ‘CompanyId’,
url: ‘Company/GetPartCompanies’,
async: false
};
var dataAdapater1 = new $.jqx.dataAdapter(source1, { autoBind: true });
// prepare data from external Department entity
var source2 =
{
datatype: “json”,
datafields:
[
{ name: ‘DepartmentId’ },
{ name: ‘DepartmentName’ }
],
id: ‘DepartmentId’,
url: ‘Department/GetPartDepartments’,
async: false
};
var dataAdapater2 = new $.jqx.dataAdapter(source2, { autoBind: true });
var data = {};
var depId = -1;
var compId = 1;
// source for main grid
var generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“CompanyId”] = 1;
row[“DepartmentId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
};
var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records, value: ‘CompanyId’, name: ‘CompanyName’} },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records, value: ‘DepartmentId’,
name: ‘DepartmentName’
}
},
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.

commit(true);
alert(“Commit done …… “);
alert(rowdata.MemberEmployeeId);
alert(rowdata.DepartmentId);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/MemberEmployee/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
/* if (depId != undefined && depId != -1) {
rowdata.Department = depId;
depId = -1;
}*/
/* if (compId != undefined && compId != -1) {
rowdata.CompanyId = compId;
compId = -1;
}*/
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};
var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid
({
width: 945,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable:true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘CompanyName’, valueMember: ‘CompanyId’, source: dataAdapater1 })
}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘DepartmentName’, valueMember: ‘DepartmentId’, source: dataAdapater2 })
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});

$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});

})

April 2, 2013 at 3:25 pm in reply to: Accessing jqxgrid data in controller Accessing jqxgrid data in controller #18431

Keshavan
Participant

Hi,

may be of some help, use an array of rowid and rowdata to update more than 1 row, seems there is some help w.r.t this in API.

Thanks,

Keshavan
Author

Posts

Viewing 15 posts - 46 through 60 (of 82 total)

← 1 … 3 4 5 6 →