editor jqxDropDownList bind different values in grid for each row

[sureshatpureParticipant]

Hi, i have a grid with a column type as dropdown as well as textbox ( i change it dynamically)
Based on the g_noofleads value i set the column type as textbox or dropdown
if g_noofleads > 0 then the column type is set as dropdown and if g_noofleads=0 then it is set as textbox.
when the column type is set as dropdown, for each dropdown, i need to load a different set dropdown values based on the
first two column values (custgroup,itemgroup), which i pass to a ajax function and return the leadid’s
the ajax function
url: base_url + “dailyactivity/getleadids/”+ escape(cust_grp) + “/” + escape(prod_grp),
it returns as
{“leadid”:[{“leadid”:”19122″,”id”:”19122″},{“leadid”:”19108″,”id”:”19108″}]} for one row
and
when again called it returns another set as {“leadid”:[{“leadid”:”29494″,”id”:”29494″}]} for another row

Problem:
when the grid is loaded, when i click on the leadid column, the first column loads the leadid’s correctly.
when i click on the second row in the same grid to load another set of lead id’s i get the same set of leadid’s loaded in
the dropdown list.

reference images
dropdown values for first row

the actual values which i wanted to display when i click on another row

the list of values of the first row is rendered when the another row is clicked

Desired output On clicking on each row under the column leadid i want to load different set of values for each dropdown type.

  $("#jqxgrid_n").jqxGrid(
        {
            width: '100%',
            height: 300,
            source: dataAdapter,
            theme: 'energyblue',
            columnsresize: true,
            selectionmode: 'rowselect',
            editable: true,
            editmode: 'click',
            sortable: true,
            pageable: true,
            columnsresize: true,
            sortable: true,
            showfilterrow: false,
            filterable: true,
            columns: [
                {text: 'UID', datafield: 'id', width: 150, cellsalign: 'left', hidden: true},
                {text: 'Customer Group', datafield: 'custgroup', width: 150, editable: false},
                {text: 'Product Group', datafield: 'itemgroup', width: 150, cellsalign: 'left', editable: false},
                {text: 'Lead id', datafield: 'leadid', displayfield: 'leadid', width: 100, cellsalign: 'center', cellbeginedit: function (row, datafield, columntype) {
            var rowdata = $("#jqxgrid_n").jqxGrid('getrowdata', row);
            var cust_grp = rowdata.custgroup;
            var prod_grp = rowdata.itemgroup;
            if(cust_grp!="" && prod_grp!="")
            {
            //return true;

                var url = "dailyactivity/get_potentialquantity/" + escape(cust_grp) + "/" + escape(prod_grp);
                    $.ajax({
                        dataType: "html",
                        url: url,
                        type: "POST",
                        async: false,
                        cache:false,
                        error: function (xhr, status) {
                            alert("check " + status + " test");
                        },
                        success: function (result) {
                            var obj = jQuery.parseJSON(result);
                            rows = obj.rows;

                            potential_quantity = rows[0].potential;
                            noofleads =rows[0].noofleads;
                            g_noofleads=noofleads;
                            resulttype =rows[0].result_type;
                        }
                        
                    });

            $("#jqxgrid_n").jqxGrid('setcellvalue', row, "potentialqty", potential_quantity);
            $("#jqxgrid_n").jqxGrid('setcellvalue', row, "result_type", resulttype);

                    var data = $('#jqxgrid_n').jqxGrid('getrowdata', row);
                      if(data.result_type === 'Value')
                        {
                            this.columntype = 'textbox';
                        } 

                       else if(data.result_type === 'Select') 
                       {
                        this.columntype = 'dropdownlist';
                       }
            
        }
        else
        {
            return false;
        }

    },createeditor: function(row, cellvalue, editor){

        if(g_noofleads==0){

           editor.jqxInput({ placeHolder: "0" });
         }
         else if (g_noofleads>0)
         {
         

                var cust_grp = $('#jqxgrid_n').jqxGrid('getcellvalue', row, "custgroup");
                var prod_grp = $('#jqxgrid_n').jqxGrid('getcellvalue', row, "itemgroup");

                var list = {
                    datatype: "json",
                    datafields:
                            [
                                {name: 'id'},
                                {name: 'leadid'}
                            ],
                    id: 'id',
                    root: "leadid",
                    url: base_url + "dailyactivity/getleadids/"+ escape(cust_grp) + "/" + escape(prod_grp),
                    cache: false,
                    async: false
            
                   
                };
                alert(list.toSource());
                listdataAdapter = new $.jqx.dataAdapter(list, {
                    autoBind: true,
                    async: false,
                    buildSelect: function (suboptions)
                    {
                        
                        var data = new Array();
                        $.each(suboptions, function (id, value)
                        {
                            var list = records[i];
                            list.id = list.id;
                            list.leadid = list.leadid;
                            data.push(list);
                        });
                        return data;
                    }
                });
       
            editor.jqxDropDownList(
                {
                    source: listdataAdapter.records, displayMember: "id", valueMember: "leadid",promptText:"No Leads",renderer: function (index, label, value) 
                        {
                        
            var hrefUrl = base_url+'leads/viewleaddetails/' + value;
            var option = '<option value="'+value+'"><a href="'+hrefUrl+'" target="_blank">'+value+'</a></option>';
                               return option;
                        }
                });
        } //end of else 
    

    } // end of createeditor
    ,cellendedit:function (row, datafield, columntype) {
        alert("cellendedit");

    }
    /*,cellsrenderer: Resultsupdate.renderUnitsUpdate*/
},

            {text: 'noofleads', datafield: 'noofleads',hidden:false, width: 75, cellsalign: 'left', editable: false},
            {text: 'result_type', datafield: 'result_type',hidden:false, width: 75, cellsalign: 'left', editable: false},

            {text: 'Activity Type', datafield: 'subactivity', width: 150, cellsalign: 'left', cellbeginedit:Resultsupdate.initResultsEditorat, createeditor: Resultsupdate.resultsEditorat, cellsrenderer: Resultsupdate.renderUnitsat
            },
            
            {text: 'Potential', datafield: 'potentialqty', width: 75, cellsalign: 'left', editable: false},

            {text: 'Required Quantity', datafield: 'quantity', width: 75, cellsalign: 'left',
                    cellbeginedit: function (row, datafield, columntype) {
                                var rowdata = $("#jqxgrid_n").jqxGrid('getrowdata', row);
                                var leadid = rowdata.leadid;
                               // alert("leadid in quantity cell rendering "+leadid);
                                if(leadid==undefined || leadid==0)
                                {
                                    return true;
                                }
                                else
                                {
                                    return false;
                                }

                            }
                },
                {text: 'Sales Type', datafield: 'division', width: 150, cellsalign: 'left',cellbeginedit:Resultsupdate.initResultsEditorst, createeditor: Resultsupdate.resultsEditorst, cellsrenderer: Resultsupdate.renderUnitsst

                },

            {text: 'Mode of Contact', datafield: 'modeofcontact', width: 100, cellsalign: 'left', cellbeginedit:Resultsupdate.initResultsEditorcon, createeditor: Resultsupdate.resultsEditorcon, cellsrenderer: Resultsupdate.renderUnitsst
            },
            {text: 'Time Spent (Hrs)', datafield: 'hour_s', width: 75, cellsalign: 'left', columntype: 'dropdownlist',
                createeditor: function (row, cellvalue, editor) {
                    editor.jqxDropDownList({source: ["00 Hr", "01 Hrs", "02 Hrs", "03 Hrs", "04 Hrs", "05 Hrs", "06 Hrs", "07 Hrs", "08 Hrs", "09 Hrs", "10 Hrs"]});
                }
            },
            {text: 'Time Spent (Mins)', datafield: 'minit', width: 75, cellsalign: 'left', columntype: 'dropdownlist',
                createeditor: function (row, cellvalue, editor) {
                    editor.jqxDropDownList({source: ["0 mins", "5 mins", "10 mins", " 15 mins", "20 mins", "25 mins", "30 mins", " 35 mins", "40 mins", "45 mins", " 50 mins", "55 mins"]});
                }
            },
        {text: 'Notes / Remarks', datafield: 'remarks', width: 150, cellsalign: 'left'},

        ]
    });

                    $('#customWindow').jqxWindow('open');
                    $('#customWindow').jqxWindow({width: "100%"});

                } // end of popup edit button click event
            },
        ]

    });

