jQWidgets Forums

Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 22, 2019 at 7:24 am in reply to: CRUD Operations CRUD Operations #103598

    kiran.kesarkar
    Participant

    Hello Martin,
    Thank you for your suggestion. This will certainly improve the code.
    With this example, Is it possible to get a model javascript object from the grid when I edit or add the record using popup?

    I will be grateful if you could share me an example for CRUD with a bootstrap popup for add/edit records which will work for touch, mobile and web?

    Thanks,

    Kiran

    January 18, 2019 at 10:58 am in reply to: CRUD Operations CRUD Operations #103566

    kiran.kesarkar
    Participant

    Hello Martin,

    For CRUD operations with Grid, we have “AddNew” button for new record and “Edit” button for every row in a grid. In both conditions, we open the popup and allow to save. As I am new to JQXGrid, please review my code below and let me know your suggestions. Is there any other better way to do the CRUD operations using JQXGrid?

    Thanks,
    Kiran

    <!DOCTYPE html>

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head id=”Head1″ runat=”server”>
    <title id=’Description’>Ascent API CRUD</title>
    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” />
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript” src=”jqwidgets/sampledata/generatedata.js”></script>
    <script type=”text/javascript” src=”CommonService.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>

    <script type=”text/javascript”>
    var gridDataAdapter;
    var baseURL = ‘xxx’;
    var accessToken = ‘Bearer S68U4V1tb6gLpMJFz3eeqsNcua7ZrGcX59YyJT9rbE8iIqNMvN0gF3nleYIMe_-Z6g56U7P58vEjfnT7PKtM1y6K_ocUk5uxd_1JxRaBB_oUeOdnxQOAIRHXfUzWBaZbSchKQoxBgp4drNQ9E0vvmxiRQg5GeabZCPSFMZvstUORdWktYfV1fwbXhudH1Qr-84j04I9wFymQnWI9iuDsYP57piStxSkm-Rm4vmqfWaaaKpJ9U3DpXbfaM315gv-gPXZ3H3trp_qyYHyU8dvVGJHC8DSe6_37mJ1eTYMZDVpq6I_c-WkKeMHJpdj0OfdIrs-zI8AqvjaPX4A0m6f-FN_VMu4AddNK8tp3icOKGAKXFDCDtciHFeG0-AhmP5e3’;

    $(document).ready(function () {
    var rules=[];

    $(‘#TestForm’).jqxValidator({
    hintType: “label”,
    rules: [
    { input: ‘#hotelclassname’, message: ‘The hotel class name is required!’, action: ‘keyup’, rule: ‘required’ },
    ]
    });

    //initialize grid
    $(“#grid”).jqxGrid(
    {
    width: getWidth(‘Grid’),
    //source: gridDataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    columns: [
    { text: ‘ID’, datafield: ‘HotelClassID’, cellsalign: ‘right’, align: ‘right’, width: 100 },
    { text: ‘Name’, datafield: ‘Name’, align: ‘left’, cellsalign: ‘left’ },
    { text: ‘Active’, datafield: ‘IsActive’, cellsalign: ‘left’, width: 100 },
    {
    text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: 75, cellsrenderer: function () {
    return “Edit”;
    }, buttonclick: function (row) {
    // open the popup window
    editrow = row;
    var offset = $(“#grid”).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 = $(“#grid”).jqxGrid(‘getrowdata’, editrow);
    $(“#hotelclassid”).val(dataRecord.HotelClassID);
    $(“#hotelclassname”).val(dataRecord.Name);
    //$(“#active”).prop(‘checked’, true);
    $(“#active”).jqxCheckBox({ checked: dataRecord.IsActive });

    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    }
    }
    ]
    });

    //Bind data to grid
    GridFetchData();

    //update the edited row when the user clicks the ‘Save’ button.
    $(“#Save”).click(function () {
    var obj = $(‘#TestForm’).jqxValidator(‘validate’);
    if(obj==false) {return false;}

    var thisrow = {
    HotelClassID: $(“#hotelclassid”).val(),
    Name: $(“#hotelclassname”).val(),
    IsActive: $(“#active”).jqxCheckBox(‘checked’)
    };

    if (editrow >= 0) {
    var rowID = $(‘#grid’).jqxGrid(‘getrowid’, editrow);
    $(‘#grid’).jqxGrid(‘updaterow’, rowID, thisrow );
    $(“#popupWindow”).jqxWindow(‘hide’);
    }
    else {
    $.ajax({
    type: “POST”,
    url: baseURL + ‘HotelClass’,
    headers: { “Authorization”: accessToken },
    data: thisrow,
    success: function (response) {
    $(“#popupWindow”).jqxWindow(‘hide’);
    row = response;
    var commit = $(“#grid”).jqxGrid(‘addrow’, null, thisrow);
    alert(“Record added successfully”);
    },
    failure: function (response) {
    alert(response.responseText);
    },
    error: function (jqXHR) {
    var errors = jqXHR.responseJSON.ModelState;
    for (var key in errors) {
    var element = $(‘[data-bind=’ + key + ‘]’);
    if (element)
    {
    var txt = ‘#’ + element.attr(‘id’);
    var div = ‘#’ + element.parent().attr(‘id’);
    var msg = errors[key];
    $(txt).addClass(‘is-invalid’); // add the error class to show red input
    $(div).append(‘<div class=”invalid-feedback”>’ + msg + ‘</div>’); // add the actual error message under our input
    }
    }
    }
    });
    }
    });

    //add button click : adding new record
    $(‘#Add’).click(function () {
    editrow = -1;
    // open the popup window when the user clicks a button.
    var offset = $(“#grid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    $(“#hotelclassid”).val(‘New’);
    $(“#hotelclassname”).val(”);
    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    });

    function GridFetchData()
    {
    $.ajax({
    type: “GET”,
    headers: { “Authorization”: accessToken },
    url: baseURL + ‘HotelClass’,
    success: function (response) {
    var gridData = response;
    var gridSource =
    {
    localdata: gridData,
    datatype: ‘json’,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    // and with parameter false if the synchronization failder.
    var id = rowid;
    $.ajax({
    type: “PUT”,
    headers: { “Authorization”: accessToken },
    url: baseURL + ‘HotelClass/’ + rowdata.HotelClassID,
    data: rowdata,
    success: function (response) {
    commit(true);
    alert(“Record updated successfully”);
    },
    failure: function (response) {
    commit(false);
    alert(response.responseText);
    },
    error: function (response) {
    commit(false);
    alert(response);
    }
    });
    }
    };
    gridDataAdapter = new $.jqx.dataAdapter(gridSource);
    $(“#grid”).jqxGrid(‘source’, gridDataAdapter);
    },
    error: function (json, textStatus, errorThrown) {
    alert(‘ Error :’ + errorThrown);
    }
    });
    }
    });

    </script>
    </head>

    <body class=’default’>
    <input id=”Add” type=”button” value=”Add New” />
    <br />
    <br />
    <div id=”grid”></div>

    <div id=”popupWindow” class=”container”>
    <div>Edit</div>
    <form id=”TestForm” action=”./”>
    <div id=”div1″ class=”form-group”>
    <label for=”txtName”>Hotel Class ID</label>
    <input type=”text” class=”form-control” id=”hotelclassid” placeholder=”Enter Name” data-bind=”HotelClassID” />
    <!– errors will go here –>
    </div>

    <div id=”divName” class=”form-group”>
    <label for=”txtName”>Hotel Class Name</label>
    <input type=”text” class=”form-control” id=”hotelclassname” placeholder=”Enter Name” data-bind=”Name” />
    <!– errors will go here –>
    </div>

    <div id=”divIsActive” class=”form-group”>
    <label for=”rdoIsActiveYes”>Active</label>
    <input type=”checkbox” class=”form-control” id=”active” value=”0″ data-bind=”IsActive” />
    </div>
    <button type=”button” class=”btn btn-success” id=”Save”>Submit <span class=”fa fa-arrow-right”></span></button>
    <button type=”button” class=”btn btn-danger” id=”Cancel”>Cancel <span class=”fa fa-arrow-right”></span></button>
    </form>
    </div>
    </body>
    </html>
    `

    January 9, 2019 at 8:36 am in reply to: CRUD Operations CRUD Operations #103444

    kiran.kesarkar
    Participant

    I appreciate your help, Martin.

    How do you suggest the approach for below?
    For any CRUD operation, we provide popup for adding records, inline edit for the update. Remove/Delete for the row. It would be great if you could provide us with the real-time CRUD Operations.

    Thanks,

    Kiran

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)