We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Programatically Update Grid Filtered Rows While in Batch Edit Mode

Thread ID:

Created:

Updated:

Platform:

Replies:

121567 Jan 2,2016 03:43 PM Jan 6,2016 12:30 AM ASP.NET MVC 3
loading
Tags: Grid
Jeffrey Stone
Asked On January 2, 2016 03:43 PM

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 [Syncfusion]
Replied On January 4, 2016 09:04 AM

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
Replied On January 5, 2016 07:58 PM

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 [Syncfusion]
Replied On January 6, 2016 12:30 AM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;