Binding data from result triggered by a form

[Julien]

Hi everybody,

First of all, I'd like to say that I'm completely new to ASP.Net MVC and Kendo UI, and that I'm coming from the WPF world. That might give you some clues about the difficulties I'm facing here ;)

The scenario is quite basic, but I'm not able to achieve what I need to.
Let's image I have a form, that contains 4 search criteria.
- Start Date
- End Date
- Number
- String (city name)

From those 4 fields, I'm trying to feed a Grid in the same page (in AJAX), with data that is coming from an WCF webservice.

I've tried several ways to achieve this but everytime I'm facing a dead-en.

Here's a sample of my code.
The form:

@using (Ajax.BeginForm("UpdateSearchCriteria", "Home", new AjaxOptions() { HttpMethod = "post", OnSuccess = "Update" }))
{
    @(Html.Kendo().DatePickerFor(model => model.Criteria.StartDate)
        .Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
        .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
        )

    @(Html.Kendo().DatePickerFor(model => model.Criteria.EndDate)
        .Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
        .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
        )
    @(Html.Kendo().IntegerTextBoxFor(model => model.Criteria.Number).Min(1))


    @(Html.Kendo().AutoCompleteFor(model => model.Criteria.CityName)
              .Filter("contains")
              .MinLength(3)
              .BindTo(Common.Helpers.CityHelper.GetCityNames())
              .HighlightFirst(true)
              .IgnoreCase(true)
    )
    <input type="submit" value="Search!" />
}

The Grid :

@(Html.Kendo().Grid<Models.SearchResult>()
       .Name("SearchResultDataGrid")
       .Columns(columns =>
       {
           columns.Bound(p => p.Property.PropertyName).Title("Property");
           columns.Bound(p => p.Range).Title("Range");
           columns.Bound(p => p.Number).Title("Number");
       })
       .Sortable()
       .Scrollable()
       .AutoBind(false)
       .BindTo(Model.SearchResult)
       .DataSource(dataSource => dataSource // Configure the grid data source
         .Ajax() // Specify that ajax binding is used
         .Read(read => read.Action("Search", "Home")) // Set the action method which will return the data in JSON format
      )
   )

JS Update method

<script>
    function Update(response, status, data) {
        var grid = $("#SearchResultDataGrid").data("kendoGrid");
        grid.dataSource.read();
    }
    </script>

Now the controller:

public ActionResult UpdateSearchCriteria(Screen iModel)
        {
            return Json(iModel);
        }

[HttpPost]
        public ActionResult Search(Screen iModel)
        {
            [...]
            return Json(theDataSourceRS);
        }

Obviously, when entering the Search Action, my iModel isn't updated with the latest data from the form. That's the main painpoint I have since the process I'm doing with the WCF service call doesn't have the correct Search criteria.

Hope I was clear enough !
Let me know if you're missing parts to give me a hand !

Thanks a lot !

Julien.

[Petur Subev]

Hello Julien,

If I understand your idea correctly what you are trying to achieve is to rebind the Grid based on those four input fields.

In your scenario you are doing the following:

1. When the search button is clicked send the values to the server with Ajax
2. On Success of the Ajax request perform another Ajax request (dataSource.read())

However when performing dataSource.read again I assume that the response from the server will be the same. Also making two round trips to the server will slow down the whole process.

May I suggest you to remove that ajax form and perform dataSource.read() when the search buttons is clicked? You can send those four parameters from the inputs along with the request like this.

function onSearchButtonClick(){
     var grid = $('#SearchResultDataGrid').data('kendoGrid');
     grid.dataSource.read({
             StartDate: $('#Criteria_StartDate').data().kendoDatePicker.value();
                  //etc...
     });
}

This way inside the Search action method of the Home controller you can see if that Criteria model is populated and filter the collection manually before passing it to the ToDataSourceResult method.

I hope this helps achieving your goal.

Kind Regards,
Petur Subev
Telerik