Remotesearch with cascading combobox in Grid

[raniParticipant]

Hi,

I have one requirement in my project where i need to implement cascading combobox(3 combobox) with remotesearch and i almost done with cascading combobox but the problem is how to implement remotesearch with cascading combobox and its functionality ..will you please provide one sample on it…

thanks & regards,
rani.

[Peter StoevKeymaster]

Duplicate Post: http://www.jqwidgets.com/community/topic/remotesearch-cascading-combobox-in-grid/

[raniParticipant]

This is below design code for Grid….

$(“#IngestGrid”).jqxGrid(
{
width: ‘99.5%’,
source: source,
// pageable: true,
height: 550,
theme: ‘arctic’,
sortable: true,
altrows: true,
enabletooltips: true,
columnsresize: true,
columnsreorder: true,
//editmode: ‘selected cell click’,
localization: getLocalization(),
selectionmode: ‘singlecell’,
//selectionmode: ‘multiplecellsadvanced’,
editable: true,
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
var changeval = false;
if (key == 27) {

return true;
}
if (key == 13)
{
console.log(“key= ” + key);
//$(“#Customer, #Title”).on(‘select’, function (event) {
// var datafield = event.target.id;
// console.log(“datafield= ” + datafield);
// $(“#IngestGrid”).jqxGrid(‘setcolumnproperty’, datafield, ‘editable’, true);
//});

$(“#IngestGrid”).jqxGrid(‘setcolumnproperty’, ‘Customer’, ‘editable’, true);

$(‘#IngestGrid’).on(‘cellbeginedit’, function (event) {
$(“#IngestGrid”).jqxGrid(‘setcolumnproperty’, ‘Customer’, ‘editable’, true);
});

return true;
}
},

columns: [

{
text: ”, datafield: ‘IsChecked’, columntype: ‘checkbox’, checked: false, editable: true, pinned: true, width: ‘2%’, sortable: false//, cellsrenderer: cellsrenderer
},
{ text: ‘Filename’, datafield: ‘FileName’, width: ‘14%’, editable: false, pinned: true },
{ text: ‘Size’, datafield: ‘Size’, width: ‘8%’, editable: false, pinned: true, sortable: false },
{ text: ‘Ext’, datafield: ‘Extension’, width: ‘8%’, editable: false, pinned: true, sortable: false },
{ text: ‘Type’, datafield: ‘AssetType’, width: ‘12%’, editable: false, sortable: false },

///Customer
{
text: ‘Customer’, datafield: ‘Customer’, width: ‘12%’, columntype: ‘combobox’,
cellbeginedit: Customer_cellbeginedit,
createeditor: CreateEditorForCustomer1,
initeditor: initeditorforCustomer,
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
_editingRowIndex = row;
if (newvalue != oldvalue) {
$(“#IngestGrid”).jqxGrid(‘setcellvalue’, row, “Title”, “Select Title…”);
};
},
geteditorvalue: Customer_GetEditorValue

},
///Title
{
text: ‘Title’, datafield: ‘Title’, width: ‘12%’, columntype: ‘combobox’, sortable: false,
cellbeginedit: Title_cellbeginedit,
createeditor: CreateEditorForTitle1,
initeditor: initeditorforTitle1,
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
_editingRowIndex = row;
if (newvalue != oldvalue) {
$(“#IngestGrid”).jqxGrid(‘setcellvalue’, row, “EpisodeTitle”, “Select EpisodeTitle…”);
}
},
geteditorvalue: Title_GetEditorValue

},
{
text: ‘Ep.Title’, datafield: ‘EpisodeTitle’, width: ‘12%’, columntype: ‘combobox’, sortable: false, //autoDropDownHeight: true,
cellbeginedit: EpisodeTitle_cellbeginedit, createeditor: CreateEditorForEPTitle1, initeditor: initeditorForEPTitle1,

geteditorvalue: EpisodeTitle_GetEditorValue

},
{
text: ‘Ep.#’, datafield: ‘EpisodeNumber’, width: ‘6%’, sortable: false, editable: false, cellbeginedit: EpisodeNumber_cellbeginedit, columntype: ‘numberinput’,
validation: NumberValidation,
createeditor: function (row, column, editor) {
editor.jqxNumberInput({ min: 1, inputMode: ‘simple’ });
}
},
{
////Language
text: ‘Language’, datafield: ‘Language’, columntype: ‘combobox’, sortable: false,
cellbeginedit: Language_cellbeginedit,
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
InitializeLanguagesDataAdapter();
_editingRowIndex = row;
editor.jqxComboBox({ dropDownHeight: 250, source: [], displayMember: ‘Name’, valueMember: ‘PKLanguageID’, searchMode: ‘containsignorecase’, autoComplete: true });
},
initeditor: function (row, column, editor) {
_editingRowIndex = row;

},
geteditorvalue: Language_GetEditorValue
}
]
});

