Always adding the parameter I passed from another page as a filter to the grid

[John Taylor]

Hi,

I am calling the page with the following code: `.../inventorycount/inventorycountItem?inventoryCountId=3&inventoryLocationId=1`. There is no problem with that. However, I want to pass the `inventoryCountId=3` parameter to the Grid in any case, but it doesn't work. The following JavaScript actionBegin code also didn't work. I appreciate your assistance.

<form id="form_Element" class="custom-form">

    <div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <input type="text" id="InventoryCountId" value="@ViewBag.InventoryCountId" hidden>

                <input type="text" id="InventoryLocationId" value="@ViewBag.InventoryLocationId" hidden>

            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <ejs-autocomplete id="InventoryLocationRackId" dataSource="@ViewBag.InventoryLocationRacks" autofill="true" filterType="Contains"

                placeholder="Rack Number" popupHeight="250px">

                    <e-autocomplete-fields Text="RackNumber" Value="Id"></e-autocomplete-fields>

                </ejs-autocomplete>

            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <ejs-autocomplete id="PhysicalProductVariantId" dataSource="@ViewBag.PhysicalProductVariants" autofill="true" filterType="Contains" placeholder="Physical Product Variant Id" popupHeight="250px">

                    <e-autocomplete-fields Text="Id" Value="Id"></e-autocomplete-fields>

                </ejs-autocomplete>

            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <ejs-textbox placeholder="Note" id="Note"></ejs-textbox>

            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-2">

                <ejs-button id="add" content="Add" type="button"></ejs-button>

            </div>

        </div>

    </div>

</form>

<br>

<div class='control-wrapper'>

    <ejs-grid id="Grid" height="350" allowPaging="true" allowSorting="true" allowResizing="true" allowReordering="false" allowGrouping="true"

              toolbar="@(new List<string>() { "Delete", "CsvExport" , "ExcelExport" })" allowFiltering="true" allowSelection="true"

              actionComplete="actionComplete" actionBegin="actionBegin" created="created"

              allowExcelExport="true" toolbarClick="toolbarClick" allowTextWrap="true" actionFailure="actionFailure">

        <e-data-manager url="/InventoryCount/GetInventoryCountItemList" adaptor="UrlAdaptor" insertUrl="/InventoryCount/InsertInventoryCountItem"

                        updateUrl="/InventoryCount/UpdateInventoryCountItem" removeUrl="/InventoryCount/DeleteInventoryCountItem"></e-data-manager>

        <e-grid-pagesettings pageSizes="@(new string[] { "10", "20", "50", "100", "All" })" pageSize="20"> </e-grid-pagesettings>

        <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="false" mode="Normal" showDeleteConfirmDialog="true"

                             allowEditOnDblClick="false"></e-grid-editSettings>

        <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

        <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>

        <e-grid-columns>

            <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

            @*<e-grid-column field="RackNumber" headerText="Rack" validationRules="@(new { required=true})" editType='dropdownedit' width="100"

            edit="new {@params = RackDropDownList }">

            </e-grid-column>*@

            <e-grid-column field="InventoryCountId" headerText="Inventory Count Id" width="100">

            </e-grid-column>

            <e-grid-column field="InventoryLocationRack.RackNumber" headerText="Rack" editType='text' width="100">

            </e-grid-column>

            <e-grid-column field="PhysicalProductVariantId" headerText="Physical Product Variant Id">

            </e-grid-column>

            <e-grid-column field="Note" headerText="Note">

            </e-grid-column>

            @*<e-grid-column field="ProductVariantSKU" headerText="SKU" validationRules="@(new { required=true})" editType='dropdownedit'

            edit="new {@params = SingleDropDownList }">

            </e-grid-column>

            *@

        </e-grid-columns>

    </ejs-grid>

</div>

<style>

    .title {

        right: 15px;

        position: absolute;

    }

    #form_Element {

        height: 200px;

    }

    /* Form styles */

    .custom-form {

        left: 25%;

        width: 50%;

        height: 35%;

        padding-top: 10px;

        padding-bottom: 10px;

        display: block;

    }

    #add {

        margin-top: 1%;

    }

    .e-grid {

        margin-top: 20px;

    }

</style>

