Programatically Update Grid Filtered Rows While in Batch Edit Mode

[Jeffrey Stone]

I have several questions regarding using the Grid control.

1)  I have a Grid that is in batch edit mode and I would like to make it easier to update all of the values in a particular column to the same value for whatever rows are currently filtered. In the very simplified example below, I have a grid which displays account information. Each account has a discount % column. I would like for the user to be able to filter the grid for, say, the accounts in a particular city, and then be able to apply a 5% discount to all of the customers.  In the example I have simple text field where the user can enter the discount percent and a button that when clicked will update all of the filtered row values - however; this does not work.  In the example below after calling refreshContent all of the original values are retrieved from the server. Without doing the refreshContent - the grid values are not updated on screen; and the grid doesn't appear to know that the values have changed (i.e. the save & cancel toolbar buttons are grayed out).

2) What is a good way to display/edit columns which have percentage values? I have tried applying a format. However, when you try to edit a row it doesn't like the percentage sign and instead of being able to enter 50% you have to enter 0.5 and if you mistakenly enter 50 then the value is converted to 5000%.

Thanks, Jeff

@(Html.EJ().Grid<object>("Orders")
        .Datasource(ds => ds.URL(@Url.Action("BatchDataSource")).BatchURL(@Url.Action("BatchUpdate")).Adaptor(AdaptorType.UrlAdaptor))
        .AllowFiltering()
        .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })
        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
        .Columns(c =>
        {
            c.Field("AccountName").AllowEditing(false).HeaderText("Account").Add();
            c.Field("City").AllowEditing(false).Add();
            c.Field("DiscountPercentage").TextAlign(TextAlign.Right).ValidationRules(v => v.AddRule("number", true).AddRule("range", "[0,1]")).HeaderText("Discount %").Add();

        }).ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Edit);
                items.AddTool(ToolBarItems.Update);
                items.AddTool(ToolBarItems.Cancel);
            });
        }))


<input type="text" id="discountPct" value="0.0"/>
<input type="button" id="btnSetPercentage" onclick="onButtonClick()" value="Update Filtered Rows"/>

<script>
        function onButtonClick() {
            var discountPct = parseFloat($("#discountPct").val());
            if (discountPct >= 0 && discountPct <= 1) {
                var gridObj = $("#Orders").data("ejGrid");
                var rows = gridObj.getFilteredRecords();
                for (var i = 0; i < rows.length; i++) {
                    rows[i].DiscountPercent = discountPct;
                }
                // this looks like it refreshes the data from the server
                gridObj.refreshContent();               
            }
        }
    </script>

[Seeni Sakthi Kumar Seeni Raj]

Hi Jeffrey,

Query #1: I have a Grid that is in batch edit mode and I would like to make it easier to update all of the values in a particular column to the same value for whatever rows are currently filtered.

Through the setCellValue(), we can update the each and every record of a particular column. Refer to the code example.

<input id="filter" type="text"></input>

@Html.EJ().Button("ClickMe").Text("Change Content").ClientSideEvents(e => e.Click("btnClick"))

@(Html.EJ().Grid<EmployeeView>("GridSample1")

          . . .

        .AllowFiltering()

        .FilterSettings(filter =>

        {

            filter.FilterType(FilterType.Excel);

        })

        .ToolbarSettings(toolbar =>

        { . . . . .

        })

        .Columns(col =>

        {

            col.Field("OrderID").IsPrimaryKey(true).Add();

             . . .. . .

            col.Field("EmployeeID").HeaderText("EmployeeID").Width(100).Add();

        })

       

)

<script>

    function btnClick(args) {

        var val = $("#filter").val();

        if (val == "")

            return;

        var obj = $("#GridSample1").ejGrid("instance");

        if (typeof val == "string" && $.isNumeric(val)) {

            val = parseFloat(val);

        }

        for (var i = 0; i < obj.model.currentViewData.length; i++) {

            obj.setCellValue(i, "EmployeeID", val)//updating each cell of employeeID column

        }
    }
</script>

Query #2: What is a good way to display/edit columns which have percentage values? I have tried applying a format. However, when you try to edit a row it doesn't like the percentage sign and instead of being able to enter 50% you have to enter 0.5 and if you mistakenly enter 50 then the value is converted to 5000%

Through editTemplate of the columns, we can render the ejPercentageTextbox for the percentage column and so we can edit them as percentage value.

@(Html.EJ().Grid<EmployeeView>("GridSample1")

        .AllowPaging()

        .Datasource(ds => ds.URL("/Home/DataSource").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })

        .AllowFiltering()

        .FilterSettings(filter =>

        {

            filter.FilterType(FilterType.Excel);

        })

        .ToolbarSettings(toolbar =>

        {

             . .. . .

        })

        .Columns(col =>

        {

            col.Field("OrderID").IsPrimaryKey(true).Add();

              .. . .

            col.Field("Freight").HeaderText("Freight").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();

        })

       

)

<script>

    function create() {

        return $("<input>");//creating a textarea

    }

    function write(args) {//Writing the edited text value

        args.element.ejPercentageTextbox({ value: args.rowdata["Freight"], minValue: 0, decimalPlaces: 2, incrementStep: 1 })

    }

    function read(args) {

        return args.ejPercentageTextbox('getValue'); //Getting the Edited text value

    }

</script>

Refer to the following Help Document for different methods of ejGrid.

http://help.syncfusion.com/js/api/ejgrid#methods

Regards,
Seeni Sakthi Kumar S.

[Jeffrey Stone]

Seeni,,

Thank you for your quick and spot on response! You all do a great job.

I have one follow up question to #1 - which was answered by using  obj.setCellValue(i, "EmployeeID", val)

In one case I am updating a column which uses ForeignKeyField and ForeignKeyValue where the value is a integer identity value. After calling obj.setCellValue I see the numeric values - but, I really want to see the corresponding ForeignKeyValue - once I scroll over view field it update to the correct value. How do I get the lookup value to be displayed?

Regards, Jeff

[Seeni Sakthi Kumar Seeni Raj]

Hi Jeffrey,

Our current implementation of setCellValue doesn’t support to update the corresponding foriegnKeyField’s value in the Grid cell and logged an improvement task on this. We have created a new support incident under your account to track the improvement task. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Seeni Sakthi Kumar S.