how make cell 'dirty' setting value programmatically?

Hi, I have checkbox template for string field and don’t know how to make cell ‘dirty’ so the editor dialog “Done” Cancel” could see it.

When user click check box cell changes text value fine (valid/invalid) but editor doesn’t see it.

I tried this:

var  temp = “<input type=’checkbox’ {{if ${ValidOrInvalid} == ‘Valid’}} checked=’checked’ {{/if}} onclick=’changeState(this, ${Id})’>${ValidOrInvalid}”;

 var DefaultColumns = [

         { headerText: “Valid Or Invalid”, key: “ValidOrInvalid”, dataType: “string”, width: “10%”, template: temp },

and:

function changeState(element, rowId) {

    var $checkBox = $(element);

    if ($checkBox.prop("checked")) {

        $("#grid").igGridUpdating("setCellValue", rowId, "ValidOrInvalid", "Valid");

    } else {

        $("#grid").igGridUpdating("setCellValue", rowId, "ValidOrInvalid", "Invalid");

    }

    setTimeout(function () { $("#grid").igGridUpdating("startEdit", rowId, 1); }, 2);

}

 

But no luck, thanks

Hello Andrew,

Thank you for posting in our community.

My suggestion for achieving your requirement is setting column editors value based on the checkbox value when edit mode is entered. This can be done by first retrieving the editor for the corresponding cell (<a href="https://www.igniteui.com/help/api/2019.2/ui.iggridupdating">editorForKey API</a>) and afterwards setting its value using the <a href="https://www.igniteui.com/help/api/2019.2/ui.igtexteditor#methods:value">editors API. A small timeout is needed in order to ensure that the editor for the corresponding cell is created and its value can be set.

Another thing you have to keep in mind is that by design events are not raised if the action is triggered manually rater than with the corresponding user interaction. In you scenario, when the value is manually set editor`s event for value changing is not going to be fired and respectively the Done button is not going to be enabled. In order to overcome this the internal _enableDone method can be called.

For example:

function changeState(element, rowId) {
        var $checkBox = $(element);
        setTimeout(function(){
                $($("#grid1").igGridUpdating("editorForKey", "MakeFlag")).igTextEditor("value", $checkBox.prop("checked").toString());
                $("#grid1").data("igGridUpdating")._enableDoneButton();	
        }, 1);
    }

 

Once the editor`s value is set and Done button is clicked the grid will automatically set the cell value and will update checkbox state.

Attached you will find a small sample illustrating my suggestion for your reference. Please test it on your side and let me know whether it helps you achieve the desired behavior.

Please let me know if you need any further assistance with this matter.

 

Attachments:

1. 5722.igGridTemplateColumCheckbox.zip

thanks Vasya,

it works, but wonder how re-render other columns in that edited row when click "done" because when clicked checkbox other columns in that row that have combo templates are loosing their combo (until refresh)   BTW checkbox also disappear once clicked until "done" is clicked. thanks

Hello Andrew,

By design this is the behavior of igGrid when editMode option is "row" (this is the value by defaut). When row enters edit mode an editor provider is rendered for every particular cell based on the data type for this column. This means that all templates are not going to be visible in edit mode. 
My suggestion, if you would like to edit only one cell at a time is using "cell" edit mode. In this case an editor is shown only for the cell entering edit mode. 'Done" and "Cancel" buttons are not supported for this mode.

Based on this thread in our forum I believe that you are setting the column template in pagerRendered event. However, in case that "Updating" feature is enabled this approach is not going to help you achieve your requirement. The reason is that when the user is done editing the corresponding row will be re-rendered so that it can reflect the changes. However, the pagerRendered event, where the template is created, is not going to be fired. What I believe will work in this scenario is re-creating the combo in the editRowEnded event, fired when edit mode is ended. For example:

	{
						name: "Updating",
						editRowEnded: function(evt,ui){
						$("#grdlist_" + ui.rowID.toString()).igCombo({
									dataSource: comboData,
									textKey: "Name",
									valueKey: "Name",
									width: "200px",
									autoComplete: true,
									enableClearButton: false,
									initialSelectedItems: [{ value: 0}],
						});
					},

Please let me know if you need any further assistance with this matter.