jQuery UI Widgets Forums Grid set value dynamically in jqxgrid custom dropdownlist

This topic contains 8 replies, has 3 voices, and was last updated by  Dimitar 8 years, 1 month ago.

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

  • selva
    Participant

    Hi,

    I want to set value dynamically instead of static in jqxGrid custom dropdownlist column. In this example shows static initialization.

    var gridSource =
                {
                    datatype: "array",
                    localdata: 
                    [
                        { countryCode: "UK" },
                        { countryCode: "US" },
                        { countryCode: "DE" },
                        { countryCode: "FR" },
                        { countryCode: "IN" },
                        { countryCode: "HK" }
                    ],
                    datafields: [
                        // name - determines the field's name.
                        // value - the field's value in the data source.
                        // values - specifies the field's values.
                        // values.source - specifies the foreign source. The expected value is an array.
                        // values.value - specifies the field's value in the foreign source. 
                        // values.name - specifies the field's name in the foreign source. 
                        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                        { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                        { name: 'countryCode', type: 'string'}
                    ]
                };
    

    instead of dynamic Initialization for example

    var codes="US:IN:HK";
    var code=codes.split(":");
    var gridSource =
                {
                    datatype: "array",
                    localdata: 
                    [
                        for(var i=0;i<code.length;i++){
                         {countryCode:code[i]}
                        } 
                    ],
                    datafields: [
                        // name - determines the field's name.
                        // value - the field's value in the data source.
                        // values - specifies the field's values.
                        // values.source - specifies the foreign source. The expected value is an array.
                        // values.value - specifies the field's value in the foreign source. 
                        // values.name - specifies the field's name in the foreign source. 
                        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                        { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                        { name: 'countryCode', type: 'string'}
                    ]
                };
    

    how can I do like this.Please help me


    selva
    Participant

    Could you please help me.


    Dimitar
    Participant

    Hello selva,

    Here is how to populate localdata dynamically:

    var codes = "US:IN:HK";
    var code = codes.split(":");
    var localdata = new Array();
    for (var i = 0; i < code.length; i++) {
        localdata.push({
            countryCode: code[i];
        });
    };
    var gridSource = {
        datatype: "array",
        localdata: localdata,
        datafields: [
            // name - determines the field's name.
            // value - the field's value in the data source.
            // values - specifies the field's values.
            // values.source - specifies the foreign source. The expected value is an array.
            // values.value - specifies the field's value in the foreign source. 
            // values.name - specifies the field's name in the foreign source. 
            // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
            { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
            { name: 'countryCode', type: 'string'}
        ]
    };

    Best Regards,
    Dimitar

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


    selva
    Participant

    Hi Dimitar,

    when I wrote this line
    localdata.push({comTyId:temp[i];});

    I got below error.
    Uncaught SyntaxError: Unexpected token }

    Here is my Code:

    var source =
                            {
                                datatype: "json",
                                datafields:
                                        [
                                            {name: 'comTyId', type: 'string'},
                                            {name: 'commTypename', type: 'string'}
                                        ],
                                id: 'id',
                                url: 'getCommercialType'
                            };
                    var dataAdapter = new $.jqx.dataAdapter(source, {autoBind: true});
    
    var localdata = new Array();
                    $('#jqxgrid_dealType').bind('rowselect', function(event) {
                        var rows = event.args.rowindex;
                        var deal_ty_id_edit = $('#jqxgrid_dealType').jqxGrid('getcellvalue', rows, 'dealTyId');
                        var result = $.ajax({type: "GET", url: "getCommercialTypeByDealType", data: "deal_ty_id=" + deal_ty_id_edit, async: false}).responseText;
                        var temp = result.split(":");
                        for (var i = 0; i < temp.length; i++) {
                            localdata.push({comTyId:temp[i];});
                        }
                    });
                    var gridSource_edit =
                            {
                                datatype: "array",
                                localdata: localdata,
                                datafields: [
                                    {name: 'commTypename', value: 'comTyId', values: {source: dataAdapter.records, value: 'comTyId', name: 'commTypename'}},
                                    {name: 'comTyId', type: 'string'}
                                ]
                            };
                    var gridAdapter_edit = new $.jqx.dataAdapter(gridSource_edit);
                    $('#jqxGrid_commercial_edit').jqxGrid(
                            {
                                width: '250',
                                height: '250',
                                theme: theme_name,
                                source: gridAdapter_edit,
                                editable: true,
                                showtoolbar: true,
                                toolbarheight: 25,
                                rendertoolbar: function(toolbar) {
                                    var me = this;
                                    var container = $("<div style='margin: 5px;'></div>");
                                    var addButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Add Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/add.png'/></div>");
                                    var deleteButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Delete Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/minus.png'/></div>");
                                    toolbar.append(container);
                                    container.append(addButton);
                                    container.append(deleteButton);
                                    addButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                    deleteButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                    addButton.click(function(event) {
                                        var datarow = generaterow();
                                        var commit = $("#jqxGrid_commercial_edit").jqxGrid('addrow', null, datarow);
                                    });
                                    deleteButton.click(function() {
                                        var selectedrowindex = $("#jqxGrid_commercial_edit").jqxGrid('getselectedrowindex');
                                        var rowscount = $("#jqxGrid_commercial_edit").jqxGrid('getrows');
                                        if (selectedrowindex >= 0 && selectedrowindex < rowscount.length) {
                                            var id = $("#jqxGrid_commercial_edit").jqxGrid('getrowid', selectedrowindex);
                                            var commit = $("#jqxGrid_commercial_edit").jqxGrid('deleterow', id);
                                        }
                                    });
                                },
                                columns: [
                                    {text: 'Commercial ID', columntype: 'dropdownlist', width: 230, datafield: 'comTyId', displayfield: "commTypename",
                                        createeditor: function(row, column, editor) {
                                            editor.jqxDropDownList({source: dataAdapter, displayMember: "commTypename", valueMember: 'comTyId', selectedIndex: 0, dropDownHeight: '100px'});
                                        }
                                    }
                                ]
                            });
    

    where jqxgrid_dealType is a outer Grid. set inner grid values dynamically while rowselect event.


    Dimitar
    Participant

    Hi selva,

    I am sorry, in the code I provided you there is an extra ;

    Try as follows:

    localdata.push({comTyId:temp[i]});

    Best Regards,
    Dimitar

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


    selva
    Participant

    Hi Dimitar,

    I have one more doubt.Those inserted row is make to disabled. How can I do this.


    Dimitar
    Participant

    Hi selva,

    Please check out the demo Disable Editing of Rows. In it, change the cellbeginedit callback to:

    var cellbeginedit = function (row, datafield, columntype, value) {
        if (rowAdded == true) {
            var rows = $('#jqxgrid').jqxGrid('getrows');
            if (row == rows.length - 1) return false;
        };
    }

    rowAdded is a flag that initially should be false and should be set to true when you click the “add” button.

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Hi Dimitar Same Isssue For me ,

    I would Like to add Two columns Add and Delete , I have around 45Thousand Records , So Is there any alternative other than looping through it and adding the column to json

    Can I add Statically???

    $(“#jqxgrid”).jqxGrid(
    columns: [
    { text: ‘Add’, cellsrenderer: linkrenderer },
    { text: ‘Delete’, cellsrenderer: linkrenderer },
    // Other Columns
    ]

    });

    I have written like this In linkReneder Function I can get Value from data that is binded using Row number but in

    I can only see column header but not rows with columns (Add,Delete )


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

You must be logged in to reply to this topic.