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

How to use Radgrid both programmatically and client side

1 Answer 214 Views

Grid

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

Bharat asked on 31 Jan 2014, 09:03 AM

Hi,

I want to know that how i can refresh grid client side on external button and how to bind
radgrid both programmatically and client side both.

Here is my aspx code
<script type="text/javascript">

$(document).ready(function () {
$("#form1").validate();

});
function onRequestStart(sender, args) {
if (args.get_eventTarget().indexOf("ExportMasterDataButton") > 0) {
args.set_enableAjax(false);
}
if (args.get_eventTarget().indexOf("ExportDetailDataButton") > 0) {
args.set_enableAjax(false);
}
if (args.get_eventTarget().indexOf("ExportMasterGridButton") > 0) {
args.set_enableAjax(false);
}
}

</script>

<script type="text/javascript">
//<![CDATA[
function pageLoad(sender, eventArgs) {
var tableView = $find("<%= GridView1.ClientID %>").get_masterTableView();

PageMethods.GetData(0, tableView.get_pageSize(),
tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toList(),
updateGrid);

PageMethods.GetCount(tableView.get_filterExpressions().toList(), updateVirtualItemCount);
}

function RadGrid1_Command(sender, args) {
args.set_cancel(true);

var pageSize = sender.get_masterTableView().get_pageSize();

var sortExpressions = sender.get_masterTableView().get_sortExpressions();
var filterExpressions = sender.get_masterTableView().get_filterExpressions();

var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();

if (args.get_commandName() == "Filter")
currentPageIndex = 0;

var sortExpressionsAsSQL = sortExpressions.toString();

$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= GridView1.ClientID %>");

PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressions.toList(), updateGrid);

if (args.get_commandName() == "Filter") {
PageMethods.GetCount(filterExpressions.toList(), updateVirtualItemCount);
}
}

function updateGrid(result) {
var tableView = $find("<%= GridView1.ClientID %>").get_masterTableView();
tableView.set_dataSource(result);
tableView.dataBind();

$find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= GridView1.ClientID %>");
}

function updateVirtualItemCount(result) {
var tableView = $find("<%= GridView1.ClientID %>").get_masterTableView();
tableView.set_virtualItemCount(result);
}

function RadGrid1_RowDataBound(sender, args) {
var radTextBox1 = args.get_item().findControl("LastName"); // find control
radTextBox1.set_value(args.get_dataItem()["LastName"]);

// conditional formatting
args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.") ? "bold" : "normal";
}
//]]>
</script>

<telerik:RadGrid ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="false" AllowFilteringByColumn="true"
PageSize="100" AllowPaging="true" AllowSorting="true" OnPreRender ="GridView_OnPreRender" CellSpacing="1" Style="padding: 1px;"
Skin="Default">
<ItemStyle Wrap="false"></ItemStyle>
<ClientSettings>
<Selecting AllowRowSelect="False" />
<Scrolling AllowScroll="true" ScrollHeight="500px" />
<ClientEvents OnHierarchyExpanding="GridViewOnHierarchyExpending" />
</ClientSettings>
<ExportSettings Excel-Format="Html" ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">
</ExportSettings>
<MasterTableView Name="AllMailSentDetails" CommandItemDisplay="Top" TableLayout="Fixed"
>
<HeaderStyle Font-Size="14px" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True" />
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True" />
<SortExpressions>
<telerik:GridSortExpression FieldName="Content_Viewed" SortOrder="Ascending" />
</SortExpressions>
<CommandItemTemplate>
<asp:Button ID="ExportMasterDataButton" runat="server" CommandName="ExportMasterData"
ClientIDMode="Static"></asp:Button>
</CommandItemTemplate>
<Columns>
<telerik:GridBoundColumn DataField="First_Name_Sender"
HeaderText="Sender First Name" UniqueName="FirstNameSender"
ItemStyle-Width="130px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Last_Name_Sender" SortExpression="Last_Name_Sender"
HeaderText="Sender Last Name" UniqueName="LastNameSender" ItemStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Email_Sender" HeaderText="Sender Email"
UniqueName="EmailSender" ItemStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="First_Name" HeaderText="Recipient First Name"
UniqueName="FirstName" ItemStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Last_Name" HeaderText="Recipient Last Name"
UniqueName="LastName" ItemStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="Email_Address" SortExpression="Email_Address"
HeaderText="Recipient Email Address" ItemStyle-Width="100px" UniqueName="EmailAddress">
<ItemTemplate>
<a onclick="viewVirtualContact(<%#Eval("contact_id")%>,<%#Eval("isvirtualcontact")%>)">
<%# Eval("Email_Address") %></a>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Company" HeaderText="Company"
UniqueName="Company" ItemStyle-Width="100px">
<%-- <FilterTemplate>
<div class="Drop-down-child">
<uc1:CompanyFilter ID="CompanyFilter1" runat="server" />
</div>
</FilterTemplate>--%>
<ItemTemplate>
<%# Eval("Company")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="Create_Date_Std"
HeaderText="Send Date" UniqueName="Create_Date_Std" ItemStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="Video_content_sent" SortExpression="Video_content_sent"
HeaderText="Content Sent" UniqueName="Videocontentsent" ItemStyle-Width="100px">
<ItemTemplate>
<%# Eval("Video_content_sent")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Content_Viewed" SortExpression="Content_Viewed"
HeaderText="Content Viewed" UniqueName="ContentViewed" ItemStyle-Width="100px">
<%-- <FilterTemplate>
<div class="Drop-down-child">
<uc1:SessionFilter ID="SessionFilter1" runat="server" />
</div>
</FilterTemplate>--%>
<ItemTemplate>
<%# Eval("Content_Viewed")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Content_Viewed_Date" SortExpression="Content_Viewed_Date"
HeaderText="Viewing Date" UniqueName="ContentViewedDate" ItemStyle-Width="100px">
<ItemTemplate>
<%# Eval("Content_Viewed_Date")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Duration_Viewed" SortExpression="Duration_Viewed"
HeaderText="Viewing Duration" UniqueName="DurationViewed" ItemStyle-Width="100px">
<ItemTemplate>
<%# Eval("Duration_Viewed")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="iplocation" SortExpression="iplocation" HeaderText="Location"
UniqueName="iplocation" ItemStyle-Width="100px">
<ItemTemplate>
<%# Eval("iplocation")%>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<FilterMenu EnableImageSprites="False" />
</telerik:RadGrid>

aspx.cs code

private void BindGrid(int parentCompanyId, string parentCompanyName, int userId, int userLevel, string startDate, string endDate, string demoSession_Id
, string contentName, string searchText, string sortBy, int pageNum, int pageSize, ref string msg)
{

DataTable viewings = ViewingHelper.ViewingByEmailSent(parentCompanyId, parentCompanyName, userId, userLevel, startDate, endDate, demoSession_Id,
contentName, searchText, pageNum, pageSize, sortBy, ref msg);
GridView1.DataSource = viewings;
GridView1.DataBind();

}

[WebMethod]
public static DataTable GetData(int parentCompanyId, string parentCompanyName, int userId, int userLevel, string startDate, string endDate, string demoSession_Id
, string contentName, string searchText, string sortBy, int pageNum, int pageSize)
{
return ViewingHelper.ViewingByEmailSent(parentCompanyId, parentCompanyName, userId, userLevel, startDate, endDate, demoSession_Id,
contentName, searchText, pageNum, pageSize, sortBy, ref Message);
}

Thanks & Regards
Bharat Bhushan

1 Answer, 1 is accepted

answered on 05 Feb 2014, 08:28 AM

Hello Bharat,

Please refer to the following help articles and online demos, where detail information on how to achieve the desired result is available:

In the first help article and in the demo you will notice a JavaScript function updateGrid() which is used for updating the grid.

I hope that the provided information will help you to achieve the desired functionality.

Regards,
Konstantin Dikov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.