Change data URL on MVC Grid

8 posts, 0 answers
  1. Richard Averett
    Richard Averett avatar
    10 posts
    Member since:
    Jan 2010

    Posted 14 Aug 2012 Link to this post

    I have a MVC Grid which is loading fine on the initial load. It uses the following code:

    .DataSource(dataSource => dataSource 
            .Ajax()
            .PageSize(100)
        .Read(read => read.Action("AccountByType", "Organization", new { AccountType = 1 }))
    )

    I can successfully refresh the grid by calling the following:

    $("#AccountGrid").data("kendoGrid").dataSource.read();

    However, I need to change the query value that is passed in based on different selections the user makes on the page. So for example, I need to change the AccountType from 1 to 2 and refresh the grid. I tried the following:

    $("#AccountGrid").data("kendoGrid").dataSource.options.transport.read.url = "/Organization/AccountByType?AccountType=2";
    $("#AccountGrid").data("kendoGrid").dataSource.read()

    But it doesn't work. Any suggestions on how to make this work?



  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Aug 2012 Link to this post

    Hello Richard,

    Basically in such scenarios when you want to change the parameters send to the server dynamically on the client, you should use the Data method to specify a function which result will be send to the server.

    http://docs.kendoui.com/api/framework/datasource#transport.read.data-object|string|function


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    4 posts
    Member since:
    Aug 2012

    Posted 20 Aug 2012 Link to this post

    Hi Richard/Petur,

    I have exactly the same issue, i am using razor syntax to build the grid on the page, please see the value OrgID=62, once this control is rendered how do i change the 62, i have tried all sorts of ways of doing this and no joy, also Petur, you said we should use a javascript datasource accorind to you link provided, but how do you changes this if using razor syntax. i am quite shocked at the lack of documentation regarding doing this, this should be a basic feature and the method for achieving this should be freely available.

    @{Html.Kendo().Grid<EasyAssets.Model.DTO.LoadDTO>()
        .Name("LoadList")
        .Columns(columns =>
        {
            columns.Bound(p => p.LoadID).Groupable(false).Visible(false);
            columns.Bound(p => p.LoadNumber).Width("50px");
            columns.Bound(p => p.ExpectedStartDate).Format("{0:d}").Width("80px");
            columns.Bound(p => p.fleetnumber).Width("50px");
            columns.Bound(p => p.Organisation).Width("120px");
            columns.Bound(p => p.user).Width("50px");
            columns.Bound(p => p.loadStatus).Width("50px");
            columns.Command(command => command.Custom("Print").Click("Print")).Width("50px");
            columns.Command(command => command.Custom("ConfirmLoad").Click("Confirm")).Width("50px");


        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("detailTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("LoadListBinder", "PlannedTrips", new { OrgId = "62" }))
            .PageSize(15)
        )
        .HtmlAttributes(new { style = "height: 550px" })
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Render();
    }
  5. Jim.Mills
    Jim.Mills avatar
    5 posts
    Member since:
    Jan 2012

    Posted 21 Aug 2012 Link to this post

    I am having a similar issue.  I am using the .Data("methodname()") and it works the first time, but when I call the .read() action in javascript, it never calls the Data method again?

    My View: 
    <input type="button" value="Ajax" onClick="onRetrieve()" />


    .DataSource(datasource => datasource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("_GetGridList","Log")
                          .Data("GetCriteria()"))

    and here is my javascript functions:
    function GetCriteria() {
        var obj = {
            StartDate : $("#StartDate").val(),
            EndDate : $("#EndDate").val(),
            SelectedApplication: $("#SelectedApplication").val(),
            SelectedMachine: $("#SelectedMachine").val(),
            SelectedEnvironment: $("#SelectedEnvironment").val(),
            SelectedUserName: $("#SelectedUserName").val(),
            ErrorID: $("#ErrorID").val(),
            SearchValue: $("#SearchValue").val()
        };
        return obj;
    };

    function onRetrieve() {
        var grid = $("#GridErrorList").data("kendoGrid");
        grid.dataSource.read();
    };


    and here is my controller...
    [HttpPost]
         public ActionResult _GetGridList([DataSourceRequest] DataSourceRequest request, SearchCriteria CriteriaModel)
             {
     
             ViewModel model = new ViewModel();
             model.Criteria = CriteriaModel;
     
             ValidateModel(CriteriaModel);
             model.Result = SearchForErrors(model.Criteria);
             DataSourceResult result = model.Result.Items.ToDataSourceResult(request);
             return Json(result);
     
             }


  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Aug 2012 Link to this post

    Hi Jim,

    You should pass only the name of the function to the Data method - without the brackets. 
    .Read(read => read.Action("_GetGridList","Log")
                          .Data("GetCriteria"))


    Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Andrew
    Andrew avatar
    4 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2012 Link to this post

    Hi Jim,

    I havent seen your method before, can you post an example or link of how to setup a model that accepts the criteria you are posting. sorry but i am very new to both kendo and MVC, battleing to get my head around things, been in webforms dev for a long time.

    Regards
    Andrew
  8. Jim.Mills
    Jim.Mills avatar
    5 posts
    Member since:
    Jan 2012

    Posted 22 Aug 2012 Link to this post

    Thank you Peter, that worked great!  I appreciate the quick response.  I have another question, if you don't mind me asking.  The additional data that I am sending to the controller is basically from the model that was sent to the view.  Is there a way I can grab that directly and send it as an object to the controller, or do I have to do as the code above is written and generate my own object and fill it?

    ==========================
    Andrew..., I'm very new to MVC and Javascript myself.  I'm still working on it, but basically I have created a Model that has the search criteria on it (simple class with the appropriate properties).  This gets generated in the view the first time using standard Razor syntax.

    I started off by putting these criteria inputs in a form and including a submit button.  This worked great and sent the criteria to the controller and I did my search and returned the same model, except the results were attached and I bound them to the Kendo Grid using razor syntax (no ajax).  I didn't like this because I lost the status of the Grid's (sort, group, etc.) because it was basically a new call to the server each time, so my next step was to change the page so that the Grid was filled and refreshed via ajax.

    That is what the code above is doing.  When a button is clicked, it calls my Retrieve() java script function which executes the Grid.DataSource.Read() method.  The Read Action is defined to go to a particular action on a particular controller (see above).  The Read Action also has a .Data() attribute that allows you to specify a javascript function to generate additional data to be sent to the controller.  This is where I am generating a basic object and filling the parameters from my "Search Criteria" form.  
    Originally, I wanted to just grab the form (since it matched my Model exactly) out of the Dom and send it, but I couldn't get it to serialize correctly, so I am instead creating a javascript object that matches my model, filling it with the values from the Dom using jQuery  and sending it.  This seems to work good.  It's still in progress, but if you need more help feel free to contact me and I can perhaps help out a bit.  It's no fun to struggle alone! :)

  9. Dylan
    Dylan avatar
    1 posts
    Member since:
    Jun 2012

    Posted 12 Sep 2012 Link to this post

    Richard,

    You were correct but.. Kendo stores the original read url in options.dataSource.transport.read.url
    But then read() gets it from dataSource.transport.options.read.url

    var grid = $("#AccountGrid").data("kendoGrid");

    grid.dataSource.transport.options.read.url = "/Organization/AccountByType?AccountType=2"
    grid.dataSource.read()
Back to Top
Kendo UI is VS 2017 Ready