Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
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 },  


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



Parents Reply
  • 17490
    Offline posted in reply to Andrew Soldan

    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.

No Data