jQWidgets Forums

Tagged: ASP.NET MVC5, bootstrap 3.0, buttons, datetimeinput, dropdownbutton, grid, jqxButtons, jqxdatetimeinput, jqxDropDownButton, jqxgrid

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

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

Author

Custom Grid with button columns, dropdowngrid columns and datepicker Posts

February 3, 2015 at 12:37 am Custom Grid with button columns, dropdowngrid columns and datepicker #66364

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

February 3, 2015 at 9:16 am Custom Grid with button columns, dropdowngrid columns and datepicker #66406

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/

February 4, 2015 at 8:01 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66540

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

February 5, 2015 at 7:37 am Custom Grid with button columns, dropdowngrid columns and datepicker #66575

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/

February 5, 2015 at 10:34 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66652

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

February 6, 2015 at 3:25 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66704

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/

February 6, 2015 at 8:31 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66716

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

February 6, 2015 at 9:03 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66717

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

February 6, 2015 at 9:48 pm Custom Grid with button columns, dropdowngrid columns and datepicker #66719

sindc

Participant

Hi Nadezhda,

I was able to fix the multiple dropdowngrid issue.

Thanks,
SindC

Author

Posts

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

You must be logged in to reply to this topic.