jQWidgets Forums

jQuery UI Widgets Forums DataTable hiperlink at renderer and checkbox at editor in datatable

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 10 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • Chaitanya
    Participant

    I want html component at editor. Hyperlink on rendrer.
    i have read datatable cannot support checkbox. i dont want checkbox when component render. when click on edit button, checkbox at status.
    if it is not possible then please help me to create grid with this example. i wand command button in grid line and add button at top of the grid.
    <script type=”text/javascript”>
    var that = this;
    $(document).ready(function () {
    var departmentList = ‘${departmentList}’;
    var departmentList =
    {
    dataFields: [
    { name: ‘departmentId’, type: ‘int’ },
    { name: ‘departmentName’, type: ‘string’ },
    { name: ‘status’, type: ‘bool’ }
    ],
    localData: departmentList,
    dataType: “json”,
    addRow: function (rowID, rowData, position, commit) {
    // synchronize with the server – send insert command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
    commit(true);
    },
    updateRow: function (rowID, rowData, commit) {
    alert(“rowID”+rowID)
    var jsonToBeSend=new Object();
    //”{\”departmentId\”:”+rowData.departmentId+”,\”departmentName\”:\””+rowData.departmentName+”\”,\”createdBy\”:1,\”modifiedBy\”:1,\”status\”:”+rowData.status+”}”;
    if (rowData.departmentId != “” || rowData.departmentId != null){
    jsonToBeSend[“departmentId”] = rowData.departmentId;
    }
    jsonToBeSend[“departmentName”] = rowData.departmentName;
    jsonToBeSend[“createdBy”] = 1;
    jsonToBeSend[“modifiedBy”] = 1;
    jsonToBeSend[“status”] = rowData.status;

    $.ajax({
    url: “/BusinessReimbursment/addDepartment”,
    type: ‘POST’,
    dataType: ‘json’,
    data: JSON.stringify(jsonToBeSend),
    async: false,
    beforeSend: function(xhr) {
    xhr.setRequestHeader(“Accept”, “application/json”);
    xhr.setRequestHeader(“Content-Type”, “application/json”);
    },
    success: function(data) {
    $(“#dataTable”).jqxDataTable(‘setCellValue’, rowID, ‘departmentId’,’20’);
    commit(true);
    },
    error:function(data) {
    // alert(“error: “+data);
    commit(false);
    }
    });
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.

    },
    deleteRow: function (rowID, commit) {
    // synchronize with the server – send delete command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    commit(true);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(departmentList, {
    loadComplete: function () {
    // data is loaded.
    }
    });
    this.editrow = -1;

    $(“#dataTable”).jqxDataTable(
    {
    width: 850,
    source: dataAdapter,
    pageable: true,
    sortable: true,
    altRows: true,
    editable: true,
    showToolbar: true,
    editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
    // called when jqxDataTable is going to be rendered.
    rendering: function()
    {
    // destroys all buttons.
    if ($(“.editButtons”).length > 0) {
    $(“.editButtons”).jqxButton(‘destroy’);
    }
    if ($(“.cancelButtons”).length > 0) {
    $(“.cancelButtons”).jqxButton(‘destroy’);
    }
    },

    renderToolbar: function(toolBar)
    {
    var toTheme = function (className) {
    if (theme == “”) return className;
    return className + ” ” + className + “-” + theme;
    }
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
    var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
    var addButton = $(buttonTemplate);
    var cancelButton = $(buttonTemplate);
    var updateButton = $(buttonTemplate);
    container.append(addButton);
    container.append(cancelButton);
    container.append(updateButton);
    toolBar.append(container);
    addButton.jqxButton({cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
    addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
    addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
    updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
    updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
    cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
    cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
    var updateButtons = function (action) {
    switch (action) {
    case “Select”:
    addButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Unselect”:
    addButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Edit”:
    addButton.jqxButton({ disabled: true });
    cancelButton.jqxButton({ disabled: false });
    updateButton.jqxButton({ disabled: false });
    break;
    case “End Edit”:
    addButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    }
    }
    var rowIndex = null;
    $(“#dataTable”).on(‘rowSelect’, function (event) {
    var args = event.args;
    rowIndex = args.index;
    updateButtons(‘Select’);
    });
    $(“#dataTable”).on(‘rowUnselect’, function (event) {
    updateButtons(‘Unselect’);
    });
    $(“#dataTable”).on(‘rowEndEdit’, function (event) {
    updateButtons(‘End Edit’);
    });
    $(“#dataTable”).on(‘rowBeginEdit’, function (event) {
    updateButtons(‘Edit’);
    });
    addButton.click(function (event) {
    if (!addButton.jqxButton(‘disabled’)) {
    // add new empty row.
    $(“#dataTable”).jqxDataTable(‘addRow’, null, {}, ‘first’);
    // select the first row and clear the selection.
    $(“#dataTable”).jqxDataTable(‘clearSelection’);
    $(“#dataTable”).jqxDataTable(‘selectRow’, 0);
    // edit the new row.
    $(“#dataTable”).jqxDataTable(‘beginRowEdit’, 0);
    updateButtons(‘add’);
    }
    });
    cancelButton.click(function (event) {
    if (!cancelButton.jqxButton(‘disabled’)) {
    // cancel changes.
    var value = $(“#dataTable”).jqxDataTable(‘getCellValue’, rowIndex, ‘departmentId’);
    if(value==null){
    $(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
    }
    $(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, true);
    }
    });
    updateButton.click(function (event) {
    if (!updateButton.jqxButton(‘disabled’)) {
    // save changes.

    $(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, false);
    }
    });
    },
    // called when jqxDataTable is rendered.
    rendered: function () {
    if ($(“.editButtons”).length > 0) {
    $(“.cancelButtons”).jqxButton();
    $(“.editButtons”).jqxButton();

    var editClick = function (event) {
    var target = $(event.target);
    // get button’s value.
    var value = target.val();
    // get clicked row.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }
    if (value == “Edit”) {
    // begin edit.
    $(“#dataTable”).jqxDataTable(‘beginRowEdit’, rowIndex);
    target.parent().find(‘.cancelButtons’).show();
    target.val(“Save”);
    }
    else {

    // end edit and save changes.
    target.parent().find(‘.cancelButtons’).hide();
    target.val(“Edit”);
    $(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex);
    }
    }
    $(“.editButtons”).on(‘click’, function (event) {
    editClick(event);
    });

    $(“.cancelButtons”).click(function (event) {
    // end edit and cancel changes.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }
    var value = $(“#dataTable”).jqxDataTable(‘getCellValue’, rowIndex, ‘departmentId’);
    if(value==null){
    $(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
    }
    $(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, true);
    });
    }
    },
    pagerButtonsCount: 8,
    columns: [
    { text: ‘Department ID’, editable: false, dataField: ‘departmentId’, width: 200 },
    { text: ‘Department Name’, dataField: ‘departmentName’, width: 200,
    validation: function (cell, value) {
    if (value==””) {
    return { result: false, message: “Department can not empty.” };
    }else
    return true;
    }
    },
    { text: ‘Status’, dataField: ‘status’, width: 170,
    createEditor: function (row, cellvalue, editor, cellText, width, height) {
    var inputElement = $(“<input style=’padding-left: 4px; border: none;’/>”).appendTo(editor);
    inputElement.jqxInput({ source: getEditorDataAdapter(‘status’), displayMember: “status”, width: width, height: height });
    },
    initEditor: function (row, cellvalue, editor, celltext, width, height) {
    // set the editor’s current value. The callback is called each time the editor is displayed.
    var inputField = editor.find(‘input’);
    inputField.val(cellvalue);
    },
    getEditorValue: function (row, cellvalue, editor) {
    // return the editor’s value.
    return editor.find(‘input’).val();
    }
    },
    {
    text: ‘Edit’, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    // render custom column.
    var departmentId=this.owner.source.records[row][‘departmentId’];
    if(departmentId==null){
    return “<button data-row='” + row + “‘ class=’editButtons’>Save</button><button margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;
    }
    return “<button data-row='” + row + “‘ class=’editButtons’>Edit</button><button style=’display: none; margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;
    }
    }
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”dataTable”>
    </div>
    </body>


    Peter Stoev
    Keymaster

    Hi Chaitanya,

    Commands buttons are demonstrated on this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-command-column.htm?arctic.

    Checkbox editors however are not available in jqxDataTable.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Chaitanya
    Participant

    hi,,
    i have seen this example and i have made above code by customizing this example.
    but the problem is that datatable does not support checkbox and html component(Not confirm).
    so i need checkbox at editor not at a time of rendering.
    so can u help me to get above example in grid.


    Peter Stoev
    Keymaster

    Hi Chaitanya,

    We don’t have checkbox editor built-in this widget. I pointed this out in my previous post.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Chaitanya
    Participant

    hi,
    Can u help me create grid with command button. I have taken reference from above link which have provided..
    but it not working.

    `<!DOCTYPE html>
    <html lang=”en”>
    <%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
    <%@ taglib prefix=”spring” uri=”http://www.springframework.org/tags”%>
    <head>
    <title id=’Description’>In order to enter in edit mode, select a grid row, then “Click” or press the “F2” key. To cancel the editing, press the “Esc” key. To save
    the changes press the “Enter” key or select another Grid row.</title>
    <link rel=”stylesheet” href=<spring:url value=”/jqwidgets/styles/jqx.base.css”/> type=”text/css” />
    <script type=”text/javascript” src=<spring:url value=”/scripts/jquery-1.11.1.min.js”/> ></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcore.js”/> ></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdata.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxbuttons.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxscrollbar.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxmenu.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.edit.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.selection.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxlistbox.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdropdownlist.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcheckbox.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcalendar.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxnumberinput.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdatetimeinput.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/jqwidgets/globalization/globalize.js”/>></script>
    <script type=”text/javascript” src=<spring:url value=”/scripts/demos.js”/>></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var data = ‘${departmentList}’;
    var source =
    {
    localdata: data,
    datatype: “json”,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    dataFields: [
    { name: ‘departmentId’, type: ‘int’ },
    { name: ‘departmentName’, type: ‘string’ },
    { name: ‘status’, type: ‘bool’ }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    source: dataAdapter,
    editable: true,
    selectionmode: ‘singlerow’,
    // editmode: ‘selectedrow’,
    // editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
    /*rendering: function()
    {
    alert(“rendering”)
    // destroys all buttons.
    if ($(“.editButtons”).length > 0) {
    $(“.editButtons”).jqxButton(‘destroy’);
    }
    if ($(“.cancelButtons”).length > 0) {
    $(“.cancelButtons”).jqxButton(‘destroy’);
    }
    },*/ Not availablle in grid so that commented
    // called when jqxDataTable is going to be rendered.

    rendered: function () {
    alert(“rendere”)
    if ($(“.editButtons”).length > 0) {
    $(“.cancelButtons”).jqxButton();
    $(“.editButtons”).jqxButton();

    var editClick = function (event) {
    var target = $(event.target);
    // get button’s value.
    var value = target.val();
    // get clicked row.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }
    if (value == “Edit”) {
    // begin edit.
    target.parent().find(‘.cancelButtons’).show();
    target.val(“Save”);
    $(“#jqxgrid”).jqxGrid(‘beginRowEdit’, rowIndex);
    }
    else {
    // end edit and save changes.
    target.parent().find(‘.cancelButtons’).hide();
    target.val(“Edit”);
    $(“#jqxgrid”).jqxGrid(‘endRowEdit’, rowIndex);
    }
    }
    $(“.editButtons”).on(‘click’, function (event) {
    editClick(event);
    });

    $(“.cancelButtons”).click(function (event) {
    // end edit and cancel changes.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }
    $(“#jqxgrid”).jqxGrid(‘endRowEdit’, rowIndex, true);
    });
    }
    },
    pagerButtonsCount: 8,
    columns: [
    { text: ‘Department Id’, columntype: ‘textbox’, datafield: ‘departmentId’, width: 80 },
    { text: ‘Department Name’, datafield: ‘departmentName’, columntype: ‘textbox’, width: 80 },
    { text: ‘Status’, columntype: ‘checkbox’, datafield: ‘status’, width: 195 },
    {
    text: ‘Edit’, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    // render custom column.
    return “<button data-row='” + row + “‘ class=’editButtons’>Edit</button><button style=’display: none; margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;
    }
    }

    ]
    });

    });
    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”></div>

    </body>
    </html>


    Peter Stoev
    Keymaster

    Hi Chaitanya,

    The link is about jqxDataTable, not jqxGrid. jqxGrid has such demo available in the Mobile demos.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.