How to load window content from PartialView

10 posts, 0 answers
  1. T
    T avatar
    3 posts
    Member since:
    Feb 2012

    Posted 02 Feb 2012 Link to this post

    Hi
    I'm using Kendo window in my MVC application. I was wondering if there is any way to fill the content of the window from partialView ?
    For example I have a partial view stored in file PartialViewSample.cshtml

    @model Product
    @using(Html.BeginForm("InsertProduct","Product"))
    {
        Html.TextBoxFor(val => val.Name);
        Html.TextBoxFor(val => val.Id);
    }

    and in some other place I would like to load this content to kendo window.

    <button id="addButton">Add</button>
     <script type="text/javascript">
         $(document).ready(function () {
             var window = $("#window").kendoWindow({
                 height: "200px",
                 modal: true,
                 title: "Centered Window",
                 visible: false,
                 width: "200px"
                 
             }).data("kendoWindow");
         });

    If the user clicks the button I would like to load content of the window. I was trying to do this that way

        
    $("#addButton ").click(function () {
            var window = $("#window").data("kendoWindow");
            window.content("@Html.Partial("PartialViewSample ",new Product()).ToHtmlString()");
            window.center();
            window.open();
        });
    Unfortunatelly it doesnt work. Is there any way to load content of the window from using Html.Partial or sth like that ?
  2. TrentCioran
    TrentCioran avatar
    13 posts
    Member since:
    Aug 2012

    Posted 18 Mar 2012 Link to this post

    The content property will load content sing ajax, you should do this

    $("#addButton ").click(function () {
            var window = $("#window").data("kendoWindow");
            window.content("YourController/YourActionReturningThePartialView");
            window.center();
            window.open();
        });

    Cheers,
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Mar 2012 Link to this post

    If you want to display static content in the window, by rendering it to the page or from a HTML string, you can do so by:
    • setting the content of the element that the window is created from,
      $("#window").html("<p>foo</p>").kendoWindow();
    • using the content method after the window has been initialized:
      var dialog = $("#window").data("kendoWindow");
      dialog.content("<p>foo</p>");

    If you want to load content in the window dynamically (through AJAX), you can do so by:
    • using the content initialization option:
      $("#window").kendoWindow({
          content: {
              url: "/customerDetails",
              data: { customerId: 100 }
           }
      }); 
    • using the refresh method after the window has been intialized:
      var dialog = $("#window").data("kendoWindow");
      dialog.refresh({
          url: "/search",
          data: { query: "foobar" }
      }); 


    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Palani
    Palani avatar
    5 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2012 Link to this post

    Awesome :)
    the refresh method is working
    thanks
  6. Ho
    Ho avatar
    1 posts
    Member since:
    Feb 2012

    Posted 19 Dec 2012 Link to this post

    hi Alex Gyoshev
    how to get customerID in Controller.
    I'm using MVC3

    Please help me!!

    Thanks
  7. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    You will just have to add a parameter named "customerId" from type "int" to the controller action method.
    The MVC ModelBinder then will automatically put in the matching value from the request.

    Regards,
    Holger
  8. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 22 May 2013 Link to this post

    Initializing data like this does not seem to work in the latest version (2013.1.514):

    $("#window").kendoWindow({
        content: {
            url: "/customerDetails",
            data: { customerId: 100 }
         }
    }); 

    You only have access to the url to pass query string parameters using asp.net mvc 4.
  9. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 27 May 2013 Link to this post

    Hello,

    I attached a sample MVC 4 project  that uses the provided code to send a parameter to the controller. At least on my side it is working as expected. Please check it and let me know if I am missing something.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 28 May 2013 Link to this post

    Enable the iframe feature of your window and then observe the behavior.  You will now have to make your parameter null and it is not passed in.
  11. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 31 May 2013 Link to this post

    Hello,

    If you are using an iframe then the values should be added as query string parameters to the URL.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready