Forums Ignite UI for jQuery
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
Close
Andrew Soldan
175
how make cell 'dirty' setting value programmatically?
posted

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

 

 

Parents
No Data
Reply
  • 17590
    Verified Answer
    Offline posted

    Hello Andrew,

    Thank you for posting in our community.

    My suggestion for achieving your requirement is setting column editor`s value based on the checkbox value when edit mode is entered. This can be done by first retrieving the editor for the corresponding cell (editorForKey API) and afterwards setting its value using the editor`s 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.

    5722.igGridTemplateColumCheckbox.zip

Children