Ticket T456218
Visible to All Users

dxDataGrid - Cascaded dropdown editors

created 8 years ago

Hallo

I'm using PHP language programming. I'd like to make an ajax drop down. Only data "Locations" belongs to industry "Crumb Rubber" comes out when I chose "Crumb Rubber" in industry drop down. You can see the image on attachment.

Here is my code :

$(function ()
{

var industry = <?= $industry ?>;
var location_ = <?= $location ?>;

$("#gridContainer").dxDataGrid({

{
            dataField: "industry_id",
            caption: "Industry",
            width: 125,
            validationRules: [
                { type: "required" },

],
            lookup: {
                dataSource: industry,
                displayExpr: "name",
                valueExpr: "id"
            }
    },
    {
            dataField: "location_id",
            caption: "Location",
            width: 125,
            validationRules: [
                { type: "required" },

],
            lookup: {
                dataSource: location_,
                displayExpr: "name",
                valueExpr: "id"
            }
    },

How and where should I put a syntax to call data "Location" related to data "industry" ?

Thank you

Answers approved by DevExpress Support

created 8 years ago (modified 8 years ago)

Hi,

You can use the approach illustrated in the T334359 - dxDataGrid - How to implement cascading lookup columns code example to implement this functionality. Should you need further clarification, feel free to ask. I will be happy to help you.

Thanks,
Alessandro.

    Show previous comments (1)
    DevExpress Support Team 8 years ago

      Hello Ahmad,

      You can handle the editorOptions.onValueChanged event of the required editor and access another editor using the dxForm.getEditor(field). For example:

      JavaScript
      { dataField: "Project_ID", editorType: "dxSelectBox", editorOptions: { items: bookingType, valueExpr: 'Project_ID', displayExpr: 'text', onValueChanged: function (e) { var projectEditor = $("#infoForm").dxForm("instance").getEditor("Project"); // set options for the projectEditor editor } } }

      "infoForm" in this example is ID of dxForm.

      A A
      Ahmad Lutfi Arief 8 years ago

        I still don't get it.

        Let say, I have two dropdowns for "Project" & "Worker"

        there are Project A and B. Project A has workers X, Y, Z. Project B has workers K,L,M, N.

        When I choose Project A. Only workers X, Y, Z comes out in the dropdown "Worker".

        How to implement this using dxForm ?

        Here is my code in PHP & Java script :

        <script id="jsCode">

        $(function ()
                {

        var projects = <?= $projects ?>;
            var workers = <?= $workers ?>;

        $("#form").dxForm({

        items: [
                {
                    dataField: "Project",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        items: projects,
                        displayExpr: "name",
                        valueExpr: "id",
                    },
                    validationRules: [{
                        type: "required",
                        message: "Project is required"
                    }]
                },
                {
                    dataField: "Worker",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        items: workers,
                        displayExpr: "name",
                        valueExpr: "id",
                    },
                    validationRules: [{
                        type: "required",
                        message: "Worker is required"
                    }]
                },

        Artem (DevExpress Support) 8 years ago

          Hello,

          Since the issue is different from the one discussed in the original thread, I've created a separate ticket on your behalf (T457525: How to implement cascading drop-down editors in dxForm). It has been placed in our processing queue and will be answered shortly.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.