Kendo grid, model bound, how to use ajax

[Emil]

This is my Model bound view which works. 

What I need to be able to do is select a row from this grid and get its id, the id is in the vaultNidurstodur class.

From what I have gathered is that I need to use ajax, when I change from server to ajax I just get an empty grid.

How would I go about changing this to ajax ?

 

@model IEnumerable<VaultLeitarvefur.Models.VaultNidurstodur>
    <div class="col-xs-1">
        @(Html.Kendo().Grid<VaultLeitarvefur.Models.VaultNidurstodur>(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Verkefni).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key01).Width(150);
        columns.Bound(p => p.Verkefnisnumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key02).Width(100);
        columns.Bound(p => p.NanariStadsetning).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key03).Width(100);
        columns.Bound(p => p.EfniTeikningar).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key04).Width(100); ;
        columns.Bound(p => p.Teikninganumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key08).Width(100); ;
        columns.Bound(p => p.Utgafa).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key13).Width(100); ;
        columns.Bound(p => p.DagsetningUtgafu).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key14).Format("{0:dd/MM/yyyy}").Width(100); ;
        //columns.Bound(p => p.file.Name).Filterable(false);
        columns.Bound(p => p.Id).Filterable(false).Visible(false);
        columns.Bound(p => p.File.Name).Title("Heiti").Width(100); ;
        columns.Bound(p => p.File.ModDate).Format("{0:dd/MM/yyyy}").Title("Breytingardags").Width(100); ;
    })
    .Events(events =>
              events.Change("row_change") // handle the "change" event
          )
    .DataSource(dataSource => dataSource
        .Server()
        .PageSize(40)
        .Model(model => model.Id(p => p.Id))
    )
    .Selectable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:750px;width:1800px;" })
        )
    </div>

 

I have a controler action

 

        public ActionResult Index()
        {
            List<VaultNidurstodur> returnList = CacheList();

            return View(returnList);
        }

that finds and returns a list of results.

Regards,

Emil

 

[Radoslav]

Hi Emil,

You can get the id from the selected row’s underlying model object by using following code snippet:

<script type="text/javascript">
    function row_change(e) {
        var selectedRow = e.sender.select().get(0);
        var id = e.sender.dataItem(selectedRow).Id;
        alert(id);
    }
</script>

Additionally I am sending you a simple example based on your code which demonstrates this approach. Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Emil]

There was a serious misunderstanding on my part.

        public ActionResult Read([DataSourceRequest]DataSourceRequest request)

        {
            return Json(GetProducts().ToDataSourceResult(request));
        }

this works in my situation

        public ActionResult Read([DataSourceRequest]DataSourceRequest request)
        {
            List<VaultNidurstodur> returnList = CacheList();
            return Json(returnList.ToDataSourceResult(request));
        }

my misunderstanding was that I thought [DataSourceRequest]DataSourceRequest request was some sort of a databound object that had to be tied to a database. But this works like a charm, Im quite happy thank you

 

Regards,

Emil