var Title_cellbeginedit = function (row, datafield, columntype, value) {

_editingRowIndex = row;
//$(‘#IngestGrid’).jqxGrid(‘setcolumnproperty’, datafield, ‘width’, ‘20%’);
var _editingRow = $(“#IngestGrid”).jqxGrid(‘getrowdata’, row);

if (_editingRow.Customer == undefined) {
value = “”;
ShowErrorNotifyMessage(‘Please select Customer…’);
return false;
}
else if (_editingRow.Customer.trim().length == 0) {
value = “”;
ShowErrorNotifyMessage(‘Please select Customer…’);
return false;
}

if (_editingRow.CustomerMetaData.PKCustomerID != 0) {
value = “”;
_pKCustomerID = _editingRow.CustomerMetaData.PKCustomerID;
GetCustomerTitles(_pKCustomerID, null, null);

//$(“#comboboxeditorIngestGridTitle”).jqxComboBox(‘searchString’, value);
}
}

 function CreateEditorForTitle1(row, column, editor) {
        // assign a new data source to the dropdownlist.
        _editingRowIndex = row;

        editor.jqxComboBox({   //autoDropDownHeight: true,
            dropDownHeight: '250px', displayMember: 'FeatureSeriesTitle', valueMember: 'PKTitleID', searchMode: 'containsignorecase', autoOpen: true,
            autoComplete: true //enableSelection: true, enableHover: true,
        });
        editor.on("change", function (event) {

            var titleId = editor.val();
            if ($.type(titleId) == "number") {
                var _selectedItem = editor.jqxComboBox('getSelectedItem');//.originalItem
                $("#comboboxeditorIngestGridTitle").jqxComboBox('val', _selectedItem.label);
                AssignTitleMetaData2(_selectedItem);
                isChanged = true;
            }
        });
        editor.on("close", function (event) {

            //var _editingRow = $("#IngestGrid").jqxGrid("getrowdata", _editingRowIndex);
            //var bgcolor = $("#row" + _editingRow.uid + "IngestGrid div:nth-child(9)").css("background-color");
            ////var bgcolor1 = $("#row" + _editingRow.uid + "IngestGrid div:nth-child(8)").css("background-color");
            //var t = $("#row" + _editingRow.uid + "IngestGrid div:nth-child(8)").text();

            //if (t == "") {
            //    var titleId = editor.val();
            //    var _editingRow = $("#IngestGrid").jqxGrid("getrowdata", _editingRowIndex);
            //    if (_editingRow.EpisodeTitle == null) {
            //        var _isEmpty = true;
            //    }
            //    _editingRow.EpisodeNumber = null;
            //    _editingRow.EpisodeTitle = null;
            //    if ($.type(titleId) == "number") {
            //        var _selectedItem = editor.jqxComboBox('getSelectedItem');//.originalItem
            //        $("#comboboxeditorIngestGridTitle").jqxComboBox('val', _selectedItem.label);
            //    }
            //    $("#row" + _editingRow.uid + "IngestGrid div:nth-child(9)").text('');
            //    $("#row" + _editingRow.uid + "IngestGrid div:nth-child(8)").text('');
            //    if (!_isEmpty && isChanged) {
            //        $("#IngestGrid").jqxGrid('updaterow', _editingRowIndex, _editingRow);
            //        isChanged = false;
            //    }
            //    //$('#IngestGrid').jqxGrid('updating');
            //    //$("#IngestGrid").jqxGrid("updating");
            //}
        });
    }
    function initeditorforTitle1(row, column, editor) {
        _editingRowIndex = row;

        var editingRow = $("#IngestGrid").jqxGrid("getrowdata", _editingRowIndex);
        if (editingRow != null && editingRow.CustomerMetaData.PKCustomerID != undefined) {
            if (editingRow.CustomerMetaData.PKCustomerID != 0) {
                _pKCustomerID = editingRow.CustomerMetaData.PKCustomerID;
                //console.log(editor.val() + "," + editingRow.Title);
                editor.val('');
                if (editingRow.Title == undefined) {

                    editor.val('');
                    setTimeout(function () {
                        $("#comboboxeditorIngestGridTitle").jqxComboBox('val', '');
                    }, 500);
                }
                if ($.type(editor.val()) != "number") {
                    editor.val('');
                }

                //GetCustomerTitles(_pKCustomerID, null, editor);

                AssignTitlesToEditor();

            }
            else {
                editor.jqxComboBox({ source: [] });
            }
        }
        else {
            editor.jqxComboBox({ source: [] });
        }
    }

[Peter StoevKeymaster]

Hi rani,

Please, post a sample in JSFiddle so we can test your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts