RadGrid update Enter and update ChangeRow

[Yan]

Hello,

im currently trying the telerik control and i have some problem to create my grid. I found 2-3 source code but probably my problem is, i call this grid into a ascx and i have 10-15 grid in one page, so the javascript have some trouble to find the correct control.

So my website is, an apsx page in a masterpage and in my aspx i create ascx page who's having this grid, because i have like 10 grid per page so i would like to clear my code so 1 aspx with 10 ascx and in each ascx i have 1 grid.

First i would like on single click to go in edit mode ( this is done ), after that i would like 2 things
if the user change row, call the sql update
if the user press enter, call the sql update

thanks.

here's my code :

<script type="text/javascript">

    

            function RowClick(sender, eventArgs)

            {

                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());                

            }

 

            

 

          function keyPressed(sender, args) {

              if (args.get_keyCode() == 13) {

                  sender.get_masterTableView().updateItem($(el).parents("tr")[0]);

                  var e = args.get_domEvent().rawEvent;

                  e.returnValue = false;

                  e.cancelBubble = true;

                   

 

                  if (e.stopPropagation) {

                      e.preventDefault();

                      e.stopPropagation();

                       

                  }

              }

          }

           

 

            </script>

 

</telerik:RadCodeBlock>

<table width="100%">

<tr><td align="center">

 

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" width="75%"

    AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True"

     GridLines="None" Skin="Vista"

    AllowAutomaticDeletes="True" AllowAutomaticInserts="True"

    AllowAutomaticUpdates="True" >

    <mastertableview autogeneratecolumns="False" CommandItemDisplay="Top"

        insertitempageindexaction="ShowItemOnFirstPage" editmode="InPlace">

        <CommandItemSettings AddNewRecordText="Add" ShowRefreshButton="False" />

        <Columns>

         

            <telerik:GridBoundColumn >
...

            </telerik:GridBoundColumn>

             

            

<telerik:GridBoundColumn >
...

            </telerik:GridBoundColumn>



        </Columns>

    </mastertableview>

    <clientsettings allowcolumnsreorder="True" reordercolumnsonclient="True">

        <selecting allowrowselect="True" />

        <ClientEvents OnRowClick="RowClick" OnKeyPress="keyPressed"/>

 

    </clientsettings>

</telerik:RadGrid>

 

</td></tr>

</table>

[Radoslav]

Hi Yan,

Please check out the following online example:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx

It demonstrates how to edit RadGrid's row on double-click. However in your case you could apply the same approach and logic on single row click (OnRowClick event) instead on double click OnRowDblClick.

Please give it try and let me know if you experience any problems.

Greetings,
Radoslav
the Telerik team

[Yan]

Yes, i try this code and when i put 2 grid on the same page the javascript put in edit mode the last grid on the page, note my 2 grid have 2 different id.

 var hasChanges, inputs, dropdowns, editedRow;

   function RowClick(sender, eventArgs) {
       if (editedRow && hasChanges) {
           hasChanges = false;


           $find("<%= grdCC.MasterTableView.ClientID %>").updateItem(editedRow);

       }
       else {
           editedRow = eventArgs.get_itemIndexHierarchical();
           $find("<%= grdCC.MasterTableView.ClientID %>").editItem(editedRow);
       }
   }

 

[Radoslav]

Hello Yan,

Could you please try using the following code snippet and let me know if the issue still exists:

function RowClick(sender, eventArgs) {
       if (editedRow && hasChanges) {
            hasChanges = false;
             sender.get_masterTableView().updateItem(editedRow);
       }
       else {
           editedRow = eventArgs.get_itemIndexHierarchical();
           sender.get_masterTableView().editItem(editedRow);
       }
   }

Looking forward for your reply.

All the best,
Radoslav
the Telerik team

[Yan]

I think i found the problem on my clientevent declaration OnRowClick i have the same name of the javascript function ... so i change both of them and that's fixed the problem.

New one, when i click on the row i call the edit in place and my line become editable, fine.
But i have a commanditemsettings like that, and when i press enter that press on the add button because when i click to edit the row, my grid got the focus and the focus is on the + ( add new row ) any solution ?

<CommandItemSettings AddNewRecordText="Add Credit Card" ShowRefreshButton="False" />


[Radoslav]

Hello Yan,

To achieve the desired functionality you could try adding a hidden button as a default button for the form. For example:

<form runat="server" defaultbutton="button1">
<asp:Button runat="server" OnClientClick="return false;" ID="button1" CssClass="displayNone" />
...

<style type="text/css">
            .displayNone
            {
                display: none;
            }
    </style>

Then into the RadGrid client side OnKeyPress event you could update the edited item when the user pressed Enter key:

function OnKeyPress (sender, eventArgs)
{
    if (eventArgs.get_keyCode() == 13)
    {
         var editIndex = sender._editIndexes[0];
         var row = sender.get_masterTableView().get_dataItems()[editIndex].get_element();
         sender.get_masterTableView().updateItem(row);
    }
}

Please give it try and let me know if you experience any problems.

Greetings,
Radoslav
the Telerik team

[Yan]

the trick with the stylesheet seems to work, the problem is when i single click on a row the row come editable and the focus go on the add button.

Note that code is in ascx page so the form runat="server" is in the aspx page.

<style type="text/css">

        .displayNone

            {

                display: none;

            }

    </style>

 

 

     

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

     

<script type="text/javascript">

        <!--

    var hasChanges, inputs, dropdowns, editedRow;

 

    function RowClickBAPerson1(sender, eventArgs) {

        if (editedRow && hasChanges) {

            hasChanges = false;

 

 

            $find("<%= grdBank.MasterTableView.ClientID %>").updateItem(editedRow);

 

        }

        else {

            editedRow = eventArgs.get_itemIndexHierarchical();

            $find("<%= grdBank.MasterTableView.ClientID %>").editItem(editedRow);

        }

    }

 

 

 

    function GridCommandBAPerson1(sender, args) {

        if (args.get_commandName() != "Edit") {

            editedRow = null;

        }

    }

 

    function GridCreatedBAPerson1(sender, eventArgs) {

        var gridElement = sender.get_element();

        var elementsToUse = [];

        inputs = gridElement.getElementsByTagName("input");

        for (var i = 0; i < inputs.length; i++) {

            var lowerType = inputs[i].type.toLowerCase();

            if (lowerType == "hidden" || lowerType == "button") {

                continue;

            }

 

            Array.add(elementsToUse, inputs[i]);

            inputs[i].onchange = TrackChangesBAPerson1;

        }

 

        dropdowns = gridElement.getElementsByTagName("select");

        for (var i = 0; i < dropdowns.length; i++) {

            dropdowns[i].onchange = TrackChangesBAPerson1;

        }

 

        setTimeout(function() { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);

    }

 

    function TrackChangesBAPerson1(e) {

        hasChanges = true;

    }

    function OnKeyPress(sender, eventArgs) {

        if (eventArgs.get_keyCode() == 13) {

            var editIndex = sender._editIndexes[0];

            var row = sender.get_masterTableView().get_dataItems()[editIndex].get_element();

            sender.get_masterTableView().updateItem(row);

        }

    }

     -->   

    </script>

 

</telerik:RadCodeBlock>

 

 

<form defaultbutton="button1">

        <asp:Button runat="server" OnClientClick="return false;" ID="button1" CssClass="displayNone"/>

    

 

<table width="100%">

<tr><td align="center">

 

<telerik:RadGrid ID="grdBank" runat="server" AllowSorting="True" width="75%"

    AutoGenerateDeleteColumn="False" AutoGenerateEditColumn="False"

     GridLines="None" Skin="Vista"

    AllowAutomaticDeletes="True" AllowAutomaticInserts="True"

    AllowAutomaticUpdates="True" >

    <mastertableview autogeneratecolumns="False"  editmode="InPlace">

        <CommandItemSettings AddNewRecordText="Add" ShowRefreshButton="False" />

        <Columns>

            

             

            <telerik:GridBoundColumn >
...

            </telerik:GridBoundColumn>

             

            

<telerik:GridBoundColumn >
...

            </telerik:GridBoundColumn>

             

             

             

            <telerik:GridEditCommandColumn HeaderText="Edit"  EditImageUrl="/x/images/edit.gif" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center" InsertImageUrl="/x/images/edit.gif" CancelImageUrl="/x/images/cancel_icon.gif" UpdateImageUrl="/x/images/edit.gif"   HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px" ButtonType="ImageButton" />

             

             

             <telerik:GridClientDeleteColumn ConfirmText="Are you sure you want to delete this row?" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center"

                        HeaderStyle-Width="35px" ButtonType="ImageButton" ImageUrl="/x/images/Icon_Delete.gif" HeaderText="Delete" HeaderStyle-HorizontalAlign="Center" />

                         

              

        </Columns>

    </mastertableview>

     <ClientSettings>

               <ClientEvents OnRowClick="RowClickBAPerson1"

                    OnGridCreated="GridCreatedBAPerson1" OnCommand="GridCommandBAPerson1" OnKeyPress="OnKeyPress"/>

    </ClientSettings>

</telerik:RadGrid>

 

 

 

 

</td></tr>

</table>

 

<asp:SqlDataSource ID="sqlBA" runat="server">
...    

</asp:SqlDataSource>

 </form>

[Radoslav]

Hi Yan,

To achieve the desired functionality you could try adding the button as a default button to the Form into the user control's code behind:
.ascx.cs

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    this.Page.Form.DefaultButton = Button1.UniqueID;
}

Additionally I am sending you a simple example. Please check it out and let me know if it helps you.

Kind regards,
Radoslav
the Telerik team