PDF Export does not work whereas excel export does, delete record when user confirms deletion.

[ajit goel]

Hi,

I have two questions wrt to grid.

a. PDF Export does not work whereas excel export does. 

b. Similarly, I want a record to be deleted when the user confirms on the confirm delete dialog box, but the app tries to delete the record before the user has clicked ok, on the delete confirmation dialog. 

What could be I missing?

        AllowFiltering="false"

        Toolbar="@(new List

[Renjith Singh Rajendran]

Hi Ajit, 

Greetings from Syncfusion support. 

Query 1 : a. PDF Export does not work whereas excel export does. 

We suspect that you would like to export the only visible Template column to a pdf file. If so, then we suggest you to enable the IncludeTemplateColumn property of PdfExportProperties. And handle the customization of corresponding Template column in PdfQueryCellInfoEvent event handler. Please refer the codes below. We have included this suggestion in the below attached sample in Query 2. 

 

<GridEvents ... PdfQueryCellInfoEvent="Pdf_QueryCell" TValue="Transcriptionjobresult" /> 

public void Pdf_QueryCell(PdfQueryCellInfoEventArgs<Transcriptionjobresult> Args){    if (Args.Column.HeaderText == "Name")    {        //Do the content customization of template column value here        Args.Cell.Value = Args.Data.CustomerID;    }}public async Task UserFileTranscriptions_OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args){    ...    else if (args.Item.Text == "PDF Export")    {        PdfExportProperties pdfExportProperties = new PdfExportProperties();        pdfExportProperties.IncludeTemplateColumn = true;        await this.TranscriptionJobResultsGrid.PdfExport(pdfExportProperties);    }    ...}

Reference : https://blazor.syncfusion.com/documentation/datagrid/events/#pdfquerycellinfoevent 

Query 2 : Similarly, I want a record to be deleted when the user confirms on the confirm delete dialog box, but the app tries to delete the record before the user has clicked ok, on the delete confirmation dialog. 

We could see that you are using OnToolbarClick event to delete the row in your original database. As the OnToolbarClick will be triggered once you click on the delete toolbar button, the delete code inside this event handler will also be executed. Thereby deleting the row, instead of waiting for delete confirmation dialog’s OK or Cancel choice. 

So based on this scenario, we suggest you to move the Delete codes inside the OnActionComplete event handler based on RequestType as Delete instead of using them inside OnToolbarClick event. Please refer and use the codes below, 

 

<GridEvents ... OnActionComplete="OnActionComplete" TValue="Transcriptionjobresult" /> 

 

public async Task OnActionComplete(ActionEventArgs<Transcriptionjobresult> args) 

{ 

    if (args.RequestType.Equals(Action.Delete)) 

    { 

        //This will be triggered once the OK button in DeleteConfirmation is clicked 

        //Use your Delete codes here 

    } 

} 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp2001328271 

Reference : https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R 

[ajit goel]

Thank you Renjith,

wrt to item 1, I made the appropriate changes but the event is not getting triggered(This is however working for another grid with the same issue). Can you please take a look? 

<SfGrid Id="FileUploadsGrid" @ref="FileUploadsGrid" AllowTextWrap="true"
        DataSource="@FileUploads" AllowPaging="true" AllowSorting="true"
        AllowFiltering="false"
        Toolbar="@(new List<object>()
          { "Delete","Print", "ExcelExport", "PdfExport", "CsvExport","Search",
               new ItemModel() {
              Text = "Refresh", TooltipText = "Refresh", PrefixIcon = "e-refresh",
                   Id = "Refresh"
          }})"
        AllowExcelExport="true" AllowPdfExport="true">
  <GridSearchSettings Operator="Operator.Contains" IgnoreCase="true" />
  <GridPageSettings PageSize="10" />
  <GridEvents PdfQueryCellInfoEvent="FileUploadsGrid_PdfQueryCellInfoEvent" 
              RowSelected="FileUploadsGrid_RowSelected" 
              OnActionComplete="FileUploadsGrid_OnActionComplete" 
              OnToolbarClick="FileUploadsGrid_OnToolbarClick" 
              TValue="FileInfoModel" />
  <GridEditSettings AllowAdding="false" AllowEditing="false" AllowDeleting="true"
                    ShowDeleteConfirmDialog="true" />
  <GridColumns>
    <GridColumn Field=@nameof(FileInfoModel.Id) IsPrimaryKey="true" Visible="false" />
    <GridColumn HeaderText="Name">
      <Template>
        @{
          var item = (context as FileInfoModel);
          @($"{item?.OriginalName}")
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="Upload Date">
      <Template>
        @{
          var item = (context as FileInfoModel);
          @($"{item?.CreatedDate:G}")
        }
      Template>
    GridColumn>
  GridColumns>
  <GridTemplates>
    <DetailTemplate>.............................  GridTemplates>SfGrid>

public async Task FileUploadsGrid_OnActionComplete(ActionEventArgs<FileInfoModel> args) 
{ 
  if (args.RequestType.Equals(Action.Delete)) 
  { 
    var itemToUpdate = 
      await this.InstaTranscribeDatabaseService.GetFileUpload(SelectedFileInfoModel.Id);
    itemToUpdate.status = FileStatus.Deleted;
    await this.InstaTranscribeDatabaseService.UpdateFileupload(SelectedFileInfoModel.Id,
      itemToUpdate);
    await LoadFileUploads(); 
  } 
}
public async Task FileUploadsGrid_OnToolbarClick(
  Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
  if (args.Item.Text == "Excel Export")
  {
    await this.FileUploadsGrid.ExcelExport();
  }
  else if (args.Item.Text == "PDF Export")
  {
    var pdfExportProperties = new PdfExportProperties {IncludeTemplateColumn = true};
    await this.FileUploadsGrid.PdfExport(pdfExportProperties);
  }
  else if (args.Item.Text == "CSV Export")
  {
    await this.FileUploadsGrid.CsvExport();
  }
  else if (args.Item.Text == "Refresh")
  {
    await LoadFileUploads();
  }
}

wrt to item 2, I made the appropriate changes but I am getting a blank pdf table rows, with only the header row populated(please see screenshot below). Can you please take a look? Also would this approach work for both GridColumns=>Template and GridTemplates => DetailTemplate?

<SfGrid Id="TranscriptionJobResultsGrid" @ref="TranscriptionJobResultsGrid" AllowTextWrap="true"
        DataSource="@TranscriptionJobResults" AllowPaging="true" AllowSorting="true"
        AllowFiltering="false"
        Toolbar="@(new List<object>()
          { "Delete","Print", "ExcelExport", "PdfExport", "CsvExport","Search",
               new ItemModel() {
              Text = "Refresh", TooltipText = "Refresh", PrefixIcon = "e-refresh",
                   Id = "Refresh"
               }})"
        AllowExcelExport="true" AllowPdfExport="true">
  <GridSearchSettings Operator="Operator.Contains" IgnoreCase="true" />
  <GridPageSettings PageSize="10" />
  <GridEvents PdfQueryCellInfoEvent="TranscriptionJobResultsGrid_PdfQueryCellInfoEvent" 
              RowSelected="TranscriptionJobResultsGrid_RowSelected" 
              OnActionComplete="TranscriptionJobResultsGrid_OnActionComplete" 
              OnToolbarClick="TranscriptionJobResultsGrid_OnToolbarClick" TValue="Transcriptionjobresult" />
  <GridEditSettings AllowAdding="false" AllowEditing="false" AllowDeleting="true" 
                    ShowDeleteConfirmDialog="true" />
  <GridColumns>
    <GridColumn Field=@nameof(Transcriptionjobresult.transcriptionjobresultid) IsPrimaryKey="true" Visible="false" />
    <GridColumn HeaderText="Name">
      <Template>
        @{
          var item = (context as Transcriptionjobresult);
          if (item?.status.HasFlag(TranscriptionJobStatus.Completed) ?? false)
          {
            rel='nofollow' href="@($"/view-file/{item?.transcriptionjobresultid.ToString()}")">
              @($"{item?.Transcriptionjobsetting.jobname}")
            
          }
          else
          {
            @($"{item?.Transcriptionjobsetting.jobname}")
          }
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="File name">
      <Template>
        @{
          var item = (context as Transcriptionjobresult);
          @($"{item?.Transcriptionjobsetting.Fileupload?.actualfilename}")
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="Language">
      <Template>
        @{
          var item = (context as Transcriptionjobresult);
          @($"{item?.Transcriptionjobsetting.CommaSeperatedFileLanguages}")
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="Started Date">
      <Template>
        @{
          var item = (context as Transcriptionjobresult);
          @($"{item?.Transcriptionjobsetting.timestamp:G}")
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="Status">
      <Template>
        @{
          var item = (context as Transcriptionjobresult);
          if (item?.status.HasFlag(TranscriptionJobStatus.Completed) ?? false)
          {
            if (item?.status.HasFlag(TranscriptionJobStatus.ResultSelected) ?? false)
            {
              @("Success")
            }
            else if (item?.status.HasFlag(TranscriptionJobStatus.Failed) ?? false)
            {
              @("Failed")
            }
            else if (item?.status.HasFlag(TranscriptionJobStatus.UnknownError) ?? false)
            {
              @("Error")
            }
          }
          else
          {
            @("In progress")
          }
        }
      Template>
    GridColumn>
  GridColumns>
SfGrid>

protected void TranscriptionJobResultsGrid_PdfQueryCellInfoEvent(
  PdfQueryCellInfoEventArgs<Transcriptionjobresult> args) 
{
  if (args.Column.HeaderText == "File name") 
  {
    args.Cell.Value = args.Data?.Transcriptionjobsetting.Fileupload?.actualfilename;
  }
  else if (args.Column.HeaderText == "Language") 
  {
    args.Cell.Value = args.Data?.Transcriptionjobsetting.CommaSeperatedFileLanguages;
  }
  else if (args.Column.HeaderText == "Started Date") 
  {
    args.Cell.Value = args.Data?.Transcriptionjobsetting.timestamp;
  }
  else if (args.Column.HeaderText == "Status") 
  {
    args.Cell.Value = args.Data?.Transcriptionjobsetting.timestamp;
  }
}

[Renjith Singh Rajendran]

Hi Ajit, 

Query 1 : the event is not getting triggered(This is however working for another grid with the same issue). 

We are not clear about the exact scenario you are facing this OnActionComplete event not triggered problem. Kindly share with us the following details which would be helpful for us to proceed further. 

1. Share a simple issue reproducing sample showing the reported problem.
2. Share with us a video demo showing the replication of the problem you are facing.
3. Share the exact scenario or proper replication procedure.
4. Are you facing any exception when try deleting the row in Grid? If so share those details.
5. Bind OnActionFailure event to grid, and share the details you get in this event’s args.

Query 2 : I made the appropriate changes but I am getting a blank pdf table rows, with only the header row populated 

We suspect that, you are assigning blanks for args.Cell.Value, which is causing the reported behavior. So, we suggest you to ensure whether the values you are assigning for args.Cell.Value inside PdfQueryCellInfoEvent have proper values instead of blanks. Please refer the sample attached from our previous update(in which we have exported the Template column value using PdfQueryCellInfoEvent) and check the case from your side. 

And if you are still facing difficulties, then the following details would be helpful for us to proceed further. 

1. Share a simple issue reproducing sample. This would be helpful for us to validate the problem based on your scenario.
2. Or if possible, reproduce the problem with the sample from our previous update and share with us for further analysis.
3. Share the exact scenario you are facing this reported problem.

 

Query 3 : Also would this approach work for both GridColumns=>Template and GridTemplates => DetailTemplate? 

You can display GridColumns =>Template column data in exported file by using the suggestion from our previous update explained in Query 1. 

And currently we do not have support to Export Grid along with its DetailTemplate. Since it is known request, we have logged the requested query as feature “Support to export the Grid along with DetailTemplate”. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility. It will be implemented in any of our upcoming releases. You can now track the current status of this feature request here. 

https://www.syncfusion.com/feedback/12524/support-to-export-the-grid-along-with-its-details-template 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[ajit goel]

wrt to item 2, I have added another column to print (to your provided sample) and it does not print that column. 

public class Transcriptionjobresult

      {

        public int transcriptionjobresultid { get; set; }

        public string CustomerID { get; set; }

        public double Freight { get; set; }

        public DateTime CreatedDate{ get; set; }

      }

public void Pdf_QueryCell(PdfQueryCellInfoEventArgs Args)

      {

        if (Args.Column.HeaderText == "Name")

        {

          //Do the content customization of template column value here

          Args.Cell.Value = Args.Data.CustomerID;

        }

        if (Args.Column.HeaderText == "Created Date")

        {

          //Do the content customization of template column value here

          Args.Cell.Value = Args.Data.CreatedDate;

        }

      }

protected override void OnInitialized()

      {

        TranscriptionJobResults = Enumerable.Range(1, 75).Select(x => new Transcriptionjobresult()

        {

          transcriptionjobresultid = 1000 + x,

          CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

          Freight = 2.1 * x,

          CreatedDate= DateTime.Now,

        }).ToList();

      }

       

     

     

       

     

wrt to item no 1, I have added the onActionFailure command and I am getting the following error: Can you please advise? 

{

  "Error": {

    "ClassName": "System.NullReferenceException",

    "Message": "Object reference not set to an instance of an object.",

    "Data": null,

    "InnerException": null,

    "HelpURL": null,

    "StackTraceString": "   at Syncfusion.Blazor.Data.BlazorAdaptor.Remove(DataManager dataManager, String keyField, Object value, String tableName, Query query)\r\n   at Syncfusion.Blazor.DataManager.Remove[T](String keyField, Object value, String tableName, Query query)\r\n   at Syncfusion.Blazor.Grids.Internal.DataGenerator`1.GetData(ActionEventArgs`1 args)",

    "RemoteStackTraceString": null,

    "RemoteStackIndex": 0,

    "ExceptionMethod": null,

    "HResult": -2147467261,

    "Source": "Syncfusion.Blazor.Data",

    "WatsonBuckets": null

  },

  "PreventRender": false

}

protected void FileUploadsGrid_OnActionFailure(FailureEventArgs args)
{
  logger.LogError(JsonConvert.SerializeObject(args));
}

protected async Task FileUploadsGrid_RowSelected(RowSelectEventArgs<FileInfoModel> args)
{
  SelectedFileInfoModel = args.Data;
}
protected async Task FileUploadsGrid_OnToolbarClick(
  Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
  if (args.Item.Text == "Excel Export")
  {
    await this.FileUploadsGrid.ExcelExport();
  }
  else if (args.Item.Text == "PDF Export")
  {
    var pdfExportProperties = new PdfExportProperties {IncludeTemplateColumn = true};
    await this.FileUploadsGrid.PdfExport(pdfExportProperties);
  }
  else if (args.Item.Text == "CSV Export")
  {
    await this.FileUploadsGrid.CsvExport();
  }
  else if (args.Item.Text == "Refresh")
  {
    await LoadFileUploads();
  }
}
public async Task FileUploadsGrid_OnActionComplete(ActionEventArgs<FileInfoModel> args) 
{ 
  if (args.RequestType.Equals(Action.Delete)) 
  { 
    var itemToUpdate = 
      await this.InstaTranscribeDatabaseService.GetFileUpload(SelectedFileInfoModel.Id);
    itemToUpdate.status = FileStatus.Deleted;
    await this.InstaTranscribeDatabaseService.UpdateFileupload(SelectedFileInfoModel.Id,
      itemToUpdate);
    await LoadFileUploads(); 
  } 
}

<SfGrid Id="FileUploadsGrid" @ref="FileUploadsGrid" AllowTextWrap="true"
        DataSource="@FileUploads" AllowPaging="true" AllowSorting="true"
        AllowFiltering="false"
        Toolbar="@(new List<object>()
          { "Delete","Print", "ExcelExport", "PdfExport", "CsvExport","Search",
               new ItemModel() {
              Text = "Refresh", TooltipText = "Refresh", PrefixIcon = "e-refresh",
                   Id = "Refresh"
          }})"
        AllowExcelExport="true" AllowPdfExport="true">
  <GridSearchSettings Operator="Operator.Contains" IgnoreCase="true" />
  <GridPageSettings PageSize="10" />
  <GridEvents PdfQueryCellInfoEvent="FileUploadsGrid_PdfQueryCellInfoEvent" 
              RowSelected="FileUploadsGrid_RowSelected" 
              OnActionComplete="FileUploadsGrid_OnActionComplete" 
              OnToolbarClick="FileUploadsGrid_OnToolbarClick" 
              OnActionFailure="FileUploadsGrid_OnActionFailure"
              TValue="FileInfoModel" />
  <GridEditSettings AllowAdding="false" AllowEditing="false" AllowDeleting="true"
                    ShowDeleteConfirmDialog="true" />
  <GridColumns>
    <GridColumn Field=@nameof(FileInfoModel.Id) IsPrimaryKey="true" Visible="false" />
    <GridColumn HeaderText="Name">
      <Template>
        @{
          var item = (context as FileInfoModel);
          @($"{item?.OriginalName}")
        }
      Template>
    GridColumn>
    <GridColumn HeaderText="Upload Date">
      <Template>
        @{
          var item = (context as FileInfoModel);
          @($"{item?.CreatedDate:G}")
        }
      Template>
    GridColumn>
  GridColumns>
  <GridTemplates>
    <DetailTemplate>
      @{
        var item = (context as FileInfoModel);
        width="100%">
          
            width="30%">
            width="30%">
            width="30%">
          
          
            
              
              
              
            
            
              
              
              
            
          
        

                style="font-weight: 500;">Size:  @item?.FileSizeInBytes.Bytes().Humanize("MB")
              

                style="font-weight: 500;">Type:  @item?.FileType
              

                style="font-weight: 500;">No of audio streams:  @item?.NoOfAudioStreams
              

                style="font-weight: 500;">Audio Languages:  @item?.AudioLanguages
              

                style="font-weight: 500;">Audio Codec:  @item?.AudioCodec
              

                style="font-weight: 500;">Audio length:  @(TimeSpan.FromSeconds(item?.AudioLength ?? 0).Humanize(precision:2))
              

      }
    DetailTemplate>
  GridTemplates>
SfGrid>

[Renjith Singh Rajendran]

Hi Ajit, 

Query 1 : I have added another column to print (to your provided sample) and it does not print that column. 

We suggest you to assign the value to args.Cell.Value as string to overcome the reported problem. Please refer and use as like the code below, 

 

public void Pdf_QueryCell(PdfQueryCellInfoEventArgs<Transcriptionjobresult> Args) 

{ 

    if (Args.Column.HeaderText == "OrderDate") 

    { 

        //Do the content customization of template column value here 

        Args.Cell.Value = Args.Data?.OrderDate.ToString("MM/dd/yyyy"); 

    } 

} 

Query 2 : I have added the onActionFailure command and I am getting the following error: 

We are not clear about the exact scenario you are facing the deleting problem. We checked this scenario by creating a sample by using the shared codes, but still we could not reproduce the reported problem and delete action works fine with the sample created from our side. We are attaching the sample for your reference,  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1968738596 

 

Kindly refer the above attached sample. We suspect that the reported problem might have occurred because of the codes you are using inside the FileUploadsGrid_OnActionComplete with RequestType as Delete. So please ensure this case by commenting the codes inside this OnActionComplete handler. And if you are still facing difficulties then kindly share with us the following details for better assistance. 

1. Share the complete model class code of FileInfoModel.
2. Share with us a video demo showing the replication procedure of the problem you are facing.
3. Share with us the exact scenario or proper replication procedure to reproduce the problem.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith R 

[ajit goel]

here's a video which shows the issue.I have removed the code from the OnActionComplete handler and it still throws the error. 

https://www.loom.com/share/fcf45ff0a28d41238c4d2a3be1bf3d67

The FileInfoModel looks like the following:

public class FileInfoModel
{
  public Guid Id { get; set; }
  public string OriginalName { get; set; }
  public string GeneratedName { get; set; }
  public long FileSizeInBytes { get; set; }
  public decimal Price { get; set; }
  public DateTime CreatedDate { get; set; }
  public string Status { get; set; }
  public bool Eligible => string.Equals(Status, FileInfoStatus.Ready);
  public MediaType FileType { get; set; }
  public int? NoOfAudioStreams { get; set; }
  public double? AudioLength { get; set; }
  public string AudioCodec { get; set; }
  public int? AudioSampleRate { get; set; }
  public string AudioLanguages { get; set; }

  public override string ToString()
  {
    return OriginalName + "~" + GeneratedName;
  }
}

[Renjith Singh Rajendran]

Hi Ajit, 

We tried reproducing the reported delete action problem by creating a sample based on the shared grid and model class codes. But still we could not face the reported problem with the sample created from our side.  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1065730361 

 

We suspect that the problem is application specific, due to some properties you have used in your model class or because of field values. So could you please share with us a simple issue reproducing sample. This would be helpful for us to analyze the reported problem based on your scenario. 

Regards, 

Renjith R