Category / Section
How to select records based on the primarykey value?
1 min read
This knowledge base explains how to select the records based on the primaryKey values.
Solution:
To achieve this requirement, we have to use getCurrentViewData and selectRows methods of ejGrid.
In dropdown we have bind the primaryKey values as a dataSource and based on the dropdown value the records will be selected in Grid.
The following code example explains that how the records will be selected based on the primaryKey values.
1. Render the Grid as follows.
HTML
<div id="Grid"></div> <input type="text" id="selectCar" /> <div id="carsList"> <ul> <li>10248</li> <li>10249</li> <li>10250</li> <li>10251</li> <li>10252</li> </ul> </div>
JS
<script type="text/javascript">
$(function () {
$('#selectCar').ejDropDownList({
targetID: "carsList",
watermarkText: "Select a ID",
width: 200,
change: "drpvaluechange",
});
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 90 },
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", width: 90 },
{ field: "ShipCity", headerText: "Ship City", width: 90 }
]
});
});
MVC
@(Html.EJ().DropDownList("selectCar")
.TargetID("carsList")
.Width("200")
.WatermarkText("Select a ID")
.ClientSideEvents(eve => eve.Change("drpvaluechange")))
<div id="carsList">
<ul>
<li>10248</li>
<li>10249</li>
<li>10250</li>
<li>10251</li>
<li>10252</li>
</ul>
</div>
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
})
)
ASP
<ej:DropDownList ID="selectCar" runat="server" WatermarkText="Select a ID" Width="200" ClientSideOnChange="drpvaluechange"> <Items> <ej:DropDownListItem Text="10248" Value="10248"></ej:DropDownListItem> <ej:DropDownListItem Text="10249" Value="10249"></ej:DropDownListItem> <ej:DropDownListItem Text="10250" Value="10250"></ej:DropDownListItem> <ej:DropDownListItem Text="10251" Value="10251"></ej:DropDownListItem> <ej:DropDownListItem Text="10252" Value="10252"></ej:DropDownListItem> </Items> </ej:DropDownList> <ej:Grid ID="Grid" runat="server" AllowPaging="True" ClientIDMode="Static"> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="90" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" /> </Columns> </ej:Grid>
CORE
<ej-drop-down-list id="selectCar" target-id="carsList" width="200" watermark-text="Select a ID" change="drpvaluechange"></ej-drop-down-list> <div id="carsList"> <ul> <li>10248</li> <li>10249</li> <li>10250</li> <li>10251</li> <li>10252</li> </ul> </div> <ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource"> <e-columns> <e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="90"></e-column> <e-column field="CustomerID" header-text="Customer ID" width="90"></e-column> <e-column field="EmployeeID" header-text="Employee ID" width="90"></e-column> <e-column field="ShipCity" header-text="Ship City" width="90"></e-column> </e-columns> </ej-grid>
Angular
<input id="dropdown1" ej-dropdownlist [dataSource]="customers" (ejchange)="onChange($event)" /> <ej-grid #grid [allowPaging]="true" [dataSource]="gridData"> <e-columns> <e-column field="OrderID" headertext="Order ID" [isPrimaryKey]="true" width="90"></e-column> <e-column field="CustomerID" headertext="Customer ID" width="90"></e-column> <e-column field="EmployeeID" headertext="EmployeeID" width="90"></e-column> <e-column field="ShipCity" headertext="ShipCity" width="90"></e-column> </e-columns> </ej-grid>
TS
export class GridComponent {
public gridData: any;
@ViewChild("grid") Grid :any;
public customers: any;
constructor() {
this.gridData = (window as any).gridData;
this.customers = [
{ text: 10248, value: 10248 }, { text: 10249, value: 10249 }, { text: 10250, value: 10251 },
{ text: 10252, value: 10252 }
];
}
onChange(args:any){
var grid = this.Grid.widget;
var data = grid.getCurrentViewData();
var rec = data.filter(function(e) {
return e.OrderID == parseInt(args.text);
})[0];
var inx = data.indexOf(rec);
grid.selectRows(inx);
}
}
2. In dropdownChange event we get the currentViewData and from the currentViewData we found the index using javascript filter method.
Using the index, we select the row element using selectRows method of ejGrid.
<script type="text/javascript">
function drpvaluechange(args) {
var gridObject = $("#Grid").ejGrid("instance");
//get current data
var data = gridObject.getCurrentViewData();
var rec = data.filter(function (e) {
return e.OrderID == parseInt(args.selectedText);
})[0];
var inx = data.indexOf(rec);
gridObject.selectRows(inx);
}
</script>
Result:
Figure: Based on dropdown value(PrimaryKey) the grid row has been selected.
