Add a button in DataList

Radzen Studio Blazor WebAssembly
1

Hi,
I would like to add the button in DataList as below but <Template Context="action"> is not recognized

Is it possible to do that with RadzenDataList?

<RadzenDataList AllowVirtualization=@allowVirtualization Style="@(allowVirtualization ? "height:400px;overflow:auto;" : "")" 
                    WrapItems="@(!allowVirtualization)" AllowPaging="@(!allowVirtualization)"
                    Data="@dev.ActionItems" TItem="ActionItem" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">

            <Template Context="action">
                  <RadzenCard Style="width: 100%; padding: 0;">           
                           <RadzenColumn Size="12" SizeLG="2" Class="rz-p-4">
                                         <Template Context="action">
                                               <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Secondary" 
                                               Size="ButtonSize.Small"  Click="@(args => 
                                               EditAction(action.SuiviBEId))" @onclick:stopPropagation="true" />                              
                                         </Template>
                         </RadzenColumn>
                   </RadzenCard>
            </Template>

 </RadzenDataList>


@code{
 async Task EditAction(int actionId)
  {
      await client.GetAsync($"api/etude/{actionId}");
      
      act.SuiviBEId = actionId;
        
      var result = await DialogService.OpenAsync("Editing action", ds =>
      @<div>                                        
                                   <div class="row">
                                        <div class="col-md-4 align-items-center d-flex">                                  
                                            <h3 class="small text-muted">Open Date</h3>
                                        </div>
                                        <div class="col-md-6">
                                            <RadzenDatePicker @bind-Value=@act.OpenDate Disabled=true />                                                   
                                        </div>
                                         <div class="col-md-4 align-items-center d-flex">                                  
                                            <h3 class="small text-muted">Open Date</h3>
                                        </div>
                                        <div class="col-md-6">
                                            <RadzenDatePicker @bind-Value=@act.CloseDate Disabled=true/>                                                   
                                        </div>
                                   </div>
                                    <div class="row">
                                        <div class="col">
                                             <RadzenHtmlEditor @bind-Value=@act.DescriptionA style="height: 500px; weight : 200px; margin-bottom: 1rem;" UploadUrl="upload/image" />
                                             <RadzenButton Text="Update" Icon="report" ButtonStyle="ButtonStyle.Light" Click=@SaveActionList />
                                          @*<RadzenButton Text="Ok" Click="() => ds.Close(true)" Class="mr-1" Style="width: 80px;" />*@
                                           <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />   
                                                                       
                                       </div>
                                   </div>  
     </div>
       ); 

      async Task SaveActionList()
      {
           await client.PutAsJsonAsync($"api/etude/{act.SuiviBEId}", act);   
           await client.PostAsJsonAsync($"api/etude/{act.SuiviBEId}", act);            
           uriHelper.NavigateTo($"etude");
                     
          await OnInitializedAsync();
         //   await OnSubmitCallback.InvokeAsync();
      }         
  }

}
2

There is no Template for RadzenColumn

3

This means that it's possible to add a button eg edit to open modal pop up in datalist
with my code it's possible to open modal pop up but it's not possible to get a data.
Have you an idea?

4

The data is already available from the the first <Template Context="action"> which is within RadzenDataList. You can use action inside the <Template> to get whatever you want. RadzenColumn does not have a template - you just set the child content inside it. Check the demos for more info.

5

Thanks to your explanation.it's clear for template in datalist.
So i don't understand why I didn't received the data when I invoke Get method

6

Only you can determine that by debugging your code.

7

Hi
I turned the question on its head and it's not possible to received the data when I've put edit button in each line of the RadzenDalaList.
any problem to fill the datalist but when I edited one line the modal dialog opened but any data inside

await client.GetAsync($"api/etude/{actionId}");

Do I use TemplateForm?
Data structure is many to many relationship.

I add the picture

image
image1072×277 10.5 KB

image
image990×590 22 KB

When I put a breakpoint to get method I can see that the actionid correspond to the row list. It's seems correct!

image

Really I don't understand why the get method doen't work.

Have you any suggestion?

8

You can use action inside the <Template> to get whatever you want.

