Kendo grid, model bound, how to use ajax

3 posts, 1 answers
  1. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 18 Apr Link to this post

    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

     

  2. Answer
    Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 20 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 20 Apr in reply to Radoslav Link to this post

    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

     

Back to Top