How to select or highlight rows based on data?
Solution
In JavaScript Grid, you can select or highlight rows based on data using the queryCellInfo event or can also select a row using an external button click event.
The queryCellInfo is triggered every time a request is made to access particular cell information, element and data.
In the argument of the queryCellInfo event, you can obtain the following details.
Name | Description |
cell | Returns Grid cell |
cancel | Returns the cancel option value |
data | Returns current row record object |
text | Returns the text value in the cell |
column | Returns the column object |
foreignkeydata | Returns the foreignkey record object |
model | Returns the grid model |
type | Returns the name of the event |
By comparing the value obtained from the argument of the queryCellInfo event, you can select the corresponding data rows using the selectRows() method of the Grid.
Example:
In the following example, the records based on the field EmployeeID are highlighted/selected.
- Render the Grid.
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
{ field: "CustomerID", headerText: 'Customer ID'},
{ field: "EmployeeID", headerText: 'Employee ID' },
{ field: "Freight", headerText: 'Freight', format: "{0:C}" },
{ field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}" },
{ field: "ShipCountry", headerText: "Ship Country" },
{ field: "ShipCity", headerText: 'Ship City'}
],
create: "create",
queryCellInfo: "queryCellInfo"
});
})
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.datasource))
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").Format("{0:c}").Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
.ClientSideEvents(eve=>eve.Create("create").QueryCellInfo("queryCellInfo"))
)
ASP.NET
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<ClientSideEvents QueryCellInfo=" queryCellInfo" Create="create"/>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
- In the queryCellInfo event, custom Css to the rows with EmployeeID greaterThan 3 and lessThan 6 is applied.
JS
function queryCellInfo(args) {
if (args.column.field == "EmployeeID" && args.data.EmployeeID > 3 && args.data.EmployeeID < 6)
$($(args.cell).parent()).css("backgroundColor", "yellow").css("color","red");/*custom css applied to the row */
}
- In order to select the rows based on the value/data in the Grid, you can use the selectRows method and pass the index of the row as argument.
JS
function queryCellInfo(args) {
if (args.column.field == "EmployeeID" && args.data.EmployeeID == 3) {
this.selectRows($($(args.cell).parent()).index());
this.multiSelectCtrlRequest = true; //multiSelectCtrlRequest variable is set as true for persisting the multiple selection in grid
}
}
function create(args) { //create event of the grid
var index = this._selectedRow();
this.selectRows(index); //Passing the index of the selected row to the selectRows method
}
- In order to select the rows based on a data externally using a button, you can use the selectRows method within the click event of the button.
JS
function select(args) {//external button click event
var obj = $("#Grid").data("ejGrid");
obj.clearSelection();//the selection is cleared before selecting rows on button click
if ($("#empId").val() != "") {
var val = $("#empId").val();
for (var i = 0; i < obj.model.currentViewData.length; i++) {
if (obj.model.currentViewData[i].EmployeeID == val) {
obj.selectRows(i);
obj.multiSelectCtrlRequest = true;
}
}
}
}
Figure 1: Select/ highlight rows based on the data on row/grid
Figure 2: Select rows dynamically based on data on row/grid
Conclusion
I hope you enjoyed learning about how to select or highlight rows based on data in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations. You can also explore our JavaScript Grid documentation to understand how to present and manipulate data.
For current customers, you can check out our JavaScript 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 JavaScript Grid and other JavaScript components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
