Articles in this section
Category / Section

How to select the content in Grid cells

3 mins read

You can select the content in the cell by disabling “enableTouch” property of Grid. The following code example shows how to select the content in the cell of the Grid.

  1. Render the Grid control.

JS

<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.        
        $("#Grid").ejGrid({
            dataSource: window.gridData, 
            allowPaging: true,
            enableTouch: false,                // To select the content in the cell.
            columns: [
                      { field: "OrderID", headerText: "Order ID", width: 100  },
                      { field: "CustomerID", headerText: "Customer ID", width: 100 },
                      { field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },                      
                      { field: "ShipCountry", headerText: "Ship Country", width: 100 },                      
            ],
    });
    });
</script>

 

MVC

[In View]
@(Html.EJ().Grid<object>("Grid")            
            .Datasource((IEnumerable<object>)ViewBag.data))
            .AllowPaging()
            .EnableTouch(false)          
            .Columns(col =>
            {   
                col.Field("OrderID").HeaderText("OrderID").Width(100).Add();
                col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();                
                col.Field("Freight").Width(100).Format("{0:C}").Add();                
                col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();                
            })
            )
 

 

 

 

 

[Controller]
namespace EJGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var DataSource = OrderRepository.GetAllRecords();
            ViewBag.data = DataSource;
            return View();
        }        
    }
}

 

 

ASP.NET

[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True" EnableTouch=”False" >  
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID"  Width="100"/>                
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100"/>
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="100"/> 
                <ej:Column Field="ShipCountry" HeaderText="Ship Country"  Width="100"/>                
            </Columns>
</ej:Grid>  
 

 

[CS]
public partial class _Default : Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
            this.Grid.DataSource = new NorthwindDataContext().Orders. ToList();
            this.Grid.DataBind();
    }
}

 

 

 

 

 

 

 

The following output is displayed as a result of the above code example.

 

Figure: Select the content in the cell

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied