Forums Retired Products and Controls
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
SDT
395
Controlling Editing of a Grid Cell
posted

Hi,

  I have Editable Grid. In that there are some editable columns. In some rows, I want this column should behave as readonly. How can we conditionally control editable behavior of a grid column.

 

Thanks,

Vinay

  • 1579
    posted

    Hi,

    You can achieve this behaviour of the grid by simply adding some JavaScript to your page. I have slightly changed one of our examples on WebGrid (Cell Editing - Client Events) so that the enteringEditMode event is canceled under some conditions.

    In JSF:

    <body>

    <f:view>

    <h:form>

    <f:verbatim escape="false">

    <br />

    <br />

    <textarea id="eventDumps" cols="60" rows="10"></textarea>

    <br>

    <input type="button" value="Clear"

    onclick="document.getElementById('eventDumps').innerHTML='';"/>

    <script type="text/javascript" >

    var el = document.getElementById("eventDumps");

    function EventHandler(sender, args, eventType){

    if(!el) return;

    if(!sender) return;

    var cell = args.getCell();

    var outStr = "Source: " + cell.getGrid().getId + "[" + cell.getIndex() + ", " + cell.getRowIndex() + "] EventType: " + eventType;

    el.innerHTML = el.innerHTML + outStr + "\r\n";

    el.scrollTop = el.scrollHeight - el.clientHeight;

    }

    function EnteringEditMode(sender, args){

    var cell = args.getCell();

    if (cell.getRowIndex() % 3 != 0){EventHandler(sender, args, "EnteringEditMode");

    }

    else{

    args.set_cancel(true);el.innerHTML = el.innerHTML + "EVENT CANCELED!" + "\r\n";;

    }

    }

    function EnteredEditMode(sender, args){EventHandler(sender, args, "EnteredEditMode");

    }

    function ExitedEditMode(sender, args){

    EventHandler(sender, args, "ExitedEditMode");

    }

    function ExitingEditMode(sender, args){EventHandler(sender, args, "ExitingEditMode");

    }

    </script>

    </f:verbatim>

    <ig:gridView dataSource="#{cancelEvent.list}" pageSize="10">

    <ig:gridActivation></ig:gridActivation>

    <ig:gridEditing enableOnMouseClick="double" enableOnActive="false"

    enableOnKeyPress="true" enableOnF2="true" editMode="cell"

    updateMode="row"></ig:gridEditing>

    <ig:gridClientEvents enteringEditMode="EnteringEditMode"

    enteredEditMode="EnteredEditMode" exitedEditMode="ExitedEditMode" exitingEditMode="ExitingEditMode"></ig:gridClientEvents>

    <f:facet name="header">

    <h:outputText value="Employee List"></h:outputText>

    </f:facet>

    <ig:column>

    <f:facet name="header">

    <h:outputText value="First Name"></h:outputText>

    </f:facet>

    <h:outputText value="#{DATA_ROW.firstName}"></h:outputText>

    </ig:column>

    <ig:column>

    <f:facet name="header">

    <h:outputText value="Last Name"></h:outputText>

    </f:facet>

    <h:outputText value="#{DATA_ROW.lastName}"></h:outputText>

    </ig:column>

    <ig:column>

    <f:facet name="header">

    <h:outputText value="e-mail"></h:outputText>

    </f:facet>

    <h:outputText value="#{DATA_ROW.email}"></h:outputText>

    </ig:column>

    <ig:column>

    <f:facet name="header">

    <h:outputText value="Phone number"></h:outputText>

    </f:facet>

    <h:outputText value="#{DATA_ROW.phoneNumber}"></h:outputText>

    </ig:column>

    </ig:gridView>

    </h:form>

    </f:view>

    </body>

    In that example you check if the row number is divisible by 3 and these rows cannot be modified because we cancel the event:

    args.set_cancel(true);

    Regards!