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.

ComboBox for Grid?

Thread ID:

Created:

Updated:

Platform:

Replies:

128123 Jan 3,2017 04:09 PM Jan 4,2017 06:15 AM ASP.NET MVC 1
loading
Tags: Grid
Michael Lambert
Asked On January 3, 2017 04:09 PM

I need to use a ComboBox in the grid as opposed to a DropDownList (Though the user will usually choose from the list, they need to be able to enter free form text).  How is this accomplished using inline editing in the Grid?

Mike

Mani Sankar Durai [Syncfusion]
Replied On January 4, 2017 06:15 AM

Hi Michael, 


Thanks for contacting Syncfusion support. 


We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 



In this sample we have achieved your requirement by using EditTemplate property of columns in grid. In EditTemplate we have rendered Autocomplete control. Also we have enabled the property as showPopupButton to view it as dropdown. 


Please refer the below code example. 

[Index.cshtml] 
@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .AllowPaging() 
                           ...                    
            .Columns(col => 
            {               ... 
                col.Field("CustomerID").HeaderText("CustomerID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(100).Add(); 
}) 
            
) 
 
<script type="text/javascript"> 
    function create() { 
        return $("<input>"); 
    } 
    function write(args) { 
        obj = $('#FlatGrid').ejGrid('instance'); 
        var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID")); 
        args.element.ejAutocomplete({ width: "100%", dataSource: data,showPopupButton: true , enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 
    } 
    function read(args) { 
        return args.ejAutocomplete("getValue"); 
    } 
</script> 


Also please refer the documentation link. 


Online sample link about EditTemplate, 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


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.

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.

;