jQWidgets Forums

Tagged: mvc dropdown grid

This topic contains 7 replies, has 2 voices, and was last updated by amwebb 13 years ago.

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

Author

Multiple dropdown grids Posts

June 14, 2012 at 9:17 pm Multiple dropdown grids #4948

June 15, 2012 at 5:01 am Multiple dropdown grids #4959

Peter Stoev

Keymaster

Hi amwebb,

Here’s how to add 3 dropdowngrids on a web page:

<!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.7.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/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="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var createGrid = function (gridid, dropdownid) {
                // prepare the data
                var data = generatedata(100);
                var source =
               {
                   localdata: data,
                   datatype: "array",
                   updaterow: function (rowid, rowdata) {
                       // synchronize with the server - send update command   
                   }
               };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $(dropdownid).jqxDropDownButton({ width: 150, height: 25, theme: theme });
                $(gridid).jqxGrid(
                {
                    width: 550,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: 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' }
                    ]
                });
                $(gridid).bind('rowselect', function (event) {
                    var args = event.args;
                    var row = $(gridid).jqxGrid('getrowdata', args.rowindex);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                    $(dropdownid).jqxDropDownButton('setContent', dropDownContent);
                });
                $(gridid).jqxGrid('selectrow', 0);
            }
            createGrid("#jqxgrid", "#jqxdropdownbutton");
            createGrid("#jqxgrid2", "#jqxdropdownbutton2");
            createGrid("#jqxgrid3", "#jqxdropdownbutton3");
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxdropdownbutton">
            <div id="jqxgrid">
            </div>
        </div>
        <div style="margin-top: 20px;" id="jqxdropdownbutton2">
            <div id="jqxgrid2">
            </div>
        </div>
        <div style="margin-top: 20px;" id="jqxdropdownbutton3">
            <div id="jqxgrid3">
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 15, 2012 at 1:32 pm Multiple dropdown grids #4968

amwebb

Member

Thanks for the reply but it doesn’t work.

June 15, 2012 at 2:39 pm Multiple dropdown grids #4971

Peter Stoev

Keymaster

Hi amwebb,

Which version of the jQuery Framework do you use? Visual Studio by default comes with 1.4.2. The test I did was with jQuery 1.7.2 and jQWidgets 2.2

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 15, 2012 at 7:59 pm Multiple dropdown grids #4987

amwebb

Member

Thanks for your fast reply. I tried your exact code and it works, but it sends back three dropdowns with the same data.My 3 dropdowns are tied to different database tables and not the same array. How would I implement that?

June 18, 2012 at 9:45 pm Multiple dropdown grids #5074

amwebb

Member

Unfortunately I have tried everything to get this working and I can only show one dropdown grid at a time. Please look at my code and tell me what I am doing wrong. I’m trying out jqwidgets for a very large project and we will be purchasing a license. If I can’t get this figured out, I’m going to have to look at other plugins.

$(document).ready(function () {
// prepare the data
theme = ‘classic’
var source = {
datatype: “json”,
datafields: [{ name: ‘Code’ }, { name: ‘Description’ }, ],
url: ‘View/GetCodes’
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxdropdownbutton”).jqxDropDownButton({ width: 150, height: 25, theme: theme });
$(“#jqxgrid”).jqxGrid(
{
width: 550,
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
columns: [
{ text: ‘Code’, columntype: ‘textbox’, datafield: ‘Code’, width: 90 },
{ text: ‘Description’, datafield: ‘Description’, columntype: ‘textbox’, width: 90 },

]
});
$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var args = event.args;
var row = $(“#jqxgrid”).jqxGrid(‘getrowdata’, args.rowindex);
var dropDownContent = ‘

‘ + row[‘Code’] + ‘ ‘ + row[‘Description’] + ‘

‘;
$(“#jqxdropdownbutton”).jqxDropDownButton(‘setContent’, dropDownContent);
});
$(“#jqxgrid”).jqxGrid(‘selectrow’, 0);
});

Shouldn’t I just be able to copy and paste the script code and change to jqxdropdownbutton2 and jqxgrid2 and add some matching divs for this to work? What am I doing wrong?

June 19, 2012 at 3:32 am Multiple dropdown grids #5081

Peter Stoev

Keymaster

Hi amwebb,

The code you sent initializes only 1 Grid and 1 DropDownButton. In order to have multiple Grids and multiple dropdowns, you need to put DIV tags with unique IDs in your HTML markup, select these tags with jQuery and call the appropriate functions as I did in the code I posted in the last post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 19, 2012 at 1:10 pm Multiple dropdown grids #5109

amwebb

Member

Thanks for your reply. I guess I wasn’t clear enough in the post. I put unique IDs in my divs and called them with matching jquery functions and still had issues. The code I posted was for only one of the divs. I’m going to look at this again and see if I’ve missed something. Thanks for your help!

Author

Posts

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

You must be logged in to reply to this topic.