<script>

    var options = {

        rules: {

            'InventoryCountId': { required: true },

            'InventoryLocationRackId': { required: true },

        },

    };

    // Defines FormValidator to validate the TextBox

    var formObject = new ej.inputs.FormValidator('#form_Element', options);

    // Places error label outside the TextBox using the customPlacement event of FormValidator

    formObject.customPlacement = function (element, errorElement) {

        element.parentElement.parentElement.appendChild(errorElement);

    };

    function actionBegin(args) {

            var grid = document.getElementById('Grid').ej2_instances[0];

            grid.query = new ej.data.Query().addParams('ExternalId', $('#InventoryCountId').val());

    }

    function actionComplete(args) {

        if ((args.requestType === 'save')) {

            document.getElementById("PhysicalProductVariantId").ej2_instances[0].value = "";

            document.getElementById("Note").ej2_instances[0].value = "";

        }

    }

    function actionFailure(args) { //actionFailure event of Grid

        var url = '@Url.Action("Error", "Home")';

        window.location.rel='nofollow' href = url;

    }

    function toolbarClick(args) {

        if (args.item.id === this.element.id + '_excelexport') {

            this.excelExport();

        }

        if (args.item.id === this.element.id + '_csvexport') {

            this.csvExport();

        }

    }

    function created() {

        var formElement = document.getElementById("form_Element");

        var rules = validationRules(this.columns);

        new ej.inputs.FormValidator(formElement, rules);

    }

    function validationRules(cols) {

        // Columns validation rules are calculated

        var rules = [];

        var count = 0;

        while (count < cols.length) {

            var fieldName = cols[count].field;

            var validR = cols[count].validationRules;

            rules[fieldName] = (validR !== undefined) ? validR : null;

            count++;

        }

        return rules;

    }

    document.getElementById('add').addEventListener('click', function (args) {

        var formObj = document.getElementById("form_Element").ej2_instances[0];

        //var formObj = this.closest('.custom-form').ej2_instances[0];

        // Form is validated

        //if (formObj.validate()) {

            var formElement = document.getElementById("form_Element");

            var grid = document.getElementById("Grid").ej2_instances[0];

            // Values from the form's input elements are stored in a new object

            var inventoryCountId = parseInt(formElement.querySelector("#InventoryCountId").value);

            var inventoryLocationRackId = parseInt(formElement.querySelector("#InventoryLocationRackId").value);

            var physicalProductVariantId = parseInt(formElement.querySelector("#PhysicalProductVariantId").value);

            var note = formElement.querySelector("#Note").value;

            var newData = {

                "InventoryCountId": inventoryCountId, "InventoryLocationRackId": inventoryLocationRackId,

                "PhysicalProductVariantId": physicalProductVariantId, "Note": note }

            grid.addRecord(newData);

        //}

    });

</script>

[Joseph Christ Nithin Issack]

Hi John,

  Greetings from Syncfusion support.

 

Thank you for reaching out to us with your inquiry. We understand that you need assistance in resolving an issue you are facing with our grid. In order to provide an accurate and effective solution, we kindly ask that you provide us with the following information:

• Explain your exact requirement in detail.

• A Simple sample that demonstrates the issue you are experiencing.

• A video demo of the requirement.

• Syncfusion package version you are using.

This will enable us to fully understand the problem and provide you with the best possible solution. We apologize for any inconvenience this may cause and we are here to assist you every step of the way. Please let us know if there is anything else we can do to help.

Regards,

Joseph I.

[John Taylor]

https://www.xxxx.com/inventorycount/inventorycountItem?inventoryCountId=3&inventoryLocationId=1

I'm passing parameters to the inventorycountItem page from a page in the form. This page has datagrid. And I want to pass these parameters to the Action method, which lists the data in this datagrid, in any case.

Syncfusion package version is 21.2.9.

[Joseph Christ Nithin Issack]

John,

   Based on the sample provided, we understand that you are loading the grid using the parameter passed from the previous page. On inspecting the code example provided, we could see that you are trying to set the dataSource in the actionBegin event of the EJ2 Grid. Instead, we suggest you to set the dataSource and query in created event of the EJ2 Grid.

  While checking the link provided, we found that the link is not working, so we were not able to validate further. Please provide the details requested in the previous update so that we will be able to proceed further.