How set grid and preview in KendoDialog?

[WoorimartDEV]

Hello
I'm going to create a dialog and place grid and image view in it vertically. At this time, the height of grid and image view should match the height of the dialog, and the area should be divided by a ratio of 8:4.
Whenever I select a row in the grid, I want to take an image file from a specific path and show it in the image view, so is there an example or material that I can refer to?
When I searched for grid in dialog, I saw the kendo window data, but I want to implement it as a dialog instead of a window.
And when you put the grid in the dialog, is there a way to make the height of the grid 100%?
Also, when I searched Kendo image view, I saw the editor, and I wonder if there is a function that outputs only simple images, not editor.

[Alexander]

Hi Doyeong,

Thank you for reaching out.

At present, we do not have a dedicated component primarily for image preview apart from the ImageEditor and ImageBrowser functionality within the Editor component. We do have, other layout widgets that could be used for this matter such as the Card component for example.

That being said, you can embed a Grid within the Dialog component by passing it as a raw Html string by utilizing the built-in .ToHtmlString() API configuration. For example:

@(Html.Kendo().Dialog()
	.Name("dialog")
	.Title("Two Controls in Content")
	.Visible(true)
    .HtmlAttributes(new {style = "height:300px;display: flex; width:270px"})
	.Content(
		Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
                   .Name("grid")
                   ...           
                   .ToHtmlString()
        )
	.Modal(true)
)

That being said, currently, we do not have a ready example on the premise similar to your scenario, as this is considered a rather custom approach.

Nevertheless, I have created a Telerik REPL example that tackles an approach similar to the one required. Please, allow me to go through the steps I have undertaken to achieve the desired result:

• Embed a Grid component similar to how it is illustrated in the above snippet.

• Add a "100%" height style to its wrapper container through the built-in .Height() configuration API of the Grid similar to how it is suggested in the Enable Auto-Resizing article:
  

 .Height("100%")

• Enable the Selection of the Grid through its .Selectable() API configuration and wire to the Change event:
  

Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
            .Name("grid")
            ...
            .Events(e => e.Change("onChange"))
            .Selectable()

• Within the handler, append any arbitrary content within the Dialog wrapper based on your preference. Notice that, I have additionally obtained the currently selected data item that could be used for further getting an image file a specified path:
  

<script type="text/javascript">
    function onChange(e){
         var dataItem = e.sender.dataItem(e.sender.select()); // Get the currently selected data item.
        
         $(".myCard").remove();
         $("#dialog").append(`<div class='myCard'><h3>Image Preview</h3><img class='k-card-image' draggable='fals' src='https://demos.telerik.com/aspnet-core/shared/web/foods/${dataItem.ProductID}.jpg' /></div>`) // Load the image from the specified path.
    }
</script>

For your convenience, here is a Telerik REPL example that tackles this approach. Feel free to further customize the example as per your requirements.

• Telerik REPL for ASP.NET Core Example

I hope this helps.

Kind Regards,
Alexander
Progress Telerik