jQuery UI Widgets Forums ASP .NET MVC how get right json data for display in jqxDropDownList with ASP.net Core

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 2 months, 1 week ago.

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

  • nhtrung1980
    Participant

    Dear everyone,

    I have using jqxDropDownList to update for group column, but it no display value. If I press F12 key, and refresh website, it show data very good, but I turn off console, it no display.

    I using same code in api controller for display grid, it working very well. I search for solution but not find out. Now, please every help me, how return right api controller json data for display dropdown list. Thank you so much.

    first, I show code for display main grid:
    This code using for display main grid, and it works very well, I can do update, delete, detail the row data.
    // GET: api/Tb0031
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Tb0031>>> GetTb0031()
    {
    var resultJson = JsonConvert.SerializeObject(await _context.Tb0031.ToListAsync());
    return Content( resultJson , “application/json”);
    }

    second, I used the same code for dropdownlist, but it not good, I don’t know how code right for it
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Tb0062>>> GetTb0062()
    {
    var dbResult = await _context.Tb0062.ToListAsync();
    var category = (from cat in dbResult
    select new
    {
    cat.S,
    cat.Sname
    });

    var resultJson = JsonConvert.SerializeObject(category);
    return Content(resultJson, “application/json”);
    }

    In HTML:

    <div id=’jqxWidget’>
    <div id=”grid”></div>
    </div>

    @section Scripts{

    <script lang=”text/javascript”>
    var response = new $.jqx.response();
    var device = response.device;
    var deviceHeight = device.height;
    var _theme = “energyblue”;
    var _url = “/api/Tb0054”;

    //test console
    /*var categories = new Array();
    $.ajax({
    //url: ‘/Get/ListTb0062’,
    url: ‘/api/Tb0062’,
    }).done(function (data) {
    console.log(data)
    });*/

    function loadData(_url) {
    var IventGroupSource =
    {
    url: ‘api/Tb0062’,
    type: “GET”,
    datatype: “json”,
    datafields: [
    { name: ‘S’, type: ‘string’ },
    { name: ‘Sname’, type: ‘string’ }
    ],
    };
    var IventGroupSourceAdapter = new $.jqx.dataAdapter(IventGroupSource, {
    autoBind: true
    });

    var source = {
    url: _url,
    type: “GET”,
    datatype: “json”,
    datafields: [
    { name: ‘Id’, type: ‘number’ },
    {
    name: ‘SNAME’, value: ‘S1’, values: {
    source: IventGroupSourceAdapter.records,
    value: ‘S’, name: ‘Sname’
    }
    }, // label of group code
    { name: ‘S1’, type: ‘string’ }, //group code
    { name: ‘InventoryName’, type: ‘string’ }, //item column
    { name: ‘UnitId’, type: ‘string’ }, //unit
    { name: ‘VatimPercent’, type: ‘number’ }, //price column
    ],
    };
    var mydataAdapter = new $.jqx.dataAdapter(source, {
    autoBind: true
    });

    $(“#grid”).jqxGrid({
    columns: [
    {
    text: ‘ID’, editable: false, sortable: false, filterable: false,
    columntype: ‘textbox’, filtertype: ‘textbox’, datafield: ‘Id’,
    cellsalign: ‘right’, width: 50
    },
    {
    text: ‘Group’,
    datafield: ‘S1’,
    displayfield: ‘SNAME’,
    columntype: ‘dropdownlist’,
    filtertype: ‘textbox’, width: 100,
    createeditor: function (row, value, editor) {
    editor.jqxDropDownList({
    source: IventGroupSourceAdapter,
    displayMember: ‘Sname’, valueMember: ‘S’,
    });
    },
    },
    { text: ‘Item’, filtertype: ‘textbox’, map: ‘m\\:properties>d\\:InventoryName’, datafield: ‘InventoryName’, width: 200 },
    { text: ‘Unit’, datafield: ‘UnitId’ , filtertype: ‘textbox’, map: ‘m\\:properties>d\\:UnitID’,},
    { text: ‘Price’, datafield: ‘VatimPercent’, filtertype: ‘textbox’, map: ‘m\\:properties>d\\:VatimPercent’, cellsalign: ‘right’, cellsformat: ‘n’, width: 100 },
    ],
    width: “100%”,
    source: mydataAdapter,
    showfilterrow: true,
    filterable: true,
    pageable: true,
    columnsresize: false,
    pagesize: 12,
    autoheight: false,
    pagermode: ‘default’,
    theme: _theme,
    editable: true,
    sortable: true,
    selectionmode: ‘singlerow’,
    });
    }

    $(document).ready(function () {
    loadData(_url);
    });
    </script>
    }


    Hristo
    Participant

    Hello nhtrung1980,

    Is there any error message in the console?
    I would like to mention that the “columns” property of the jqxGrid does not have a member “map”.
    If you should determinate this in the DataAdapter’s source.
    In the columns, you could specify the values for each column by “datafield” member (or “displayfield”, too).

    Also, I would suggest you try to use async: false in the DataAdapter’s sources.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.