aurelia-ui-toolkits / aurelia-syncfusion-bridge

27 stars 21 forks source link

Dropdown Column #58

Closed sp00ky closed 7 years ago

sp00ky commented 7 years ago

Is it possible to define a dropdown column using the bridge? Something like the following, except in the markup provided by the bridge:

{ field: "Permission", headerText: "Permission", editType: "dropdownedit", dataSource: dropData, editParams: {fields: {text: "Display", value: "Value"}} }

I've tried the following:

<ej-column e-field="record_status_id" e-header-text="Status" e-text-align="left" e-edit-type="dropdownedit" e-data-source="statuses" e-edit-params="statusParams"></ej-column>

where statusParams is defined on my aurelia component as follows:

statusParams: { fields: {text: 'description', value: '_id' }};

I get the following error:

Error: ej.DropDownList: function/property - statusParams does not exist

karthickthangasamy commented 7 years ago

@sp00ky The dataSource and editParams properties needs to be bind (e-edit-params.bind="statusParams" e-data-source.bind="statuses") from Aurelia view-model to achieve the requirement. Refer to the below code example.

grid.html

<ej-grid e-data-source.bind="gridData" e-allow-paging="true" e-min-width="300" e-allow-sorting="false" e-is-responsive="true" e-allow-scrolling="true" 
   e-edit-settings.bind="edit" e-toolbar-settings.bind="toolbar" > 
    <ej-column e-header-text="Unique ID" e-is-primary-key=true e-field="OrderID"></ej-column> 
                   .  .  . 
    <ej-column e-header-text="Priority" e-field="EmployeeID" e-edit-type="dropdownedit"  e-edit-params.bind="statusParams" e-data-source.bind="statuses" ></ej-column> 

</ej-grid> 

grid.js

export class Grid { 

constructor() { 

    this.ej = ej; 
    this.edit = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
    this.toolbar = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }; 
   this.statusParams= {fields: {text: 'description', value: '_id' }}; 
       this.statuses=[ 
             { description: 'ListItem1', _id:"12"},  
             { description: 'ListItem2',_id:"23" },  
             { description: 'ListItem3',_id:"34" }, 
             { description: 'ListItem4',_id:"45" },  
             { description: 'ListItem5',_id:"56"} 
       ]; 
    this.gridData = [{ 

      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 

      OrderDate: new Date(8364186e5), Freight: 32.38 

    }, 
   ] 
} 
sp00ky commented 7 years ago

Thanks so much! That did the trick. I really appreciate the work you guys have done on the bridge. It's a very useful tool.