kendo grid not refreshing data

Question

KendoUI Version: 2013.3.1316.545 OS: Windows 8 .NET: 4.5/C#

I have a multiSelect and a grid on a RazorView. My intention is to let users enter multiple items into the multiselect box and when they click a button, search for those items in the database and display them in the grid below by adding the selected items from the multiselect into a string and passing that string to my controller action.

All these work fine the first time. If the user modifies items in the multiselect and then click the search button, I recreate the query string and call my controller action from the button click event handler. I use the following code to reload the data.

    var dSource = $( grid ).data( 'kendoGrid' ).dataSource;
    dSource.transport.options.read.url = newUrl;
    dSource.read();

Though I can see in the debugger that the dSource.read() function is executed. But the call never hits my action method after the first call. If my totally refresh the page and call it again, it works. My assumption is that the dataSource is cached and never executed again though the querystring in the url has changed. How would I make it work? Any help is highly appreciated.

Here is all View code:

<div class="PCSectionPaddingTop5">
<form role="form">
    <div class="form-group">
        <label><span class="label label-danger">Ingredient(s)</span></label>
    </div>
    <div class="form-group">
        @(Html.Kendo().MultiSelect()
                    .Name( "IngredientMultiSelect" )
                    .DataTextField( "Name" )
                    .DataValueField( "PKGuid" )
                    .Placeholder( "Select Ingredients..." )
                    .Filter( Kendo.Mvc.UI.FilterType.Contains )
                    .AutoBind( true )
                    .DataSource( ds => ds
                         .Read( r => r.Action( "GetAllIngredients", "Ingredient" ).Type( HttpVerbs.Post ) )
                    ))
    </div>
    <div class="form-group">
        <button onclick="ReloadRec2IngrSearchGrid()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-search"></i>&nbsp;Search by Ingredient(s)</button>
        <button onclick="ClearRec2IngrSearchGrid()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-retweet"></i>&nbsp;Reset</button>
    </div>
    <div class="form-group">
        @(Html.Kendo()
                    .Grid<PowerChef.DAL.ViewModels.RecipeVM>()
                    .Name( "Recipe2IngrSearchKGrid" )
                    .Pageable()
                    .Scrollable()
                    .Sortable()
                    .Filterable()
                    .Resizable( resize => resize.Columns( true ) )
                    .Editable( ed => ed.Mode( GridEditMode.InLine ) )
                    .Columns( c =>
                    {
                        //c.Bound(x => x.PKId).Hidden(true);
                        c.Bound( x => x.PKGuid ).Hidden( true );
                        c.Bound( x => x.Name ).Title( "Name" );
                        c.Bound( x => x.Included ).Width( "20%" ).Sortable( false ).Filterable( false ).Title( "Include" )
                             .ClientTemplate( "<input type='checkbox' #= Included === true ? checked='checked' : '' # class='chkbx' />" );
                    }
                    )
                    .AutoBind( false )
                    .DataSource( ds => ds
                         .Ajax()
                         .ServerOperation( true )
                         .Read( r => r.Action( "GetRecipe2IngrSearchRecipes", "CustomerMenu", new { selectedIngrs = "" } ).Type( HttpVerbs.Post ) )
                         .Model( m =>
                         {
                             //m.Id(d => d.PKId);
                             //m.Field(d => d.PKId).DefaultValue(-1);
                             m.Id( d => d.PKGuid );
                             m.Field( d => d.PKGuid ).DefaultValue( new Guid() );
                         } )
                         .PageSize( 20 )
                    ))
    </div>
    <div class="form-group">
        <div class="pull-right">
            <button onclick="submitRec2IngrKGridSelection()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-download"></i>&nbsp;Finish Selection</button>
        </div>
    </div>
</form>

and Here is my javascript methods:

function ReloadRec2IngrSearchGrid() {

try {
    if ( !_.isUndefined( $( "#IngredientMultiSelect" ) ) && !_.isNull( $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ) ) && !_.isEmpty( $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ).value() ) ) {
        var parmValues = $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ).value();
        var parmName = "ingrId";
        ReloadDataSourceForGrid( "#Recipe2IngrSearchKGrid", parmName, parmValues );
    }
    else {
        PcGfShowNotification( 'error', "Error", "Invalid Parameter!" );
    }
} catch ( e ) {
    PcGfShowNotification( 'error', "Error", PcGvMsgTechFailure );
}

}

More JavaScript:

function ReloadDataSourceForGrid( grid, parmName, parmValues ) {
try {
    var kGridUrl = $( grid ).data( 'kendoGrid' ).dataSource.transport.options.read.url;
    var newUrl = PCAddQueryStringValueArrayToURL( kGridUrl, parmName, parmValues );
    var dSource = $( grid ).data( 'kendoGrid' ).dataSource;
    dSource.transport.options.read.url = newUrl;
    dSource.read();
    //$( grid ).data( 'kendoGrid' ).dataSource.transport.options.read.url = newUrl;
    //$( grid ).data( 'kendoGrid' ).dataSource.read();
} catch ( e ) {
    throw e;
}

}

Thanks. Babu.