jQuery UI Widgets Forums Grid Custom Grid with button columns, dropdowngrid columns and datepicker

This topic contains 8 replies, has 2 voices, and was last updated by  sindc 9 years ago.

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

  • sindc
    Participant

    I need to implement a grid with two button columns which will be “Edit” and “Print”, I need two DropDownGrid columns, and one column with datepicker and I need to implement this using array.

    Edit button should be able to redirect me to a page with the selected row data.

    Is there a way to implement this grid in MVC 5 and bootstrap 3.0

    Please advice!

    Thanks,
    Sindc

    • This topic was modified 9 years ago by  sindc.

    Nadezhda
    Participant

    Hello Sindc,

    Please, refer to Put dropdowngrid element into a cell post, Editing demo and Popup Editing demo for more information about implementing your functionality.
    You can learn how to implement jQWidgets with ASP.NET MVC5 in Documentation of jQWidgets. For implementing on Bootstrap, please, refer to Bootstrap demos.
    We hope these resources are helpful to you.

    Best Regards,
    Nadezhda

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


    sindc
    Participant

    Hello Nadezhda,

    I am able to implement a grid with dropdown columns as well as button columns. I am looking for a plugin to add date picker as a column it should display a calendar when user selects the date it should display the date and calendar icon next to the date. Can you please help

    Thanks,
    SindC

    • This reply was modified 9 years ago by  sindc.

    Nadezhda
    Participant

    hi SindC,

    Please, find the below example which shows how to implement jqxDateTimeInput as column in jqxGrid.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = '[{ "Name": "Beate Wilson", "City": "Brussels", "Date":"3/10/2015"}, {"Name": "Andrew Fuller", "City": "Paris", "Date":"2/5/2015"}, {"Name": "Mayumi Murphy", "City": "Washington", "Date":"1/1/2015"}]';
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Name', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Date', type: 'date' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var name;
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 450,
                    source: dataAdapter,
                    selectionmode: 'singlecell',
                    editable: true,
                    autoheight: true,
                    columns: [
                        {
                            text: 'Name', datafield: 'Name', width: 150, columntype: 'template',
                            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                editor.append('<div style="border-color: transparent;" id="jqxgrid-editor"></div>');
                                editor.jqxDropDownButton({ width: 150, height: 25 });
    
                                var data = generatedata(100);
    
                                var source =
                                {
                                    localdata: data,
                                    datafields:
                                    [
                                        { name: 'firstname', type: 'string' },
                                        { name: 'lastname', type: 'string' },
                                        { name: 'productname', type: 'string' },
                                        { name: 'quantity', type: 'number' },
                                        { name: 'price', type: 'number' }
                                    ],
                                    datatype: "array",
                                    updaterow: function (rowid, rowdata) {
                                        // synchronize with the server - send update command   
                                    }
                                };
    
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                // initialize jqxGrid
                                $("#jqxgrid-editor").jqxGrid(
                                {
                                    width: 550,
                                    source: dataAdapter,
                                    pageable: true,
                                    autoheight: true,
                                    columnsresize: true,
                                    columns: [
                                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                                      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                                    ]
                                });
    
                                $("#jqxgrid-editor").on('rowselect', function (event) {
                                    var args = event.args;
                                    var row = $("#jqxgrid-editor").jqxGrid('getrowdata', args.rowindex);
                                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                                    name = row.firstname + " " + row.lastname;
                                    editor.jqxDropDownButton('setContent', dropDownContent);
                                    editor.css("display", "none");
                                });
    
                                $("#jqxgrid-editor").jqxGrid('selectrow', 0);
                            },
                            geteditorvalue: function (row, cellvalue, editor) {
                                // return the editor's value.
                                editor.jqxDropDownButton("close");
                                return name;
                            }
                        },
                        {
                            text: 'City', datafield: 'City', width: 150, columntype: 'template',
                            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                editor.append('<div style="border-color: transparent;" id="jqxgrid-editor2"></div>');
                                editor.jqxDropDownButton({ width: 150, height: 25 });
    
                                var data = generatedata(100);
    
                                var source =
                                {
                                    localdata: data,
                                    datafields:
                                    [
                                        { name: 'firstname', type: 'string' },
                                        { name: 'lastname', type: 'string' },
                                        { name: 'productname', type: 'string' },
                                        { name: 'quantity', type: 'number' },
                                        { name: 'price', type: 'number' }
                                    ],
                                    datatype: "array",
                                    updaterow: function (rowid, rowdata) {
                                        // synchronize with the server - send update command   
                                    }
                                };
    
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                // initialize jqxGrid
                                $("#jqxgrid-editor2").jqxGrid(
                                {
                                    width: 550,
                                    source: dataAdapter,
                                    pageable: true,
                                    autoheight: true,
                                    columnsresize: true,
                                    columns: [
                                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                                      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                                    ]
                                });
    
                                $("#jqxgrid-editor2").on('rowselect', function (event) {
                                    var args = event.args;
                                    var row = $("#jqxgrid-editor2").jqxGrid('getrowdata', args.rowindex);
                                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                                    name = row.firstname + " " + row.lastname;
                                    editor.jqxDropDownButton('setContent', dropDownContent);
                                    editor.css("display", "none");
                                });
    
                                $("#jqxgrid-editor2").jqxGrid('selectrow', 0);
                            },
                            geteditorvalue: function (row, cellvalue, editor) {
                                // return the editor's value.
                                editor.jqxDropDownButton("close");
                                return name;
                            }
                        },
                        {
                            text: 'Date', datafield: 'Date', width: 150, columntype: 'datetimeinput', align: 'right', cellsalign: 'right', cellsformat: 'd'
                        }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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


    sindc
    Participant

    Hi Nadezha,

    Thanks for the example it worked! I have one question regarding the dropdowngrid when I select a value from the dropdowngrid and click on next row of jqxGrid it updates the value of previous selected dropdowngrid value. I wasn’t able to fix this issue.

    Thanks,
    SindC


    Nadezhda
    Participant

    Hi SindC,

    You can use column callback initeditor to fix the issue. You can read more about it in the jqxGrid API Documentation.

    Best Regards,
    Nadezhda

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


    sindc
    Participant

    Hi Nadezhda,

    Thanks for the help. I have implemented the date column but I will need one more column right after the datetimeinput so that when user picks the date day is displayed in the second column.

    Thanks,
    SindC


    sindc
    Participant

    Hi Nadezhda,

    I am facing one more issue with dropdowngrid, I am trying to use multiple dropdowngrid columns in a grid and if I implement this only one of the column works. I am not sure why it is impacting the other column I tried to change the names of the jqxgrid-editor and localdata : data as localdata: dataengr by doing this the columns will not have any data at all. Can you please suggest me a way to resolve this. My application has so many grids where I need multiple columns with dropdowngrid.

    Please help!

    Thanks,
    SindC


    sindc
    Participant

    Hi Nadezhda,

    I was able to fix the multiple dropdowngrid issue.

    Thanks,
    SindC

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

You must be logged in to reply to this topic.