How to return partial view in kendo window mvc

1 Answer 2069 Views
Grid
Mohammed
Top achievements
Rank 1
Mohammed asked on 18 Jun 2021, 07:49 AM | edited on 18 Jun 2021, 03:44 PM

 <div class="k-rtl">

    @(Html.Kendo().Grid<BookStore1.Models.Author>
                    ()
                    .Name("ParameterGrid")
                    .Columns(column =>
                    {
                        column.Bound(c => c.Id).Hidden();
                        column.Bound(c => c.FullName).Title("Arabic Desc");

                        column.Command(com =>
                        {
                            com.Edit().UpdateText("حفظ").Text("تعديل").CancelText("إلغاء").HtmlAttributes(new { type = "button", @class = "btn-basic ", });
                            com.Destroy().Text("حذف").HtmlAttributes(new { type = "button", @class = "btn-basic ", });
                        }).Width(200);

                    }).HtmlAttributes(new { style = "height:500px" })
            //.ToolBar(toolbar =>
            //{
            //    toolbar.ClientTemplateId("<a class='k-button' href='" + Url("Create", "Authors1") + "/test' " + ">Add product</a>" + "<a class='k-button' href='" + Url.Action("Index", "Authors1") + "/test' " + ">Other button</a>");
            //})
            .ToolBar(toolbar => toolbar.Create().Text("إضافة جديدة").HtmlAttributes(new { type = "button", @class = "btn-basic ", }))
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Events(e => e.Edit("NewRecord"))
            .Scrollable()
            .Sortable()
            .Selectable()
            .Filterable(f => f.Extra(false)
                                .Operators(opertor => opertor
                                .ForString(str => str.Clear()
                                .Contains("يحتوي على"))))
            .Pageable
            (p => p
            .ButtonCount(10)
            .Refresh(true)
            )
            .DataSource
            (dataSourec => dataSourec
            .Ajax()
            .Events(e => e.Error("Error_Handler"))
            .Model(m => m.Id(i => i.Id))
            .Read(read => read.Action("Read", "Authors1"))
            .Create(create => create.Action("Create", "Authors1"))
  )
    )

      @(Html.Kendo()
            .Window()
            .Name("Details")
            .Title("test")
            .Visible(false)
            .Modal(true)
            .Draggable(true)
            .Width(300)
            )

</div>

<div id="test"></div>

 

<script>

$('input[name="FullName"]').keypress(function () {

        var input = $(this).val();
        $.ajax({
            type:"post",
            url: "@Url.Action("Search","Authors")",
            datatype: "html",
            data: { input: input },
            success: function (data) {
                $("#test").html(data);//// this is work fine but I want to return partial view in kendo window here 

                here I need to return partial view in kendo window here         
            },
            error: function () {

            }


        })
    });


</script>

       
Mohammed
Top achievements
Rank 1
commented on 20 Jun 2021, 01:57 PM

Any update

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 22 Jun 2021, 01:04 PM | edited on 28 Jun 2021, 06:18 AM

Hi Mohammed,

If the remote endpoint is returning a partial view, in the success callback you can get a reference to the Window and use the client-side content method to set the content of the Window.

UPDATE:

Controller:

[HttpPost]
public IActionResult GetData(int input)
{
     return PartialView("_MyPartial",input);
}

PartialView:

@{
    Layout = null;
}
@model int

Input: @Model

View:

@(Html.Kendo().Window()
    .Name("myWindow")
    .Title("Window title")
    .Draggable()
    .Content(@<text>
            Static content of the Window.
    </text>)
)

<button onclick="getContent()">Get Content</button>

<script>
    function getContent() {
        $.ajax({
            type:"post",
            url: "@Url.Action("GetData","Home")",
            datatype: "html",
            data: { input: data },
            success: function (data) {
                var myWindow = $("#myWindow").getKendoWindow();
                myWindow.content(data);
            },
            error: function (args) {
            }
        })
    }
</script>

 

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Mohammed
Top achievements
Rank 1
commented on 23 Jun 2021, 08:15 AM

Could you please provide me example
Aleksandar
Telerik team
commented on 28 Jun 2021, 06:19 AM

I have updated the answer with a sample snippet of a possible approach.
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or