jQuery UI Widgets › Forums › Getting Started › Adding row to grid with 2 dropdowns from related tables

Tagged: , , , , , , , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 7 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Adding row to grid with 2 dropdowns from related tables Posts
  • December 18, 2016 at 11:15 am Adding row to grid with 2 dropdowns from related tables #89924

    Amazingg
    Participant

    Hello, jqwidgets Team,
    I have few questions about your grid.
    reached so far
    This image shows what i’ve reaches so far.
    Database scheme
    This is the three tables that i’m using for this grid.
    Add row with dropdown columns
    This pictures shows how i want to add row and the dropdown columns that i want to be loaded from database as the already added rows.
    And the advanced thing that i want to achieve is:

      On adding or updating dropdown columnsp –
      in this case Countries and Towns for example when changing country name the towns that are in this country should be shown only, and respectively when changing Town dropdown column to be shown only the country of the chosen town.

    issue when updating row
    This picture shows what happening when I’m trying to update a row – the values of dropdown columns are clearing.
    I’m using http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/everpresentrowaddremoveupdate.htm this sample for adding a new row.
    I will post and the code of my View aswell. I’m using ASP.NET MVC if you think that the controller code should be changed i will post you my controller code.

    @*@model LogisticsEngineeringLTD.ViewModels.Employees.EmployeesTownsViewModel*@

@{
    ViewBag.Title = "Worker";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
    </title>
    <meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />
    @*<link rel="stylesheet" href="~/Content/jqx.base.css" type="text/css" />*@
    <script type="text/javascript">
        $(document).ready(function () {

            var countrySource =
                 {
                     datatype: "json",
                     datafields: [
                         { name: 'Id', type: 'string' },
                         { name: 'CountryName', type: 'string' },
                     ],
                     id: 'Id',
                     url: '/Employee/GetCountries',
                     async: false
                 };

            var countryAdapter = new $.jqx.dataAdapter(countrySource, {
                autoBind: true
            });

            var townSource =
                {
                   datatype: "json",
                   datafields: [
                       { name: 'Id', type: 'string' },
                       { name: 'TownName', type: 'string' },
                   ],
                   id: 'Id',
                   url: '/Employee/GetTowns',
                   async: false
                };

            var townAdapter = new $.jqx.dataAdapter(townSource, {
                autoBind: true
            });

            var source =
            {
                datatype: "json",
                datafields: [
                     { name: 'Id', type: 'number' },
                     { name: 'EmployeeName', type: 'string' },
                     { name: 'Address', type: 'string' },
                     { name: 'Identitycard_num', type: 'string' },
                     { name: 'PhoneNumber', type: 'string' },
                     { name: 'Town', value: 'TownId', values: { source: townAdapter.records, value: 'Id', name: 'TownName' } },
                     { name: 'TownId', type: 'string' },
                     { name: 'Country', value: 'CountryId', values: { source: countryAdapter.records, value: 'Id', name: 'CountryName' } },
                     { name: 'CountryId', type: 'string' }
                ],
                id: 'Id',
                url: '/Employee/GetEmployees',
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                showtoolbar: true,
                theme: 'Darkness',
                pageSize: 5,
                sortable: true,
                filterable: true,
                pageable: true,
                editable: true,

                everpresentrowactions: "add update remove reset",
                showeverpresentrow: true,
                everpresentrowposition: "top",
                everpresentrowactions: "add update remove reset",
                //selectionmode: 'multiplecellsadvanced',
                selectionmode: 'singlecell',
                columns: [
                    { text: "Name", datafield: "EmployeeName" },
                    { text: "Address", datafield: "Address" },
                    { text: "Id Card Number", datafield: "Identitycard_num" },
                    { text: "Phone Number", datafield: "PhoneNumber" },
                    { text: 'Town', datafield: 'TownId', displayfield: 'Town', columntype: 'dropdownlist', width: 150 },
                    { text: 'Country', datafield: 'CountryId', displayfield: 'Country', columntype: 'dropdownlist', width: 150 },
                ]
            });                      
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Best regards,
    Stanislav Chankov

    December 21, 2016 at 6:09 am Adding row to grid with 2 dropdowns from related tables #90005

    Dimitar
    Participant

    Hello Stanislav,

    1. The demo Ever Present Row with Custom Widgets shows how to add a jqxDropDownList editor in an ever present row cell (as in your mock-up image).
    2. Using the createeverpresentrowwidget and/or initeverpresentrowwidget you can recreate the functionality presented in the demo Cascading ComboBoxes in order to achieve cascading ever present row dropdownlists.
    3. Your code seems fine. The demo you used as reference also works as expected. Are there any errors thrown in your browser’s console when trying to update a row? And do you need to post your changes back to the database? If so, please refer to the following help topic to learn how this can be done: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-crud.htm.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.