Editable Grid

[James Faw]

There is some example I found in Silverlight samples.
http://demos.telerik.com/silverlight/#GridView/DataSourceChangeNotifications

I'd like to have the same behavior for AJAX, too. How can it be accomplished with AJAX?
In addition my columns contains 2 RadComboBoxes. The items in second one depends on first. Currenntly I've implemented it this way, using Autopostbacks:

<telerik:RadGrid ID="grdTimesheetsLines" runat="server" AutoGenerateColumns="False" AllowSorting="False" AllowPaging="False" Skin="Vista" PageSize="10" GridLines="Both" EmptyDataText="NO DATA IS AVAILABLE." onneeddatasource="grdTimesheetsLines_NeedDataSource" ShowFooter="true">

    <FooterStyle Font-Bold="true" />

    <AlternatingItemStyle BackColor="AliceBlue"/>

    <ClientSettings>

        <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />

    </ClientSettings>

    <MasterTableView DataKeyNames="EmployeeNo, DateWorked, HRPositionCode, LineNo" AllowMultiColumnSorting="false" AllowSorting="False">

        <Columns>

            <telerik:GridDateTimeColumn SortExpression="DateWorked" HeaderText="Date" HeaderButtonType="TextButton" DataField="DateWorked" UniqueName="DateWorked" >

                <ItemStyle HorizontalAlign="Left" Width="100px" />

                <HeaderStyle HorizontalAlign="Left" Width="100px" />

            </telerik:GridDateTimeColumn>

  

            <telerik:GridTemplateColumn SortExpression="HRPositionCode" HeaderText="Position" HeaderButtonType="TextButton" UniqueName="HRPositionCode" DataType="System.String">

                <ItemStyle HorizontalAlign="Left" Width="200px" />

                <HeaderStyle HorizontalAlign="Left" Width="200px" />

                <ItemTemplate>

                    <telerik:RadComboBox ID="grdTimesheetsLines_Positions" runat="server" Filter="Contains" MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false" OnSelectedIndexChanged="Positions_SelectedIndexChanged" AutoPostBack="true"></telerik:RadComboBox>                     

                </ItemTemplate>

            </telerik:GridTemplateColumn>

  

            <telerik:GridTemplateColumn SortExpression="ActivityCode" HeaderText="Activity" HeaderButtonType="TextButton" UniqueName="ActivityCode" DataType="System.String">

                <ItemStyle HorizontalAlign="Left" Width="200px" />

                <HeaderStyle HorizontalAlign="Left" Width="200px" />

                <ItemTemplate>

                    <telerik:RadComboBox ID="grdTimesheetsLines_Activities" runat="server" Filter="Contains" MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false"></telerik:RadComboBox>                        

                </ItemTemplate>

            </telerik:GridTemplateColumn>

  

            <telerik:GridTemplateColumn SortExpression="StartTime" HeaderText="Start" HeaderButtonType="TextButton" UniqueName="StartTime" DataType="System.DateTime">

                <ItemStyle HorizontalAlign="Left" Width="120px" />

                <HeaderStyle HorizontalAlign="Left" Width="120px" />

                <ItemTemplate>

                    <telerik:RadTimePicker ID="grdTimesheetsLines_Start" runat="server">

                        <TimeView ID="TimeView1" runat="server" Interval="00:30:00" TabIndex="99">

                        </TimeView>

                    </telerik:RadTimePicker>

                </ItemTemplate>

            </telerik:GridTemplateColumn>

  

            <telerik:GridTemplateColumn SortExpression="EndTime" HeaderText="End" HeaderButtonType="TextButton" UniqueName="EndTime" DataType="System.DateTime">

                <ItemStyle HorizontalAlign="Left" Width="120px" />

                <HeaderStyle HorizontalAlign="Left" Width="120px" />

                <ItemTemplate>

                    <telerik:RadTimePicker ID="grdTimesheetsLines_End" runat="server">

                        <TimeView ID="TimeView2" runat="server" Interval="00:30:00" TabIndex="99">

                        </TimeView>

                    </telerik:RadTimePicker>

                </ItemTemplate>

            </telerik:GridTemplateColumn>

  

            <telerik:GridTemplateColumn SortExpression="Quantity" HeaderText="Duration" 
                                            HeaderButtonType="TextButton" UniqueName="Quantity" DataType="System.Decimal">

                <ItemStyle HorizontalAlign="Left" Width="80px" />

                <HeaderStyle HorizontalAlign="Left" Width="80px" />

                <ItemTemplate>

                    <telerik:RadNumericTextBox runat="server" ID="grdTimesheetsLines_Duration" 
                                                                    MinValue="0" Width="50px">

                        <NumberFormat DecimalDigits="2" />

                    </telerik:RadNumericTextBox>

                </ItemTemplate>

            </telerik:GridTemplateColumn>

  

            <telerik:GridTemplateColumn SortExpression="Comments" HeaderText="Comments" 
                                            HeaderButtonType="TextButton" UniqueName="Comments" DataType="System.String">

                <ItemStyle HorizontalAlign="Left" />

                <HeaderStyle HorizontalAlign="Left" />

                <ItemTemplate>

                    <telerik:RadTextBox runat="server" ID="grdTimesheetsLines_Comments" 
                                                                MaxLength="250" Width="90%">

                    </telerik:RadTextBox>

                </ItemTemplate>

            </telerik:GridTemplateColumn>

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

It works, any refresh in 1st combobox causes delay of few seconds.

Also, when it is loading it takes time, too. Becuase of the Comboboxes have to be filled.

Does anu1 know more elegant solution.

[Shinu]

Hello James,

I hope the following links will shed some light on achieving the required functionality.

Excel-like RadGrid:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/excel-like-radgrid.aspx

CellEditing of RadGrid with GridBoundColumn:

http://www.telerik.com/community/forums/aspnet-ajax/grid/cellediting-of-radgrid-with-gridboundcolumn.aspx


And if you want to avoid page refresh, then make use of RadAjaxPanel/AjaxManager control. Place the grid inside an AjaxPanel to ajaxify the controls.


-Shinu.