win.refresh with grid dataItem data

4 posts, 0 answers
  1. Nouman
    Nouman avatar
    7 posts
    Member since:
    Jun 2017

    Posted 18 Sep Link to this post

    I have a custom Edit button on Grid.

    Upon clicking Edit, I get the selected grid data row:

    function onUserOrgEdit(e) {

    ...

    var data = this.dataItem($(e.currentTarget).closest("tr"));

    ...

    }

    Next, I need to refresh my window:

     var win = $("#createUserWindow").data("kendoWindow")

     win.refresh({
            url: "/Admin/EditOrgRole",
            data: data

    });

     

    I cannot JSON.stringify because wrong content-type is sent to controller action and asp.net core mvc not able to bind JSON correctly.  I get null values in controller action.  

    What is the correct way to do this?

     

    Thanks.

     

     

     

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 21 Sep Link to this post

    Hello Nouman,

    I am attaching an ASP.NET MVC project, where a similar scenario to the one described is demonstrated (Sending the currently edited Grid row model data to a controller end-point).

    To achieve the desired result, I have used the edit event of the Grid, where a new object is created, which is populated with the model data of the currently clicked grid row. The an ajax request is triggered with the Window refresh() method, by also passing the new model object as a parameter:
    <script>
    function onEdit(e) {
      var wnd = $("#window").getKendoWindow().center().open();
      var modelData = e.model;
     
      var modelData = {
        OrderID: modelData.OrderID,
        ProjectID: modelData.ProjectID,
        Freight: modelData.Freight,
        OrderDate: modelData.OrderDate,
        ShipName: modelData.ShipName,
        ShipCity: modelData.ShipCity
      }
     
      wnd.refresh({
        url: "/Home/GetWindowData",
        data: modelData,
        dataType: "json"
      });
    }
    </script>

    Then the data can be successfully received in the controller method with the following signature:
    public JsonResult GetWindowData(OrderViewModel model)
    {
    }


    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nouman
    Nouman avatar
    7 posts
    Member since:
    Jun 2017

    Posted 21 Sep in reply to Dimitar Link to this post

    Thanks for your response Dimitar.  This was my approach as well, but I was running into the following problem:

    For Asp.net core, it seems we need FromBody attribute in our controller action in order to bind JSON correctly.  This results in interrogating the header content-type.  It is expecting application/json but win.refresh is always sending x-www-url-formencoded - even if we specify dataType: "json"

    If you check in fiddler, what is the content-type header value?

    In all honesty, I have not spent too much time on this issue and this is just my guess.

     

    Thanks.

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 26 Sep Link to this post

    Hello Nouman,

    The contentType property tells the server that we are sending the data in JSON format. If it is not specified explicitly, the default content type will be used which is application/x-www-form-urlencoded.

    In the provided solution in my previous reply, a flat view model data is being sent to the server. In this case there is no need to set the contentType, as the model binder will be able to map the form data to your view model object in the server. Also there is no need to decorate the controller method parameter with the  [FromBody] attribute.

    If you have a complex object, then the contentType has to be set explicitly to "application/json". This will force the ajax request to send the JS object as the request payload, in the body of the request (in JSON format). To receive the data in the controller successfully, the parameter has to be decorated with [FromBody].

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top