<%@ Page Title="PivotGrid-Conditional Formatting-ASP.NET-SYNCFUSION" Language="C#" MetaDescription="This demo for Syncfusion Essential JS1 for ASP.NET pivot grid control describes how to format the appearance of value cells based on applied conditions" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="ConditionalFormatting.aspx.cs" Inherits="WebSampleBrowser.PivotGrid.ConditionalFormatting" %> <%@ Register Assembly="Syncfusion.EJ.Pivot" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %> <%@ Register Assembly="Syncfusion.EJ.Pivot" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %> <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ControlsSection"> <ej:PivotGrid ID="PivotGrid1" IsResponsive="true" runat="server" OnServerExcelExporting="PivotGrid_ServerExcelExporting" OnServerPDFExporting="PivotGrid_ServerPDFExporting" OnServerWordExporting="PivotGrid_ServerWordExporting" ClientIDMode="Static" EnableConditionalFormatting="true"> <DataSource> <Rows> <ej:Field FieldName="Country" FieldCaption="Country"></ej:Field> <ej:Field FieldName="State" FieldCaption="State"></ej:Field> </Rows> <Columns> <ej:Field FieldName="Product" FieldCaption="Product"></ej:Field> </Columns> <Values> <ej:Field FieldName="Amount" FieldCaption="Amount"></ej:Field> <ej:Field FieldName="Quantity" FieldCaption="Quantity"></ej:Field> </Values> </DataSource> <ClientSideEvents Load="onLoad" /> </ej:PivotGrid> </asp:Content> <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="PropertySection"> <div id="sampleProperties"> <div class="prop-grid"> <div class="row"> <div class="col-md-3"> Conditional Formatting: </div> <input type="button" id="Btn1" value="Apply" /> <input type="button" id="Btn2" value="Reset" /> </div> <div class="row" style="margin-top: 5px;"> <table> <tr> <td class="chkrad"> Export To : </td> <td class="chkrad" colspan="2"> <select id="drpdwn"> <option value="excel">Excel</option> <option value="word">Word</option> <option value="pdf">PDF</option> </select> </td> </tr> </table> </div> </div> </div> </asp:Content> <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="ScriptSection"> <script type="text/javascript" class="jsScript"> function onLoad(args) { args.model.dataSource.data = pivot_dataset; } $(function () { $("#sampleProperties").ejPropertiesPanel(); $("#Btn1").ejButton({ roundedCorner: true, size: "small", type: ej.ButtonType.Button, click: "ApplyChanges" }); $("#Btn2").ejButton({ roundedCorner: true, size: "small", type: ej.ButtonType.Button, click: "Reset" }); $('#drpdwn').ejDropDownList({ selectedIndex: null, change: "exportPivotGrid" }); pGridObj = $('#PivotGrid1').data("ejPivotGrid"); }); function ApplyChanges() { var pivotGridObj = $('#PivotGrid1').data("ejPivotGrid"); if (pivotGridObj.model.enableConditionalFormatting) { pivotGridObj.openConditionalFormattingDialog(); } else { alert("Please set conditional Formatting as True"); } } function exportPivotGrid(args) { var pGridObj = $('#PivotGrid1').data("ejPivotGrid"); var dropDownObj = $('#drpdwn').data("ejDropDownList"); var exportOption = dropDownObj.model.value; if (exportOption == "excel") pGridObj.exportPivotGrid("excelExport", "fileName"); else if (exportOption == "word") pGridObj.exportPivotGrid("wordExport", "fileName"); else if (exportOption == "pdf") pGridObj.exportPivotGrid("pdfExport", "fileName"); } function Reset() { var pivotGridObj = $('#PivotGrid1').data("ejPivotGrid"); pivotGridObj._removeCellFormatting(true, false); pivotGridObj._list = ["Add New"]; } window.loadPivotGridFrameTheme = function () { window.setTimeout(function () { var pivotGridElement = $("#PivotGrid1").data("ejPivotGrid"); if (pivotGridElement && pivotGridElement.model.enableGroupingBar && pivotGridElement.getJSONRecords() != null) pivotGridElement.renderControlFromJSON(); }, 2500); } </script> </asp:Content> <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="StyleSection"> <style type="text/css"> #PivotGrid1 { height: 350px; width: 100%; overflow: auto; float:left; } .row .cols-prop-area { min-height: 140px; width:25%; } .row .cols-sample-area { width: 72%; } #Btn2{ margin-top:15px; } @media (min-width: 1920px) {.chkrad { width: 178px !important; } #Btn2{ margin-top:0px; } } </style> </asp:Content>
using Syncfusion.EJ.Export; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebSampleBrowser.PivotGrid { public partial class ConditionalFormatting : System.Web.UI.Page { protected void PivotGrid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.PivotGridEventArgs e) { PivotGridExcelExport pGrid = new PivotGridExcelExport(); dynamic args = e.Arguments; string fileName = "Sample"; pGrid.ExportToExcel(fileName, args["args"].ToString(), HttpContext.Current.Response); } protected void PivotGrid_ServerPDFExporting(object sender, Syncfusion.JavaScript.Web.PivotGridEventArgs e) { PivotGridPDFExport pGrid = new PivotGridPDFExport(); dynamic args = e.Arguments; string fileName = "Sample"; pGrid.ExportToPDF(fileName, args["args"].ToString(), HttpContext.Current.Response); } protected void PivotGrid_ServerWordExporting(object sender, Syncfusion.JavaScript.Web.PivotGridEventArgs e) { PivotGridWordExport pGrid = new PivotGridWordExport(); dynamic args = e.Arguments; string fileName = "Sample"; pGrid.ExportToWord(fileName, args["args"].ToString(), HttpContext.Current.Response); } } }