How to make new custom Command to open partial view in dialog in Grid

[Ahmed]

Hi,

Q- How to make new custom Command in Data Grid toolbar to open partial view template in dialog to edit some fields and send record to controller in asp.net core MVC?

Thanks a lot

[Vignesh Sivagnanam]

Hi Ahmed 

Greetings from Syncfusion support 

Based on your query, we found that you want to create the custom toolbar button, to show the custom partial view when edit the records in the grid. You can create the custom toolbar button by using the below way, 

@{ 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall" }); 

    toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" }); 

} 

 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar=toolbarItems height="270" allowGrouping="true"> 

    <e-grid-columns> 

        …………………………………………………………………………………………….. 

    </e-grid-columns> 

</ejs-grid> 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar 

On creating partial view to edit the records in the grid, if you want to affect the grid column values with the values of the controller after editing in the grid, we already have the feature called “Dialog Template”. The dialog template editing provides an option to customize the default behavior of dialog editing and by using this feature, you can customize input components that you want to edit the grid column values in the edit dialog popup. 

In the Dialog Template, we have rendered the input, dropdown and datePicker in the external dialog component are rendered in the partial views. This is used to perform the CRUD operation in the grid using the external component rendered in the partial view. The values edited are affected in the grid after clicking ok button in the dialog popup.    

Please refer the below Documentation and demo for your reference, 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#dialoginline-template 

Demo : https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/material 

If the above solution doesn’t meet your exact requirement, Please share the below details to validate further on your requirement, 

1. What is the exact relation between the components rendered in the partial view and the grid? 

2. Are you want to affect the grid dataSource and the grid’s UI after editing in the dialog? 

3. What is use of the data that you want to sent to the server side? Is it going to affect the grid’s datasource? 

4. Explain your exact requirement detailly using the screenshot or video demo. 

Regards 

Vignesh Sivagnanam   

[Ahmed]

Hi,

Thanks for your response, ​

But I want to render custom edit form in partial view in dialog instead of "alert("Custom toolbar click...")" .

Can you help me to do that with sample, please?

<script>
    function toolbarClick(args) {
        if (args.item.id === 'Click') {
            alert("Custom toolbar click...");
        }
    }
</script>

Thanks for all

[Sujith Kumar Rajkumar]

Hi Ahmed, 

 

As mentioned in our previous update, you can use the dialog template functionality to render custom components for the edit form in partial view to achieve your requirement. More details on this can be checked in the below documentation link, 

 

Dialog template: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#dialoginline-template 

 

Also for enabling edit on custom command button click, we suggest you to use the default custom command buttons(which has edit, delete buttons support) and it will open the edit dialog with the custom controls rendered through partial view. More details on this can be checked in the below documentation link, 

 

Command column: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#command-column 

 

And for saving data through controller, we suggest you to use the URL adaptor for binding remote data to the Grid. With the URL adaptor, the server side url to fetch data and perform Grid actions can be specified using the url property of DataManager and the CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl, CrudUrl and BatchUrl.  

 

More details on this can be checked in the below documentation link, 

 

URL adaptor: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#url-adaptor 

 

We have prepared a local sample based on the above queries for your reference. Please find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168795/ze/GridWithDialogTemplateEdit(URLAdaptor)-399362273 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R