1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to use new component ComboBox with TreeView and in Grid edit?

How to use new component ComboBox with TreeView and in Grid edit?

Hi , 

1. in ID 131885 thread  you explained me how to use TreeView inside a DrowDown.
Can the same thing be done with the new ComboBox component to searching inside treeview ?

2. In grid, field edit is possible with the new combobox instead of dropdown? 

Thanks

7 Replies
KR Keerthana Rajendran Syncfusion Team January 18, 2018 12:43 PM UTC

Hi Nicola, 
 
Thank you for contacting Syncfusion support. 
 
Query 1: in ID 131885 thread  you explained me how to use TreeView inside a DrowDown. Can the same thing be done with the new ComboBox component to searching inside treeview ? 

Currently we don’t have any samples to integrate treeview with ComboBox and we are working on the development of DropDownTreeView component which will include the searching functionality as per your requirement. This component will be included in our upcoming release Volume 1, 2018 which will be rolled out by the month of February. We will let you know once it has been rolled out. 
 
Query 2: In grid, field edit is possible with the new combobox instead of dropdown?  
 
We have analyzed your query and prepared a sample that can be downloaded from the below link  
 
 
In this sample we have shown the comboBox for one of the column in grid instead of showing as dropdown list while editing. This can be achieved using EditTemplate feature in grid.   
 
Please refer the below code example  
@(Html.EJ().Grid<object>("Grid")  
                   .Datasource(((IEnumerable<object>)ViewBag.dataSource1))  
         ...  
            .Columns(col =>  
            {  
...  
                col.Field("EmployeeID").HeaderText("Employee Name").  
DataSource((IEnumerable<object>)ViewBag.data)  
                 .TextAlign(TextAlign.Left).EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();  
             })  
                    
)   
<script>  
    function create() {  
        return $("<input>");  
    }  
    function read(args) {  
       var val = args.ejComboBox("value");  
       return val;  
    }  
    function write(args) {  
       var obj = $('#Grid').ejGrid('instance');  
        var rowdata = ej.DataManager(args.column[1].dataSource).executeLocal(ej.Query().where("EmployeeID","equal", args.rowdata.EmployeeID));  
         
args.element.ejComboBox({ dataSource: args.column[1].dataSource, width: "100%", fields: { text: "EmployeeID", key: "EmployeeID" }, value: rowdata[0].EmployeeID });//render the combobox inside the write event of editTemplate.  
        args.element.attr("name", "EmployeeID");      //add the name attribute for the element.  
    }  
</script>  
  
Please refer the documentation link  
 
 
Regards, 
Keerthana. 
 


NI Nicola replied to Keerthana Rajendran January 18, 2018 06:07 PM UTC

Hi Nicola, 
 
Thank you for contacting Syncfusion support. 
 
Query 1: in ID 131885 thread  you explained me how to use TreeView inside a DrowDown. Can the same thing be done with the new ComboBox component to searching inside treeview ? 

Currently we don’t have any samples to integrate treeview with ComboBox and we are working on the development of DropDownTreeView component which will include the searching functionality as per your requirement. This component will be included in our upcoming release Volume 1, 2018 which will be rolled out by the month of February. We will let you know once it has been rolled out. 
 
Query 2: In grid, field edit is possible with the new combobox instead of dropdown?  
 
We have analyzed your query and prepared a sample that can be downloaded from the below link  
 
 
In this sample we have shown the comboBox for one of the column in grid instead of showing as dropdown list while editing. This can be achieved using EditTemplate feature in grid.   
 
