We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show different information in Dropdown depending of the level of the row??

Thread ID:

Created:

Updated:

Platform:

Replies:

129293 Mar 10,2017 12:53 AM UTC Mar 13,2017 08:36 AM UTC ASP.NET MVC 3
loading
Tags: TreeGrid
Alberto Barrera
Asked On March 10, 2017 12:53 AM UTC


How can I display other information in the Dropdown when I start editing the cell?

Here is my code:

@{
    var opt = new Syncfusion.JavaScript.Models.DropDownListProperties();
    opt.DataSource = ViewBag.Types;
    opt.DropDownListFields.Text = "Name";
    opt.DropDownListFields.Value = "Name";
}

@(Html.EJ().TreeGrid("TreeGridDomainAccess")
           .Datasource(ds => ds.Json(ViewBag.DomainAccess)
            .InsertURL("/DomainAccess/Insert").Adaptor(AdaptorType.RemoteSaveAdaptor))
           .AllowFiltering(true)
           .AllowSorting(true)
           .FilterSettings(filter => filter.FilterType(TreeGridFilterType.Menu))
           .Locale("es-MX")
           .IdMapping("Id")
           .ParentIdMapping("IdParent")
           .ChildMapping("Children")
           .TreeColumnIndex(2)
           .IsResponsive(true)
           .ToolbarSettings(tool =>
           {
               tool.ShowToolbar(true);
               tool.ToolbarItems(new List<TreeGridToolBarItems>()
               {
               TreeGridToolBarItems.Add, TreeGridToolBarItems.Edit,
               TreeGridToolBarItems.Delete, TreeGridToolBarItems.Update,
               TreeGridToolBarItems.Cancel, TreeGridToolBarItems.ExpandAll,
               TreeGridToolBarItems.CollapseAll,
               });
           })
           .EditSettings(edit =>
           {
               edit.AllowEditing(true);
               edit.AllowAdding(true);
               edit.AllowDeleting(true);
               edit.EditMode(TreeGridEditMode.CellEditing);
           })
           .Columns(column =>
           {
               column.Field("Id").HeaderText("ID").EditType(TreeGridEditingType.String).Visible(false).Add();
               column.Field("IdParent").HeaderText("ID Parent").Visible(false).Add();
               column.Field("Name").HeaderText("Nombre").HeaderTextAlign(TextAlign.Center).Add();
               column.Field("Attributes").HeaderText("Atributos").HeaderTextAlign(TextAlign.Center).Add();
               column.Field("Type").EditType(TreeGridEditingType.Dropdown).DropDownData(opt.DataSource).DropDownEditOptions(opt).HeaderText("Tipo").HeaderTextAlign(TextAlign.Center).Add();
           })
       .ContextMenuSettings(cms => cms.ShowContextMenu(true)
            .ContextMenuItems(new List<TreeGridContextMenuItems>()
            {
                TreeGridContextMenuItems.Add,TreeGridContextMenuItems.Edit,TreeGridContextMenuItems.Delete
            }))
)

Any ideas on how to do that?

Jayakumar Duraisamy [Syncfusion]
Replied On March 10, 2017 12:43 PM UTC

Hi Alberto, 
Thanks for contacting Syncfusion support. 
We can load different data source for dropdown control on editing the dropdown columns. This can be achieved this by using “BeforePopShown” client side event in dropdown list control. 
We can bind this event by using “DropDownEditOptions” in TreeGrid column property. 
In handler function we can update the data source of dropdown list control by using setModel method. 
Please refer following code snippet, 
@{ 
    var opt = new Syncfusion.JavaScript.Models.DropDownListProperties(); 
    opt.DataSource = ViewBag.dropData; 
    opt.DropDownListFields.Text = "text"; 
    opt.DropDownListFields.Value = "value"; 
    opt.BeforePopupShown = "beforeOpen"; // Client side event 
    } 
 
@(Html.EJ().TreeGrid("TreeGridContainer") 
 
//… 
) 
 
@(Html.EJ().ScriptManager()) 
    <script type="text/javascript"> 
         
        function beforeOpen(args) { 
            var treegridObj = $("#TreeGridContainer").data("ejTreeGrid"); 
            record = treegridObj.model.selectedItem, 
            dataSource = args.model.dataSource; 
            data = [];            
            if (record.level == 0) 
                data = dataSource.slice(0, 4); 
            else if (record.level == 1) 
                data = dataSource.slice(4, 8); 
            else if (record.level == 2) 
                data = dataSource.slice(8, 12); 
            this.setModel({"dataSource": data}); // Update new data in the dropdown list 
        }        
    </script> 
 
We have prepared a sample for your reference, In this sample we have modified the dropdown data with respect to level of TreeGrid record. 
Please find the sample from below location. 
Please let us know if you require more assistance on this. 
Regards, 
Jayakumar D 


Alberto Barrera
Replied On March 11, 2017 12:54 AM UTC

It worked correctly!

Thanks for your quick support.

Jayakumar Duraisamy [Syncfusion]
Replied On March 13, 2017 08:36 AM UTC

Hi Alberto,  
We are glad to know that your issue has resolved. 
Please let us know if you require further assistance on this. 
Regards, 
Jayakumar D 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;