jQuery UI Widgets Forums Grid using grid and dataadapter in asp net core 2.2

This topic contains 1 reply, has 1 voice, and was last updated by  RobWarning 4 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • RobWarning
    Participant

    Hi,
    is there somewhere an example of a jqxgrid / jqxdataadapter used in a asp net core 2 application?
    I am stuck in the very basic phase.

    I have now following server code:

    public class IndexModel : PageModel
        {
            private readonly RoosterApp.Data.ApplicationDbContext _DB;
            private readonly IRoosterServices _roosterService;
    
            public IndexModel(RoosterApp.Data.ApplicationDbContext context, IRoosterServices roosterService)
            {
                _DB = context;
                _roosterService = roosterService;
            }
    
            public void OnGet()
            {
            }
    
            public IActionResult OnGetRecords()
            {
    //Brake point here is never reached!            
    var Mut = from M in _DB.Mutations
                          join S in _DB.Shifts on M.ShiftId equals S.ShiftId
                          join U in _DB.RoosterUsers on M.UserId equals U.RoosterUserId
                          select new { Id = M.MutationId, Naam = U.FirstName + " " + U.LastName, UserId = M.UserId, MutationType = S.publicName };
                return new JsonResult(Mut);
            }
        }
    }

    this code resides in Areas/Mutations/index.cshtml.cs
    when I open the index page the grid is visible but no data.
    this is my script file:

    $(document).ready(function () {
        var url = '../Mutations/Index/Records';
    
        //create the source.
        var source = {
            datafields: [
                { name: 'Id', type: 'string' },
                { name: 'Naam', type: 'string' },
                { name: 'UserId', type: 'string' },
                { name: 'MutationType', type: 'string' }
            ],
            url: url,
            id: 'Id'
        };
    
        //create the data-adapter.
        var dataAdapter = new $.jqx.dataAdapter(source);
    
        //initialize the grid.
        $('#grid').jqxGrid({
            width: 1500,
            source: dataAdapter,
            Columns: [
                { text: 'Mut. Id',datafield: 'Id', align: 'center', width: 80 },
                { text: 'Naam', datafield: 'Naam', align: 'center', columngroup: 'user', width: 120 },
                { text: 'User Id', datafield: 'UserId',align: 'center', columngroup: 'user', width:80},
                { text: 'verlof type', datafield: 'MutationType', align: 'center', width: 120 }
            ]
        });
    });

    I did try all different kind of URL strings. but it seems that there is no call to the server from the Client to collect the data.
    can somebody point me out what I am doing wrong


    RobWarning
    Participant

    I found it myself,
    first I forgot the source datatype variable.

    so my source is now:
    var source = {
    datatype: ‘json’,
    datafields: [
    { name: ‘Id’, type: ‘string’ },
    { name: ‘Naam’, type: ‘string’ },
    { name: ‘UserId’, type: ‘string’ },
    { name: ‘MutationType’, type: ‘string’ }
    ],
    url: url,
    id: ‘Id’
    };

    the the url string I changed to: var url = ‘../Mutations/Index?handler=Records’;

    and now my server gets called.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.