Any help would be appreciated.
what i guess is that, once the dataadapter is loaded with list of dropdown values, it is not cleared , so any way that i can clear the dataadapter source for the dropdown and reload with new values.

[DimitarParticipant]

Hi sureshatpure,

The createeditor callback function is called only once, the first time you start editing a “Lead id” cell. You should update the editor’s source in the initeditor callback, which is called each time you enter edit mode in this column. The demo Cascading ComboBoxes might help you better get the idea.

Best Regards,
Dimitar

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

[sureshatpureParticipant]

Thanks Dimitar, yes worked fine..as per your suggestion.

[sureshatpureParticipant]

Hi Dimitar,
i have one more issue related to display
the leadid’s are not displayed in the chrome browser
below is the reference image for chrome, you can see the size of dropdown is list for two leadid’s but not visible

</p>

Where as in firefox,you can see the difference, the leadid’s are displayed in the dropdown list

</p>

i guess, is it related to async or cache property..?

[DimitarParticipant]

Hi sureshatpure,

This happens because of your editor’s renderer callback. Please try changing it to something like:

editor.jqxDropDownList({
    source: listdataAdapter.records,
    displayMember: "id",
    valueMember: "leadid",
    promptText: "No Leads",
    renderer: function(index, label, value) {

        var hrefUrl = base_url + 'leads/viewleaddetails/' + value;
        var option = '<div value="' + value + '"><a href="' + hrefUrl + '" target="_blank">' + value + '</a></div>';
        return option;
    }
});

