Need to pass string param to grid ajax bound in partial page

8 posts, 0 answers
  1. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 13 Jun 2017 Link to this post

    I have a main page "JLO" that accepts user input using a kendo text box.  User then clicks a button that is handled by a jquery script that opens the partial page.  I am stuck on passing the param [textbox value] to the partial page and rendering the grid.

    this is my basic code.

    main view

    <div id="userinput" class="row">
        <ul class="userrentry">
            <li>
                @Html.Label("User ID")
                @Html.Kendo().TextBox().Name("searchuserid")
            </li>
            <li>
                @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
            </li>
        </ul>
    </div>
    <div id="sessionsfound" class="row grid-centered" style="display:none">
    </div>
    <div id="success" class="row grid-centered" style="display:none">
    </div>
    <script type="text/javascript">
     
        $('#findUser').click(function () {
          
            var userid = $('#searchuserid').val();
            $("#userinput").css("display", "none");
            $('#sessionsfound').css("display", "block");
            //alert(userid)
            $("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');
        })
     
    </script>

     

    Partial view for Grid

    @model string
    <div>
        @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
           .Name("VSM_Grid")
          .AutoBind(false)
          .DataSource(data => data
          .Ajax()
          .Model(model =>
            {
              model.Id(m => m.id);
             })
               .Read(read => read.Action("sessions_read", "Home", new { userid = Model }))
              .Data("readuser")
               )
     
               .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
            .Columns(c =>
                {
                    c.Bound(i => i.id).Title("ID").Width(10);
                    c.Bound(i => i.farmName).Title("Farm").Width(25);
                    c.Bound(i => i.domainName).Title("Domain").Width(25);
                    c.Bound(i => i.applicationName).Title("App Name").Width(75);
                    c.Bound(i => i.serverName).Title("Server").Width(25);
                    c.Bound(i => i.sessionID).Title("Session ID").Width(10);
                })
        ))
     
     
    </div>
     
    <div class="kbutton-centered">
        @Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })
    </div>
     
    <script type="text/javascript">
        debugger;
        var userID = @Model ;
        var grid = $("#VSM_Grid").data("kendoGrid");
        grid.dataSource.read();
     
        function readuser() {
            debugger
            return {
     
                userid: userID
            };
        }
     
    </script>
  2. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 15 Jun 2017 Link to this post

    Hi Conway,

    The @Url.Action() method is proccessed server side, so you cannot pass client side value to this function as a parameter. You can concat the client side variables with the server side url generated by this method, which is a string on the output.

    Change the following:

    $('#findUser').click(function () {
           
            var userid = $('#searchuserid').val();
            $("#userinput").css("display", "none");
            $('#sessionsfound').css("display", "block");
            //alert(userid)
            $("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');
    })

    With the code below:

    $('#findUser').click(function () {
           
       var userid = $('#searchuserid').val();
       $("#userinput").css("display", "none");
       $('#sessionsfound').css("display", "block");
       //alert(userid)
       $("#sessionsfound").load('@Url.Action("Display", "Customer")?userid=' + userid);
    })


    Regards,
    Georgi
    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. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 16 Jun 2017 Link to this post

    Thanks, but I was going a different direction.

    I am trying to use AJAX to call my partial page. I can successfully get the partial page controller to fire off with the model returned.  The grid will not load or show up on the page.  

    not sure what the issue is. 

     

    Thanks Jay.

     

    here is index view

    @model Jlo4MVC.Models.UserToSend
     
    @{
        ViewBag.Title = "JLO";
    }
     
    <div id="userinput" class="row">
        <ul class="userrentry">
            <li>
                @Html.Label("User ID")
                @Html.Kendo().TextBox().Name("searchuserid")
            </li>
            <li>
                @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
            </li>
        </ul>
    </div>
    <div id="sessionsfound" class="row grid-centered" style="display:none">
     
    </div>
    <div id="success" class="row grid-centered" style="display:none">
    </div>
    <script type="text/javascript">
     
        $('#findUser').click(function () {
            var myurl = '@Url.Action("getSessionsView", "home")'
            var model = { userID: $("#searchuserid").val() };
            $('#userinput').css("display", "none");
            $('#sessionsfound').css("display", "block");
           
            $.ajax({
                url: myurl,
                type: "POST",
                datatype: "text/plain",
                data: JSON.stringify(model),
                success: function(data) {
                    alert(data);
                    $('#sessionsfound').html(data);
                }
            });
        });
    </script>

     

    My partial page

    @model Jlo4MVC.Models.UserToSend
    <div>
        @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
           .Name("VSM_Grid")
          .AutoBind(false)
          .DataSource(data => data
          .Ajax()
          .Model(model =>
            {
                model.Id(m => m.id);
            })
                       .Read(read => read.Action("sessions_read", "Home").Data("{ userID: "+@Model.CustId+"}"))
     
               .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
            .Columns(c =>
                {
                    c.Bound(i => i.id).Title("ID").Width(10);
                    c.Bound(i => i.farmName).Title("Farm").Width(25);
                    c.Bound(i => i.domainName).Title("Domain").Width(25);
                    c.Bound(i => i.applicationName).Title("App Name").Width(75);
                    c.Bound(i => i.serverName).Title("Server").Width(25);
                    c.Bound(i => i.sessionID).Title("Session ID").Width(10);
                })
                 
        ))

     

    controller

    [AcceptVerbs("POST")]
           public ActionResult getSessionsView(UserToSend usertosend)
           {
     
               return PartialView("_GetSessionsView", usertosend);
           }
     
    public ActionResult sessions_read([DataSourceRequest] DataSourceRequest request, UserToSend usertosend)
           {
     
               List<SessiondataDTO> sdto = new List<SessiondataDTO>();
               sdto.Add(new SessiondataDTO { applicationName = "testapplication", farmName = "testFarm", domainName = "MS", id = 1, serverName = "server01", userID = usertosend.userID, sessionID = 01 });
               sdto.Add(new SessiondataDTO { applicationName = "testapplication4", farmName = "testFarm", domainName = "MS", id = 2, serverName = "server02", userID = usertosend.userID, sessionID = 18 });
               sdto.Add(new SessiondataDTO { applicationName = "testapplication3", farmName = "testFarm", domainName = "MS", id = 3, serverName = "server12", userID = usertosend.userID, sessionID = 15 });
               sdto.Add(new SessiondataDTO { applicationName = "testapplication7", farmName = "testFarm", domainName = "MS", id = 4, serverName = "server00", userID = usertosend.userID, sessionID = 8 });
     
             
               DataSourceResult result = sdto.ToDataSourceResult(request);
     
               return Json(result, JsonRequestBehavior.AllowGet);
           }
  4. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 19 Jun 2017 Link to this post

    Hello Jay,

    I examined your code and noticed two things. First thing is that the jQuery ajax request uses JSON.stringify method to stringify the body of the request and MVC5 is not able to bind it properly. Also in the configuration of the grid AutoBind property was set to false. This means that the grid wont request any data until the .fetch method is executed.

    I have modified your code and I assembled a small sample. Please check out the attach project (partial-view-grid.zip) and let me know if it works for you.

    Regards,
    Georgi
    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.
  5. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 19 Jun 2017 in reply to Georgi Link to this post

    thanks for your example.  How you have it configured works userid as int. but when I change the project to reflect what I need the same issue I run into still occurs. the grid does not like the userid passed as string.  Grid does not get created.  Just does not make any since.  json should not care.  I am passing the type as string.

    in your example,

    change model classes to the following.  Basically UserId has to be string type. 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace KendoUIMVC5.Models
    {
        public class UserToSend
        {
            public string UserId { get; set; }
        }
    }

     

    namespace KendoUIMVC5.Models
    {
        public class SessiondataDTO
        {
            public int Id { get; set; }
     
            public string ApplicationName { get; set; }
     
            public string FarmName { get; set; }
     
            public string DomainName { get; set; }
     
            public string ServerName { get; set; }
     
            public string UserId { get; set; }
     
            public int SessionId { get; set; }
        }
    }
  6. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 20 Jun 2017 Link to this post

    Hi Jay,

    This happens because Data property expects the name of the function that will supply the read method with additional data, not an object. 

    I have modified and attached (partial-view-grid.zip) the project to set the additional as parameter in the Action method.


    Regards,
    Georgi
    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.
  7. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 22 Jun 2017 in reply to Georgi Link to this post

    Thanks for your help.  Your answer provided me a solution.    I do have one final question,  I attempted to use per your documentation. See simple example below.  It did not work.  Why did this not work?

    .Read(read => read.Action("sessions_read", "Home").Data('paramdata')

     

    function() {

    userID : '@Model.userID'

    }

  8. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 23 Jun 2017 Link to this post

    Hello Jay,

    Your example will work if the name of the function that delivers additional data to the read action matches the specified name inside the Data method.

    In other words if you change the function with the following your example will work:

    function paramdata() {
      return { userID : @Model.userID }
    }


    Regards,
    Georgi
    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