[sampathParticipant]

Hi Dimitar,

Thank you very much , I have used the below function

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var newHTML = defaulthtml + "<div class='jqx-icon-arrow-down jqx-icon' style='width: 16px; height: 16px; top: -30%; left: 40%;'></div>";
                return newHTML;
            };

Regards,
J Sampath Kumar,
Osmosys.

[sampathParticipant]

Hello Peter,

I have debugged it , I’m getting the same output result from server and binding same data to control but still not able to see the data in dropdown control.

Regards,
J Sampath Kumar,
Osmosys.

[sampathParticipant]

Thank you dimitar.

[sampathParticipant]

Peter Stoev,

I have created a sample application to demonstrate it , but in that sample application edit functionality is working fine.

When I apply same functionality in my project it’s not working

I’m getting below error message when I press delete the text in the text box of grid.

Microsoft JScript runtime error: Unable to get value of the property ‘columntype’: object is null or undefined

Regards,
J Sampath Kumar.

[sampathParticipant]

I got the solution , popup div was in UpdatePanel When I updated the updatepanel, issue is solved.

[sampathParticipant]

Hi Dimitar,

Thanks for quick response.

Below is the code,

function OnGetFrequencyComplete(result) {
            FrequencyDataAdapter = "";
            var FrequencySource =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'FrequencyName' },
                        { name: 'FrequencyId' }
                    ],
                    localdata: result,
                    id: 'ddlFrequencyId'
                }
            FrequencyDataAdapter = new $.jqx.dataAdapter(FrequencySource);
            PageMethods.GetDetailsToBind(OnGetTableDataComplete);
        }
        function OnGetTableDataComplete(result) { 
            var theme = 'office';
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'ChargeId' },
                    { name: 'ChargeDescription' },
                    { name: 'ChargeFrequency' },
                    { name: 'ChargeFrequencyId' },
                    { name: 'VendorName' },
                    { name: 'VendorId' },
                    { name: 'ChargeTypeId' },
                    { name: 'ChargeType' },
                    { name: 'GuestCharge' },
                    { name: 'VendorCharge' }
                ],
                id: 'ChargeId',
                localdata: result,
                updaterow: function (rowid, rowdata, commit) {
                    //UPDATE THE DETAILS OF  Charge Fequency Id 
                    //                    if (selChargeFequencyIndex != undefined && selChargeFequencyIndex != -1) {
                    //                        rowdata.ChargeFrequencyId = selChargeFequencyId;
                    //                        rowdata.ChargeFrequency = selChargeFequency;
                    //                        selChargeFequencyIndex = -1;
                    //                    }
                    // synchronize with the server - send update command
                    if (selChargeFequencyId != null) {
                        rowdata['ChargeFrequencyId'] = selChargeFequencyId;
                    }
                    if (selChargeTypeId != null) {
                        rowdata['ChargeTypeId'] = selChargeTypeId;
                    }
                    if (selVendorId != null) {
                        rowdata['VendorId'] = selVendorId;
                    }
                    var data = "update=true&ChargeId=" + rowdata.ChargeId + "&ChargeDescription=" +
                                                  rowdata.ChargeDescription + "&ChargeFrequency=" + rowdata.ChargeFrequency;
                    data = data + "&ChargeFrequencyId=" + rowdata.ChargeFrequencyId + "&VendorName=" + rowdata.VendorName + "&VendorId=" +
                                              rowdata.VendorId + "&ChargeTypeId='" + rowdata.ChargeTypeId;
                    data = data + "&ChargeType=" + rowdata.ChargeType + "&GuestCharge=" + rowdata.GuestCharge + "&VendorCharge=" +
                                              rowdata.VendorCharge;
                    PageMethods.UpdateDetails(data, OnUpdateComplete);
                    commit(true);
                }
            };
            var dataAdapter = "";
            dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 820,
                height: 200,
                editable: true,
                theme: theme,
                virtualmode: false,
                selectionmode: 'singlecell',
                columns: [
                    {
                        text: 'Charge Description', columntype: 'textbox', datafield: 'ChargeDescription', width: 150, editable: true
                    },
                    {
                        text: 'Charge Frequency', columntype: 'dropdownlist', displayfield: 'ChargeFrequency', datafield: 'ChargeFrequencyId', width: 150,
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: FrequencyDataAdapter, displayMember: 'FrequencyName', valueMember: 'FrequencyId', id: 'ddlFrequency' });
                            editor.on('select', function (event) {
                                var args = event.args;
                                if (args) {
                                    var item = args.item;
                                    selChargeFequencyId = item.value;
                                }
                            });
                        }
                    },
        {
            text: 'Vendor Name', columntype: 'dropdownlist', displayfield: 'VendorName', datafield: 'VendorId', width: 150,
            createeditor: function (row, value, editor) {
                editor.jqxDropDownList({ source: VendorDataAdapter, displayMember: 'vendor_name', valueMember: 'vendor_id' });
                editor.on('select', function (event) {
                    var args = event.args;
                    if (args) {
                        var item = args.item;
                        selVendorId = item.value;
                    }
                });
            }
        },
        {
            text: 'Charge Type', columntype: 'dropdownlist', displayfield: 'ChargeType', datafield: 'ChargeTypeId', width: 120,
            createeditor: function (row, value, editor) {
                editor.jqxDropDownList({
                    source: ChargeTypeDataAdapter, displayMember: 'charge_type', valueMember: 'charge_type_id'
                });
                editor.on('select', function (event) {
                    var args = event.args;
                    if (args) {
                        var item = args.item;
                        selChargeTypeId = item.value;
                    }
                });
            }
        },
        { text: 'Guest Charge', columntype: 'numberinput', datafield: 'GuestCharge', width: 120, cellsalign: 'right' },
        { text: 'Vendor Charge', columntype: 'numberinput', datafield: 'VendorCharge', width: 120, cellsalign: 'right' }
                ]
            });
            $("#PopUpToDisplay").dialog({
                autoOpen: false,
                width: 833,
                height: 275,
                modal: true,
                resizable: false,
                open: function (event, ui) {
                    $("#PopUpToDisplay").css("display", "block"); 
                    $("#jqxgrid").css("display", "block");
                },
                close: function (event, ui) { 
                    $("#jqxgrid").css("display", "none");
                    $("#PopUpToDisplay").css("display", "none");
                }
            });
            $("#PopUpToDisplay").dialog("open");
        }

