CODEWITHSUNDEEP
javascriptc#jquerykendo-uiasp.net-mvc-5
Jean-François Beaulieu
Jean-François Beaulieu

Reputation: 4445

Kendo UI Grid pass id from text input to Read command

What would be the best way to pass the id to the controller using the Read command of a Kendo UI Grid? The id has to be obtained from a textbox and the trigger to load data in the grid has to be from a button click. I prefer using javascript and jQuery to achieve this. This is the code I've got so far:

Controller:

    public ActionResult StrategyParameter_Read([DataSourceRequest]DataSourceRequest request, int? id)
    {
        IQueryable<StrategyParameter> strategyParam = 
                               _db.StrategyParameter.Where(p => p.StrategySetId == id);
        DataSourceResult result = strategyParam.ToDataSourceResult(request, sp => new {
            Id = sp.Id,
            StrategySetId = sp.StrategySetId,
            ParamType = sp.ParamType,
            Key = sp.Key,
            Value = sp.Value,
            MinimumValue = 0,
            MaximumValue = 0,
            IncrementalValue = 0
        });

        return Json(result);
    }

View:

<div class="form-group strategy-set-id">
    <label class="col-sm-2 control-label" for="strategySetId">Strategy Set ID</label>
    <div class="col-sm-4">
        <input type="number" min="0" step="1" id="strategySetId" class="form-control" placeholder="Enter a Strategy Set ID">
        <span class="help-block"></span>
    </div>
    <div class="col-sm-offset-2 col-sm-1">
        <button type="submit" class="btn btn-primary" id="get-params">Get Parameters</button>
    </div>
</div>

@(Html.Kendo().Grid<StrategyParameterViewModel>()
    .Name("strategyParameters")
    .Columns(columns =>
    {
      columns.Bound(c => c.Id).Width(170);
      columns.ForeignKey(p => p.ParamType, (System.Collections.IEnumerable)ViewData["paramTypes"], "Key", "Value").Title("Param Type").Width(200);
      columns.Bound(c => c.Key);
      columns.Bound(c => c.Value);
      columns.Bound(c => c.MinimumValue);
      columns.Bound(c => c.MaximumValue);
      columns.Bound(c => c.IncrementalValue);
    })
    //.ColumnMenu()
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pager =>
        pager.Refresh(true)
    )
    .Navigatable()
    .Resizable(resize => resize.Columns(true))
    .Sortable(sortable =>
    {
      sortable.SortMode(GridSortMode.SingleColumn);
      sortable.AllowUnsort(false);
    })
    .Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Model(model =>
        {
          model.Id(p => p.Id);
          model.Field(p => p.Id).Editable(false);
        })
        .Read(read => read.Action("StrategyParameter_Read", "StrategySets"))
        .Sort(sort => sort.Add("Id").Descending())
    )
    .Deferred()
)

Upvotes: 0

Views: 1749

Answers (1)

Ross Bush
Ross Bush

Reputation: 15155

If the value is available during your configuration then you only have supply a function call to return the data in the Data property.

.DataSource(dataSource => dataSource
    .Ajax()
    ...
    .Read(read => read.Action("StrategyParameter_Read", "StrategySets").Data("getMyID"))
    ...
 )

JS function

 function getMyID() 
     return {
         MyID:$("#tbID").val();                
     }
 }

If the value is only available after the initial grid configuration then you can refresh the grid using:

 grid.dataSource.read({ MyID:$("#tbID").val()});

Upvotes: 4

Related Questions