$( "#grdTrading" ).kendoGrid( {
dataSource: grddataSource, // static data source
scrollable: true,
height: 180,
columns: [
"Code", "Level",
{
field: "Flag",
template: "#=Flag.Name#",
width: "150px",
editor: TradingDropDownEditor
}
],
editable: true,
sortable: true,
selectable: true
} );
function TradingDropDownEditor( container, options )
{
$( '<input data-text-field="Name" data-value-field="FlagID" id="Category" data-bind="value:' + options.field + '"/>' ).appendTo( container ).kendoDropDownList( {
autoBind: false,
change: function ( e )
{
var grid = $( "#grdTrading" ).data( "kendoGrid" );
var dataItem = null;
grid.select().each( function ( e )
{
dataItem = grid.dataItem( $( this ) );
var id = dataItem.Code;
var DropdownText = dataItem.Flag.Name;
alert( DropdownText );
if ( id == "ABC" && DropdownText == "No" )
{
//Adding dropdown to the second grid
AssociatedData = [{ text: "No", value: "No"}];
$( "#grdAssociated" ).find( "#ddlAssoPort" ).kendoDropDownList( {
dataTextField: "text",
dataValueField: "value",
autoBind: true,
enable: false,
dataSource: AssociatedData
} );
}
else
{
return;
}
} );
},
dataSource: ddlFlag
} );
}
I am able to add the dropdown but on change event if I select the dropdown it vanishes the the dropdown in the other grid.
Please look at the code and please help..!