[Solved] CellValueChange Event in MVC Grid

[Daryl Shenner]

Hi Team,

I've a Checkbox column in my grid. When I change value in the Check Box, i want to update a cell in the same row. At the same time, when I change a value in a bounded column(normal typable text cell), i want to uncheck the check box.

I want to do that while typing and not on updating the changes, something like, CellValueChange Event or TextChange Event

Is there any event to do that.

[Petur Subev]

Hi Daryl,

There is no such event. What you can do instead is to create custom editor templates for the text input and the checkbox input.
The textinput should use a function subscribed to the OnKeyUp event which uses the event arguments to get the new value and the corresponding data item (by traversing up the tree to find the row and using the dataItem method of the Grid API).
Once you get and change the value of the dataItem you can use the updateRow method to update the current row. To update a cell which uses client template you will need to use the saveCell method which accepts the td element representing the cell (your cell does not need to be in edit mode to save it). 

I hope this helps you achieve your goal.

Regards,
Petur Subev
the Telerik team

[Daryl Shenner]

Hi Team,

Can we have the sample as you descirbed it. And also, am using the InCell Edit Method. Will your suggestion work for this ?

[Petur Subev]

Hello Daryl,

I attached a sample project which implements the described behavior. You can use it as a base point to create more complex logic.

All the best,
Petur Subev
the Telerik team

[Daryl Shenner]

Thanks a ton.

I'll look into that.

[Daryl Shenner]

Thanks a lot.

That exactly worked for me.

[Daryl Shenner]

Hi Petur Subev,

Your solution worked like anything in IE 9.0. But not in IE 8.0 or lesser. I get an error in JS as "Object is null or undefined". Can you suggest on this ?

[Petur Subev]

Hello again Daryl,


I suppose that e.target is null. To fix things up I suggest you to replace e.target inside the handlers like so:

function quantityChanged(element) {

        var currentValue = $(element).val();
        var checkbox = $(element).parent().prev().find("input");
//...

Also you will need to change the both input elements (the editor template and the client template) like this:
Quantity.cshtml

<input type="text" name="Quantity" onkeyup="quantityChanged(this)" />

column definition:

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' <#= Quantity=='10' ? checked='checked' : '' #> onclick='checkboxChange(this)' />").Title("Set Quantity to 10").Width(20);

This should make things work again.

All the best,
Petur Subev
the Telerik team

[Daryl Shenner]

Hi Peter,

That works fine as you said. But we've got another problem. In IE 9.0, when I click any of the checkbox it works fine . But when I click the check box for the second time or any other text box, I get the an error. Also We are not able to uncheck the checkbox. It doesn't work in IE 8.0 as well as 9.0. We get the same error that attached. See the Attachment I get this only in IE 9.0. IE 8.0 works perfect

[Petur Subev]

Hello Daryl,

Please check if the problem persist using the slightly modified version of the sample project.
Basically now the demo is using the OnSave event to check if the corresponding checkbox is checked, if so the Quantity value is changed to 10.
On my side it seems that there are no problems using IE 7,8 and 9.

Kind regards,
Petur Subev
the Telerik team

[Daryl Shenner]

I Still get error. I tried OnSave Event also. But still not resolved

[Daryl Shenner]

Hi Team, I solved the issue by checking 'null' and 'undefined' in the error thrown place and it worked fine.
When I check the Checkbox, the quantity column will be set to 1, When I uncheck it,the CheckBox doesn't uncheck. It still shown checked. I'm unable to find the casue. Can anyone help. Please see the below code:

 function checkboxChange(element) {
            debugger;
            var checked = $(element).is(':checked');
            var grid = $('#OptionListGridView').data('tGrid');
            var dataItem = grid.dataItem($(element).parent().parent());

            if (checked) {
                dataItem.Qty = 1.0;
            }
            else {
                dataItem.Qty = 0.0;
            }
            dataItem.SelectedFlag = checked;
            dataItem.TotalPrice = (dataItem.Price.replace(/,/g, '')) * dataItem.Qty;

            var CheckBoxCell = $(element).parent();
            var quantityCell = $(element).parent().next().next();
            if (!checked) {
                CheckBoxCell[0].innerHTML = ' <input onclick="checkboxChange(this)" name="SelectedFlag" CHECKED="false" type="checkbox">';
            }
            //quantityCell.innerText = dataItem.Qty;
            var totalPriceCell = $(element).parent().next().next().next().next().next();
            grid.editCell(quantityCell);
            grid.editCell(CheckBoxCell);
            grid.editCell(totalPriceCell);
            grid.saveCell(quantityCell);
            grid.saveCell(CheckBoxCell);
            grid.saveCell(totalPriceCell);
            //grid.submitChanges();

        }

There is no OnSave event. Just OnSubmitChanges only

[Daryl Shenner]

Hi ,

As you suggest, i used the onEdit event to load the comob of the current row. I've a boolean column in  my grid dataitem which will decide to show the combo or the drop down in the grid cell. I'm using editor template to display the control. I want to hide the control used in the editor template. In my OnEdit event, I'm able to get both the control as below;

var comboColor = $(e.form).find("#Color").data("tComboBox");
var ddlColor = $(e.form).find("#ddlColor").data("tDropDownList");
           

Kindly suggest me on how to hide the controls. please reply as soon as possible as we badly needs this.

[Daryl Shenner]

Hello Team,

Is any one there?? Can you help us on the above issue

[Petur Subev]

Hi Daryl,

To hide an element you could use the hide() method provided by jQuery after selecting it.
e.g.

$(e.form).find("#Color").hide();

Regards,
Petur Subev
the Telerik team

[Letlhogonolo]

Hi Petur Subev

I tried to update Price when Total Price changes but no luck. Please help. Added if statement on onSave, and added a new method TotalPriceChnaged.
When i change the price, i get "Uncaught TypeError: Cannot call method 'display' of undefined  
"

    function onSave(e) {
        var grid = $(this).data("tGrid");
               
        if (e.values.Quantity) {
            if ($(e.cell).prev().has(':checked').length != 0) {                
                e.values.Quantity = 10;//if the previous cell is checked
            } else {
                e.values.Quantity = parseInt(e.values.Quantity); //convert the incoming Quantity value from string to int
            }
        }
 
        if (e.values.TotalPrice) {            
            e.values.Price = 20;
        }
    }
 
    function TotalPriceChanged(element) {
        var grid = $('#grid').data('tGrid');
        
        var currentValue = $(element).val();
        var priceCell = $(element).parent().prev().find("input")
        priceCell.attr('value',20);
       
        grid.editCell(priceCell);
        grid.saveCell(priceCell);
 
    }