How to change the dataSource for the checkbox list in JavaScript Grid?
You can change the datasource/query for the checkbox list in excel filter using ActionBegin event of Grid. The following code example shows how to change the datasource in excel Filtering of Grid.
- Render the Grid control.
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowFiltering: true,
filterSettings: { filterType: "excel" },
columns: [
{ field: "OrderID", headerText: "Order ID"},
{ field: "CustomerID", headerText: "Customer ID"},
{ field: "Freight", width: 100, format: "{0:C}" },
{ field: "ShipCountry", headerText: "Ship Country"},
{field: "ShipCity", headerText: "Ship City"}
],
actionBegin: "begin"
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Excel); }
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("Freight").Format("{0:C}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
.ClientSideEvents(eve=>eve.ActionBegin("begin")))
[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="OrdersGrid" runat="server" AllowPaging="True" AllowFiltering="True" >
<FilterSettinga FilterType="Excel" />
<ClientSideEvents ActionBegin="begin" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}}
2. You can change the dataSource/query in the actionBegin event. In the below we have modified the excel filter query by adding a take query. Here checkbox list datasource show depends upon take query value.
JS
function begin(args) {
if(args.requestType == "filterchoicerequest")
args.query.take(5);
}
Figure 1: Excel filter with query modified.
Conclusion
I hope you enjoyed learning about how to change the dataSource for the checkbox list in JavaScript Grid.
You can refer to our JavaScript
Grid feature tour
page to know about its other groundbreaking feature representations and documentation, and
how to quickly get started for configuration specifications.
You can also explore our JavaScript
Grid example
to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