I’m trying to open this dialog box on two different button click event..

When I open dialog in first click and I have change the data in that grid ,after clicked on second button dialog opens and grid changes remains same but I am setting the default data , even then also data is previously changed data.

Thanks,
J Sampath Kumar

[sampathParticipant]

I got the solution for this

by using below code

 editor.on('select', function (event) {
                                var args = event.args;
                                if (args) {
                                    var item = args.item;
                                    selChargeFequencyId = item.value;
                                }
                            });

[sampathParticipant]

Thank you peter, for answering

How to bind the select function to dropdown list in a jqgrid

I have tried this

text: 'Charge Frequency', columntype: 'dropdownlist', displayfield: 'ChargeFrequency', datafield: 'ChargeFrequencyId', width: 150,
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: FrequencyDataAdapter, displayMember: 'FrequencyName', valueMember: 'FrequencyId', id: 'ddlFrequency' });
                            $('#jqxDropDownList').on('select', function (event) {
                                debugger;
                                var args = event.args;
                                if (args) {
                                    // index represents the item's index.                
                                    var index = args.index;
                                    var item = args.item;
                                    // get item's label and value.
                                    var label = item.label;
                                    var value = item.value;
                                }
                            });
                        }

this not working…..

Mainly I want to get the value of the drop down list when it is change in a grid .

Presently I’m able to get the label but not value of the drop down

Thanks,
J Sampath Kumar

[Author]

Posts