Please refer the below code example  
@(Html.EJ().Grid<object>("Grid")  
                   .Datasource(((IEnumerable<object>)ViewBag.dataSource1))  
         ...  
            .Columns(col =>  
            {  
...  
                col.Field("EmployeeID").HeaderText("Employee Name").  
DataSource((IEnumerable<object>)ViewBag.data)  
                 .TextAlign(TextAlign.Left).EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();  
             })  
                    
)   
<script>  
    function create() {  
        return $("<input>");  
    }  
    function read(args) {  
       var val = args.ejComboBox("value");  
       return val;  
    }  
    function write(args) {  
       var obj = $('#Grid').ejGrid('instance');  
        var rowdata = ej.DataManager(args.column[1].dataSource).executeLocal(ej.Query().where("EmployeeID","equal", args.rowdata.EmployeeID));  
         
args.element.ejComboBox({ dataSource: args.column[1].dataSource, width: "100%", fields: { text: "EmployeeID", key: "EmployeeID" }, value: rowdata[0].EmployeeID });//render the combobox inside the write event of editTemplate.  
        args.element.attr("name", "EmployeeID");      //add the name attribute for the element.  
    }  
</script>  
  
Please refer the documentation link  
 
 
Regards, 
Keerthana. 
 


Hi Keerthana,

Thank you for your reply.

Q1. perfect I'll wait

Q2.I tried your solution, but I made some changes to achieve my goal.



@(Html.EJ().Grid<object>("Grid")  
                   .Datasource(((IEnumerable<object>)ViewBag.dataSource1))  
         ...  
            .Columns(col =>  
            {  
...  
                col.Field("EmployeeID").HeaderText("Employee Name").                
ForeignKeyField("EmployeeID").ForeignKeyValue("LastName").
DataSource((IEnumerable<object>)ViewBag.data)  
                 .TextAlign(TextAlign.Left).
EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();  
             })  
                    
)   





<script>


    var oldEmployeeID = ""; //variable to store a selected EmployeeID

    function create() {
        return $("<input>");
    }
    function read(args) {
        var val = args.ejComboBox("value");

        if (val == null)  
            val = oldEmployeeID; //assign old value if user insert not maching value

        return val;
    }
    function write(args) {
        obj = $('#Grid').ejGrid('instance');
        var rowdata = ej.DataManager(args.column[1].dataSource).executeLocal(ej.Query().where("EmployeeID", "equal", args.rowdata.EmployeeID));
        args.element.ejComboBox({

            autofill: true,
            allowCustom: false,
            showClearButton:false,
            dataSource: args.column[1].dataSource,
            width: "100%", fields: { text: "LastName", value: "EmployeeID" }, value: rowdata[0].EmployeeID
        });
        oldEmployeeID = rowdata[0].EmployeeID; //store EmployeeID selected
        args.element.attr("name", "EmployeeID");
    }
</script>


This works quite fine, but I have found some problems to use ComboBox 

1. NOT works in unobtrusive mode. I tried to use ComboBox alone also, in unobtrusive mode but doesn't works
  In chrome console debug i found this
  Uncaught TypeError: i.filter is not a function   (ej.web.all.min.js:10)

2. SortOrder.None = Ascending,   SortOrder.Ascending = None, SortOrder.Descending = Descending

3. if AutoFill=true and AllowCustom=false, why is possible to insert a custom text ?

4. if AutoFill=true, why if the text not letter case match , the text is filled but the value is null ? 

KR Keerthana Rajendran Syncfusion Team January 19, 2018 04:07 PM UTC

Hi Nicola, 
 
Thanks for your update 
 
Query 1: NOT works in unobtrusive mode. I tried to use ComboBox alone also, in unobtrusive mode but doesn't works. In chrome console debug i found this 
 
We have made changes to the sample as mentioned in your update and checked by enabling unobtrusive mode in web.config along with the addition of ej.unobtruisve.min.js. And the controls are rendered fine in this mode. Please ensure whether you have referred unobtrusive script in your sample. If possible share us a runnable sample to reproduce the issue in our end along with product version and jquery version details so that it will be helpful for us to validate. 
 
Query 2:  SortOrder.None = Ascending,   SortOrder.Ascending = None, SortOrder.Descending = Descending 
 
By default, combobox will be rendered with SortOrder.None and the items will be loaded based on the order in which they are included within combobox. In the  provided sample, the items in combobox are already loaded with ascending order hence it  seems to be SortOrder.Ascending. Kindly refer to the below sample for clear understanding on working of sortOrder property. 
 
 
In the sample the second item is Tennis and this will remain the same by default. When sortOrder is ascending this will be ordered accordingly. 
 
