How can i change Columns's Caption Name in PivotView

Question

I am facing a challenge with pivot grid actually i want to show caption by some other data table Column here is a code that i want to change with DYNAMICVALUE please check.

---------------------------------------------------------------

@Html.EJS().Button("excel").Content("Export To Excel").IsPrimary(true).Render()

@Html.EJS().PivotView("pivotview").Width("100%").Height("290").DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((System.Data.DataTable)ViewBag.Data.Tables[0]).ExpandAll(false).EnableSorting(true)

.FormatSettings(formatsettings => { formatsettings.Name("StateName").UseGrouping(true).Add(); })

.Rows(rows => { rows.Name("SecName").Add(); rows.Name("SubSecName").Add(); rows.Name("IndicatorName").Add(); })

.Columns(columns => { columns.Name("StateName").Add(); })

.Values(values => {

values.Name("ColVal1").Caption("DYNAMICVALUE").Add();

values.Name("ColVal2").Caption(" DYNAMICVALUE ").Add();

values.Name("ColVal3").Caption(" DYNAMICVALUE ").Add();

})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).AllowExcelExport(true).Render()

---------------------------------------------------------------------------

please help me out as early as possible

Thanks and regards

RAVI

Saranya Sivan · Accepted Answer

Hi  Ravi, 
  
We have achieved your requirement. Please find the sample below, 
  
Note: In the provided sample under success method, you can get the caption from the service. Meanwhile, we have prepared a sample to update the caption with the dynamic value using Jquery ajax.  
  
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/7z/PivotExample1575739401 
  
Code Example: 




  $(document).ready(function (e) { 
        $("#apply-btn").on("click", function (e) { 
            $.ajax({ 
                url: '/Home/PassIntFromView', 
                type: "post", 
                contentType: "application/json; charset=utf-8", 
                success: function (result) { 
                    var pivotObj = document.getElementById('PivotView').ej2_instances[0]; 
                    pivotObj.setProperties( 
                        { 
                            dataSourceSettings: { 
                                values: [ 
                                    { name: "Sold", caption: result[0].Caption1 }, 
                                    { name: "Amount", caption: result[0].Caption2 }, 
                                    { name: "Instock", caption: result[0].Caption3 }] 
                            } 
                        }, 
                        true 
                    ); 
                    pivotObj.refresh(); 
                } 
            }); 
        }); 
    }); 
    
Please let us know if you have concerns.  
   
Regards,  
Saranya Sivan.

Saranya Sivan · Answer

Hi Ravi, 
  
Based on your requirement we have prepared a sample to change the caption of the value field on a button click. Please check the below sample for your reference. 
  
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/7z/PivotExample-1904128487 
  
Code Snippet: 
  




   document.getElementById('caption').onclick = function () { 
        pivotObj = document.getElementById('PivotView').ej2_instances[0]; 
        pivotObj.setProperties( 
            { 
                dataSourceSettings: { 
                    values: [{ name: "Sold", caption: "Products Sold" }, 
                    { name: "Amount", caption: "Products Amount" }] 
                } 
            }, 
            true 
        ); 
        pivotObj.refresh(); 
    } 
  
We hope the above sample meets your requirements. Please let us know if you have concern. 
  
Regards, 
Saranya Sivan.

Ravi · Answer

Sir,

i wanted to change caption by some dynamic values that is present in the rows. like Caption1,Caption2,Caption3 that is already coming into datatable each rows, i just wanted to fill caption by its values that is presented into the datatble.

dataSourceSettings.DataSource((System.Data.DataTable)ViewBag.Data.Tables[0]).ExpandAll(false).EnableSorting(true)

.FormatSettings(formatsettings => { formatsettings.Name("StateName").UseGrouping(true).Add(); })

.Rows(rows => { rows.Name("SecName").Add(); rows.Name("SubSecName").Add(); rows.Name("IndicatorName").Add(); })

.Columns(columns => { columns.Name("StateName").Add(); })

.Values(values => {

values.Name("ColVal1").Caption("Caption1").Add();

values.Name("ColVal2").Caption(" Caption2").Add();

values.Name("ColVal3").Caption(" Caption3 ").Add();

})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).AllowExcelExport(true).Render()

somthing like this with your support

document.getElementById('Caption').onclick = function () {

pivotObj = document.getElementById('pivotview').ej2_instances[0];

pivotObj.setProperties({

dataSourceSettings: {

values: [{ name: "ColVal1", caption: "${Caption1}" }, { name: "ColVal2", caption: "${Caption2}" }, { name: "ColVal3", caption: "${Caption3}" },]

}

},

true);

pivotObj.refresh();

}

----------------------------

i have also tried like this but get the desired results

@Html.EJS().PivotView("pivotview").Width("100%").Height("290").DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((System.Data.DataTable)ViewBag.Data.Tables[0]).ExpandAll(false).EnableSorting(true)

.FormatSettings(formatsettings => { formatsettings.Name("StateName").UseGrouping(true).Add(); })

.Rows(rows => { rows.Name("SecName").Add(); rows.Name("SubSecName").Add(); rows.Name("IndicatorName").Add(); })

.Columns(columns => { columns.Name("StateName").Add(); })

.Values(values => {

values.Name("ColVal1").Caption(values.Name("Caption1").ToString()).Add();

values.Name("ColVal2").Caption(values.Name("Caption2").ToString()).Add();

values.Name("ColVal3").Caption(values.Name("Caption3").ToString()).Add();

})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).AllowExcelExport(true).Render()

Thanks and Regards

RAVI

Saranya Sivan · Answer

Hi Ravi,  
   
We are checking on the reported issue at our end. We will update the further details within two business days.  
   
Regards,  
Saranya S.