Are you sure?

9

Hi,
I come back on this subject, because of I tried to debug my code w/o any success.
Have you some example with button in RadzenDataList which Invoke the get method?
for my part, I'm completely dry!!
Thanks to your help!!

10
11

The pasted code invokes a Get method but does not assign its result to anything. Not sure if this is the original code or not. I would however recommend to move the dialog in a separate component. It is known that two-way data-binding does not work very well with inline content (which you are using).

1 Like
12

Not sure if this is the original code or not.
It's my code.

If I try to assign Get method there is a error message

act= await client.GetAsync($"api/etude/{act.ActionItemId}");

error CS0029: Impossible to implicitly convert type 'System.Net.Http.HttpResponseMessage' to 'FollowUpDash.Shared.Models.ActionItem'.

13

The error says it all. You cannot convert one type to another.

14

after several attempts I succeeded in implementing a dialog in DataList and work perfectly!!
Main issue of code was a controller because my data is a collection of child and parent.
I've created two controller : 1- controller to manage parent and child data ; 2 - controler to manage child data because this data has unique key and the Id of parent data.

<RadzenDataList AllowVirtualization=@allowVirtualization Style="@(allowVirtualization ? "height:400px;overflow:auto;" : "")" 
                    WrapItems="@(!allowVirtualization)" AllowPaging="@(!allowVirtualization)"
                    Data="@dev.ActionItems" TItem="ActionItem" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">

            <Template Context="action">
                  <RadzenCard Style="width: 100%; padding: 0;">           
                           <RadzenColumn Size="12" SizeLG="2" Class="rz-p-4">
                                         <Template Context="action">
                                               <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Secondary" 
                                               Size="ButtonSize.Small"  Click="@(args => 
                                               EditAction(action.SuiviBEId))" @onclick:stopPropagation="true" />                              
                                         </Template>
                         </RadzenColumn>
                   </RadzenCard>
            </Template>

 </RadzenDataList>

@code{
...
 async Task EditAction(int actionId)
    {
       act = await client.GetFromJsonAsync<ActionItem>($"api/actionitem/{actionId}");       
  
       var results= await DialogService.OpenAsync("Editing action", de =>      
            @<div>                                        
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">                                  
                        <h3 class="small text-muted">Open Date</h3>
                    </div>
                    <div class="col-md-6">
                        <RadzenDatePicker @bind-Value=@act.OpenDate Disabled=false />                                                   
                    </div>
                    <div class="col-md-4 align-items-center d-flex">                                  
                        <h3 class="small text-muted">Close Date</h3>
                    </div>
                    <div class="col-md-6">
                        <RadzenDatePicker @bind-Value=@act.CloseDate Disabled=true/>                                                   
                    </div>
                    <hr>
                     <div class="col-md-6">                                        
                            <RadzenDropDown Style="width:100px" TValue="string" 
                                                      @bind-Value="act.State" Placeholder="Select Status" AllowFiltering="true" 
                                                      Data="@StateValues">
                            </RadzenDropDown>                                           
                    </div>
                </div>
                <br/>
                <hr>
                <br/>
                <div class="row">
                    <div class="col">
                        <RadzenHtmlEditor @bind-Value=@act.DescriptionA style="height: 500px; weight : 200px; margin-bottom: 1rem;" UploadUrl="upload/image" />
                        <RadzenButton Text="Update" ButtonStyle="ButtonStyle.Light" Click=SaveActionList/>
                        @*<RadzenButton Text="Ok" Click="() => ds.Close(true)" Class="mr-1" Style="width: 80px;" />*@
                        <RadzenButton Text="Cancel" Click="() => de.Close(false)" ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />   

                    </div>
                </div>  
            </div>
            ,new DialogOptions() { Width = "900px", Height = "812px", Resizable = true, Draggable = true });
         
     
       async Task SaveActionList()
       {          
           await client.PutAsJsonAsync($"api/actionitem", act);  
                 uriHelper.NavigateTo($"etude/actions/{dev.SuiviBEId}");
           // await OnInitializedAsync();
            await OnSubmitCallback.InvokeAsync();
       }        
         
    }   
}

Thanks to your support!