[Solved] GridEditCommandColumn On Grid with Client Side Binding

[Blake]

I am having trouble adding a GridEditCommandColumn or GridHyperLinkColumn to a grid control that is bound clientside via a web service. When I add either of these type columns the columns appear empty.

There are several search fields. When the user presses the Search button the form is submitted and on the server side, the grid is bound to a blank datasource. On the client side, the OnGridCreated event triggers a call to a web service that returns the data for the grid and then binds it. From there, all paging and sorting is done client side.

Here is what I think is the pertinent code. I am also including a screenshot showing part of the resulting grid.

The Grid:

 

<telerik:RadGrid ID="gridResults" runat="server" Visible="false" AutoGenerateColumns="false" EnableViewState="true"
                 SkinID="CR"  GridLines="None" HeaderStyle-HorizontalAlign="left" PageSize="20"
                 AllowAutomaticUpdates="false" OnUpdateCommand="gridResults_UpdateCommand"
                 AllowPaging="True" PagerStyle-Position="Bottom" PagerStyle-Mode="NextPrev" AllowSorting="true">
    <ClientSettings>
        <ClientEvents OnGridCreated="gridResults_GridCreated" OnCommand="gridResults_Command" OnRowDataBound="RowDataBound" />
    </ClientSettings>

    <MasterTableView DataKeyNames="ID" EnableNoRecordsTemplate="false" PagerStyle-AlwaysVisible="true" Visible="true"
                     ShowFooter="false" AutoGenerateColumns="false"  AllowPaging="true" FooterStyle-Font-Bold="true" EditMode="PopUp"  >

        <Columns>
            <telerik:GridEditCommandColumn ButtonType="PushButton" UniqueName="EditTicket"></telerik:GridEditCommandColumn>
            <telerik:GridHyperLinkColumn HeaderText="link" DataTextField="ID" DataNavigateUrlFields="ID" UniqueName="EditTicket" DataNavigateUrlFormatString="EditAsset.aspx?AssetID={2}"></telerik:GridHyperLinkColumn>

            <telerik:GridBoundColumn DataField="ID" HeaderText="Ticket #" SortExpression="ID" UniqueName="ID" HeaderButtonType="TextButton"><ItemStyle Wrap="false" /></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="StatusName" HeaderText="Status" SortExpression="tsitil.StatusName" HeaderButtonType="TextButton"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Category" HeaderText="Category" SortExpression="tc.Code" HeaderButtonType="TextButton"></telerik:GridBoundColumn>
        </Columns>

        <EditFormSettings EditFormType="Template" CaptionDataField="ID" CaptionFormatString="Change Status For Ticket: {0}" PopUpSettings-Modal="true">
            <FormTemplate>
                ...
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

The Server Side Search Button:

 

protected void btnSearch_Click(object sender, EventArgs e)
    {
        //Here is where the search criteria are built and then written to javascript so they can be sent to the web service

        gridResults.DataSource = new int[] { };
        gridResults.DataBind();
        gridResults.Visible = true;

        return;
    }

The javascript that binds the results of the web service to the grid:

 

function UpdateGrid(result) {

    var tableView = $find("<%= gridResults.ClientID %>").get_masterTableView();
    var objData = result["d"];
    var count = objData["Count"];
    tableView.set_virtualItemCount(count);

    tableView.set_dataSource(objData["Data"]);
    tableView.dataBind();

}

Is it possible to have an GridEditCommandColumn on a grid that is using client side binding? I am willing to have the popup edit do a postback but I would like to continue binding the grid client side. The Grid / Client Side demo shows that you can use a hyperlink column in a client side grid but I am not sure of the exact format I would need to return from my webservice. Does anyone know if this is documented somewhere? The important part though is to have a GridEditCommandColumn. Is this possible?

Thanks for any help,
Blake

[Tsvetoslav]

Hi Blake,

It is certainly possible to have both columns in the grid event when client-binding is used (attached is a small sample that demonstrates this). However, the edit column won't work as it is meant for a server-bind grid. With client-side binding you can't use the autogenerated edit/insert forms for update/insert operations. You need to use some external controls as demonstrated in the following sample:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/insertupdatedelete/defaultcs.aspx 

I hope this helps.

Regards,
Tsvetoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.