Query 3: If AutoFill=true and AllowCustom=false, why is possible to insert a custom text ? 
 
When allowCustom is set to false , the custom text will be present within combobox until the control has been focused out. Once focus out, the combobox will load its previous value in the sample. 
 
Please check this scenario with the previously provided sample. 
 
Query 4: .If AutoFill=true, why if the text not letter case match , the text is filled but the value is null ?  
 
We have confirmed “Value is not set once focus out when casing changes” as a defect and logged defect report. This fix will be included in our upcoming Volume 1, 2018 release.  
 
Regards, 
Keerthana. 
 


NI Nicola replied to Keerthana Rajendran January 19, 2018 06:47 PM UTC

Hi Nicola, 
 
Thanks for your update 
 
Query 1: NOT works in unobtrusive mode. I tried to use ComboBox alone also, in unobtrusive mode but doesn't works. In chrome console debug i found this 
 
We have made changes to the sample as mentioned in your update and checked by enabling unobtrusive mode in web.config along with the addition of ej.unobtruisve.min.js. And the controls are rendered fine in this mode. Please ensure whether you have referred unobtrusive script in your sample. If possible share us a runnable sample to reproduce the issue in our end along with product version and jquery version details so that it will be helpful for us to validate. 
 
Query 2:  SortOrder.None = Ascending,   SortOrder.Ascending = None, SortOrder.Descending = Descending 
 
By default, combobox will be rendered with SortOrder.None and the items will be loaded based on the order in which they are included within combobox. In the  provided sample, the items in combobox are already loaded with ascending order hence it  seems to be SortOrder.Ascending. Kindly refer to the below sample for clear understanding on working of sortOrder property. 
 
 
In the sample the second item is Tennis and this will remain the same by default. When sortOrder is ascending this will be ordered accordingly. 
 
Query 3: If AutoFill=true and AllowCustom=false, why is possible to insert a custom text ? 
 
When allowCustom is set to false , the custom text will be present within combobox until the control has been focused out. Once focus out, the combobox will load its previous value in the sample. 
 
Please check this scenario with the previously provided sample. 
 
Query 4: .If AutoFill=true, why if the text not letter case match , the text is filled but the value is null ?  
 
We have confirmed “Value is not set once focus out when casing changes” as a defect and logged defect report. This fix will be included in our upcoming Volume 1, 2018 release.  
 
Regards, 
Keerthana. 
 


Hi Keerthana,

Thanks for your update

Query 1: 
OK sorry the ComboBox inside Grid works fine in unobtrusive mode because a javascript cobobox is added but don't works if I use a strongly typed helper in the view. 
In your sample try to add this 

<div class="control">
        @{
            Html.EJ()
                .ComboBox("select")
                .Width("100%")
                .AutoFill()
                .AllowCustom(false)
                .Datasource((IEnumerable<EmployeeModel>)ViewBag.data)
                .ComboBoxFields(f => f.Text("FirstName").Value("EmployeeID"))
                .Placeholder("Select")  
                .SortOrder(SortOrder.None)
                .Render();
        } 
    </div> 

The control is rendered fine , but when I try to select something I obtain this error in debuger console 

dataSource.filter is not a function

In NON unobtrusive mode, works fine.

Query 2  & Query 3:

The problem is present if use the strongly type helper , try whit previous code 

Query 4:

OK I'll wait



KR Keerthana Rajendran Syncfusion Team January 22, 2018 12:39 PM UTC

Hi Nicola, 
 
Sorry for the inconvenience. 
 
We were able to reproduce the reported issues with razor code as mentioned in your update. We have confirmed this as a defect and logged defect report. The fix  for all  these issues will be included in our Volume 1, 2018 which will be rolled out by the month of February.  
 
Regards, 
Keerthana. 


NI Nicola January 22, 2018 01:21 PM UTC

Thanks a lot, I'll wait for the update.

Regards,
Nicola

KR Keerthana Rajendran Syncfusion Team January 23, 2018 05:43 AM UTC

Hi Nicola, 
 
Thanks for the update. We will let you know once Volume 1, 2018 has been rolled out. 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon