This is a migrated thread and some comments may be shown as answers.

In Place Edit Mode Filtering

1 Answer 146 Views

Grid

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 12 Mar 2012, 04:51 PM

Janaki:

You can configure a RadGrid that uses EditMode="InPlace" to also have a filtering functionality by setting the property: AllowFilteringByColumn="True".

Here's some demo code that has inline edit mode that is initiated by double-clicking the row. It also has filtering by column.

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadCodeBlock runat="server" ID="radCodeBlock">

<script type="text/javascript">

<!--

var hasChanges, inputs, dropdowns, editedRow;

function RowClick(sender, eventArgs) {

if (editedRow && hasChanges) {

hasChanges = false;

if (confirm("Update changes?")) {

$find("<%= RadGrid1.ClientID %>").get_masterTableView().updateItem(editedRow);

}

function RowDblClick(sender, eventArgs) {

editedRow = eventArgs.get_itemIndexHierarchical();

$find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);

}

function GridCommand(sender, args) {

if (args.get_commandName() != "Edit") {

editedRow = null;

}

function GridCreated(sender, eventArgs) {

var gridElement = sender.get_element();

var elementsToUse = [];

inputs = gridElement.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var lowerType = inputs[i].type.toLowerCase();

if (lowerType == "hidden" || lowerType == "button") {

continue;

}

Array.add(elementsToUse, inputs[i]);

inputs[i].onchange = TrackChanges;

}

dropdowns = gridElement.getElementsByTagName("select");

for (var i = 0; i < dropdowns.length; i++) {

dropdowns[i].onchange = TrackChanges;

}

setTimeout(function () { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);

}

function TrackChanges(e) {

hasChanges = true;

}

function showFilterItem() {

$find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();

}

function hideFilterItem() {

$find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();

}

-->

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid AutoGenerateColumns="False" ID="RadGrid1" DataSourceID="SqlDataSource1"

Width="760px" AllowFilteringByColumn="True" AllowSorting="True"

PageSize="15" ShowFooter="True" AllowPaging="True" runat="server"

GridLines="None" EnableLinqExpressions="False" CellSpacing="0">

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"

ShowFooter="True" TableLayout="Auto">

<Columns>

<telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"

UniqueName="OrderID" FilterControlWidth="40px" AutoPostBackOnFilter="false" CurrentFilterFunction="equalto" FilterDelay="4000" ShowFilterIcon="false">

</telerik:GridNumericColumn>

<telerik:GridBoundColumn FilterControlWidth="105px" DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName"

UniqueName="ShipName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn FilterControlWidth="50px" DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate"

UniqueName="OrderDate" PickerType="None" DataFormatString="{0:d}">

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn FilterControlWidth="120px" DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate"

UniqueName="ShippedDate" PickerType="DatePicker" DataFormatString="{0:D}">

<HeaderStyle Width="160px" />

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn FilterControlWidth="50px" DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry"

UniqueName="ShipCountry">

</telerik:GridBoundColumn>

<telerik:GridMaskedColumn FilterControlWidth="50px" DataField="ShipPostalCode" HeaderText="ShipPostalCode"

SortExpression="ShipPostalCode" UniqueName="ShipPostalCode" Mask="#####">

<FooterStyle Font-Bold="true" />

</telerik:GridMaskedColumn>

<telerik:GridNumericColumn HeaderStyle-Width="90px" FilterControlWidth="50px" DataField="Freight" DataType="System.Decimal" HeaderText="Freight"

SortExpression="Freight" UniqueName="Freight" Aggregate="Sum">

<FooterStyle Font-Bold="true" />

</telerik:GridNumericColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick"

OnGridCreated="GridCreated" OnCommand="GridCommand" />

</ClientSettings>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1"

ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT * FROM [Orders]" runat="server">

</asp:SqlDataSource>

</form>

</body>

</html>

See this demo in action at: http://screencast.com/t/occKZGYVksj

Hope this helps.