Best Regards,
Dimitar

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

[sureshatpureParticipant]

Thanks Dimitar, yes worked fine..as per your suggestion, was missing the div tag.

[sureshatpureParticipant]

Hi Dimitar,
This is for follow up of the above code, i want to display the leadid’s while loading the grid(jqxgrid_n) of the each if it exists in the database,
the datafield is ‘leadid’ which has the leadid value or 0.

 $("#jqxgrid").jqxGrid(
                                {
                                    width: 760,
                                    height: 500,
                                    source: dataAdapter,
                                    theme: 'energyblue',
                                    sortable: true,
                                    pageable: true,
                                    columnsresize: true,
                                    editable: false,
                                    showfilterrow: true,
                                    filterable: true,
                                    autoheight: true,
                                    showtoolbar: true,
                                    pageable: true,
                                    rendertoolbar: toolbarfunc,
                                    columns: [
                                        {text: 'ID', datafield: 'id', width: 60},
                                        {
                                            text: 'Visit Date', datafield: 'currentdate', columntype: 'datetimeinput', width: 110, align: 'left', cellsalign: 'left', cellsformat: 'd', formatString: 'd'
                                                    /* , validation: function (cell, value) {
                                                     if (value == "")
                                                     return true;
                                                     
                                                     var year = value.getFullYear();
                                                     if (year >= 2014) {
                                                     return { result: false, message: "Ship Date should be before 1/1/2014" };
                                                     }
                                                     return true;
                                                     }*/
                                        },
                                        {text: 'User Code', columntype: 'dropdownlist', filterable: 'enable', datafield: 'execode', width: 75},
                                        {text: 'User Name', datafield: 'exename', width: 150, cellsalign: 'left'},
                                        {text: 'Branch', datafield: 'branch', width: 150, cellsalign: 'left'},
                                        {text: 'Created Date', datafield: 'creationdate', columntype: 'datetimeinput', width: 110, align: 'left', cellsalign: 'left', cellsformat: 'd', formatString: 'd'},
                                        {text: 'Update', cellsalign: 'center', datafield: 'Update', filterable: false, width: 100, columntype: 'button', cellsrenderer: function () {
                                                return "Update";
                                            }, buttonclick: function (row)
                                            { // popup function start
                                                actionmode = "update";
                                                var rowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                                                var headerid = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, 'id');
                                                header_date = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, 'currentdate');
                                                username = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, 'exename');
                                                branch = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, 'branch');

                                                dhdr_headerid = headerid;

                                                $('#username').jqxInput('val', username);
                                                $('#branch').jqxInput('val', branch);

                                                var t = $('#hdn_hdr_id').val();

                                                $('#hdn_hdr_id').val(dhdr_headerid);
                                                var g = $('#hdn_hdr_id').val();

                                                var rows = new Array();
                                                var columns = new Array();
                                                jQuery.ajax({
                                                    dataType: "html",
                                                    url: 'dailyactivity/get_edit_data/' + headerid,
                                                    type: "POST",
                                                    async: false,
                                                    error: function (xhr, status) {
                                                        alert("check " + status + " test");
                                                    },
                                                    success: function (result) {
                                                        var obj = jQuery.parseJSON(result);
                                                        columns = obj[0].columns;
                                                        rows = obj[1].rows;

                                                        commonCols = obj[0].columns;
                                                    }
                                                });

                                                var source =
                                                        {
                                                            datatype: "json",
                                                            datafields: [],
                                                            id: 'id',
                                                            localdata: rows
                                                        };

                                                var dataAdapter = new $.jqx.dataAdapter(source);
                                                header_date = convert(header_date);

                                                $('#update_header_date').jqxInput({width: '100px', height: '25px', disabled: true});

                                                $('#update_header_date').val(header_date);

                                                $("#jqxgrid_n").jqxGrid(
                                                        {
                                                            width: '100%',
                                                            height: 300,
                                                            source: dataAdapter,
                                                            theme: 'energyblue',
                                                            columnsresize: true,
                                                            selectionmode: 'rowselect',
                                                            editable: true,
                                                            editmode: 'click',
                                                            sortable: true,
                                                            pageable: true,
                                                            columnsresize: true,
                                                            sortable: true,
                                                            showfilterrow: false,
                                                            filterable: true,
                                                            columns: [
                                                                {text: 'UID', datafield: 'id', width: 150, cellsalign: 'left', hidden: true},
                                                                {text: 'Customer Group', datafield: 'custgroup', width: 150, editable: false},
                                                                {text: 'Product Group', datafield: 'itemgroup', width: 150, cellsalign: 'left', editable: false},
                                                                {text: 'Lead id', datafield: 'leadid', displayfield: 'leadid', width: 127, cellsalign: 'center', cellbeginedit: Resultsupdate.initResultsEditor, initeditor: Resultsupdate.resultsEditor, cellsrenderer: Resultsupdate.renderUnits,promptText:'Select Leadid',cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) 
                                                                        {
                                                                           // alert("oldvalue "+oldvalue); alert("newvalue "+newvalue);
                                                                              if (newvalue == 0) {
                                                                               return oldvalue;
                                                                          }
                                                                        }
                                                                },
                                                                {text: 'noofleads', datafield: 'noofleads',hidden:true, width: 20, cellsalign: 'left', editable: false},
                                                                {text: 'result_type', datafield: 'result_type',hidden:true, width: 75, cellsalign: 'left', editable: false},

                                                                {text: 'Activity Type', datafield: 'subactivity', width: 110, cellsalign: 'left', cellbeginedit:Resultsupdate.initResultsEditorat, initeditor: Resultsupdate.resultsEditorat, cellsrenderer: Resultsupdate.renderUnitsat
                                                                },
                                                                
                                                                {text: 'Potential', datafield: 'potentialqty', width: 75, cellsalign: 'left', editable: false},

                                                                {text: 'Required Quantity', datafield: 'quantity', width: 75, cellsalign: 'left',
                                                                        cellbeginedit: function (row, datafield, columntype) {
                                                                                    var rowdata = $("#jqxgrid_n").jqxGrid('getrowdata', row);
                                                                                    var leadid = rowdata.leadid;
                                                                                   // alert("leadid in quantity cell rendering "+leadid);
                                                                                    if(leadid==undefined || leadid==0)
                                                                                    {
                                                                                        return true;
                                                                                    }
                                                                                    else
                                                                                    {
                                                                                        return false;
                                                                                    }

                                                                                }
                                                                    },
                                                                    {text: 'Sales Type', datafield: 'division', width: 110, cellsalign: 'left',readonly:true,cellbeginedit:Resultsupdate.initResultsEditorst, initeditor: Resultsupdate.resultsEditorst, cellsrenderer: Resultsupdate.renderUnitsst

                                                                    },
                                                                
                                                                   
                                                                /*{text: 'Mode of Contact', datafield: 'modeofcontact', width: 100, cellsalign: 'left', columntype: 'dropdownlist',
                                                                    createeditor: function (row, cellvalue, editor) {
                                                                        editor.jqxDropDownList({source: ["E-mail", "Phone", "Visit"]});
                                                                    }
                                                                },*/
                                                                {text: 'Mode of Contact', datafield: 'modeofcontact', width: 100, cellsalign: 'left', cellbeginedit:Resultsupdate.initResultsEditorcon, createeditor: Resultsupdate.resultsEditorcon, cellsrenderer: Resultsupdate.renderUnitsst
                                                                },
                                                                {text: 'Time Spent (Hrs)', datafield: 'hour_s', width: 75, cellsalign: 'left', columntype: 'dropdownlist',
                                                                    createeditor: function (row, cellvalue, editor) {
                                                                        editor.jqxDropDownList({source: ["00 Hr", "01 Hrs", "02 Hrs", "03 Hrs", "04 Hrs", "05 Hrs", "06 Hrs", "07 Hrs", "08 Hrs", "09 Hrs", "10 Hrs"]});
                                                                    }
                                                                },
                                                                {text: 'Time Spent (Mins)', datafield: 'minit', width: 75, cellsalign: 'left', columntype: 'dropdownlist',
                                                                    createeditor: function (row, cellvalue, editor) {
                                                                        editor.jqxDropDownList({source: ["0 mins", "5 mins", "10 mins", " 15 mins", "20 mins", "25 mins", "30 mins", " 35 mins", "40 mins", "45 mins", " 50 mins", "55 mins"]});
                                                                    }
                                                                },
                                                            {text: 'Notes / Remarks', datafield: 'remarks', width: 150, cellsalign: 'left'},

                                                            ]
                                                        });
                                                
                                            var x = ($(window).width() - $("#customWindow").jqxWindow('width')) / 2 + $(window).scrollLeft();
                                            var y = ($(window).height() - $("#customWindow").jqxWindow('height')) / 2 + $(window).scrollTop();
                                            $("#customWindow").jqxWindow({ position: { x: x, y: y} });
                                                $('#customWindow').jqxWindow('open');
                                                $('#customWindow').jqxWindow({width: "100%"});

                                            } // end of popup edit button click event
                                        },
                                    ]

                                });

inserting images for your references in order the order how i want it to be

This is how it loads by default (no leadid is loaded even if the leadid present in the database)

Loads the leadid, only when we click on that particular cell

This is how i am trying to load

[sureshatpureParticipant]

Hi Dimitar,
the code works fine, i had missed the returning the value in the datafield ‘leadid’, i was returning “No Leads” text only

old code

if($activitydetails[$i]["leadid"]==0)
{
     $row["leadid"] = "No Leads";    
}

new code

if($activitydetails[$i]["leadid"]==0)
{
     $row["leadid"] = "No Leads";    
}
else
{
    $row["leadid"] = $activitydetails[$i]["leadid"];
}

the leadid’s are loaded from db as desired

[Author]

Posts