如何将复杂对象绑定到 Telerik 的 RadGrid

Question

我必须创建一个 table 来监视流列表。 table，从附件可以看出，必须具备以下特点：

要监视的流描述（或名称）
类型（输入、输出或两者）
某一天的结果（这就是问题所在）

这是期望的结果：

数据流由 Web 服务通过 JSON 提供。

我计划用 RadGrid 做所有事情，但我在实施时遇到了一些困难。

这是要传递的模型：

[DataContractFormat]
public class StreamOutputDto : BaseDto
{
    public string Name { get; set; }
    public string Type { get; set; }
    public List<DetailStream> Details { get; set; }
}

其中“DetailStream”是：

public class DetailStream
{
    public string Id { get; set; }
    public DateTime Date { get; set; }
    public int CountInfo { get; set; }
    public StateStream StateInput { get; set; }
    public StateStream StateOutput { get; set; }
    //...
}

public enum StateStream
{
    InProgress,
    Received,
    Declined,
    Inexistent
}

所以DetailStream是特定日期特定流的结果。 Details是DetailStream的列表，即特定流在特定周内的结果。

Name 和Type 没有问题，但是我不知道如何管理DetailStream 的列表。有人可以帮助我吗？

这是我当前的实现：

我的 Web 服务:

[ServiceContract]
public interface IMyService
{
    [OperationContract]
    [WebInvoke(
        Method = "POST",
        ResponseFormat = WebMessageFormat.Json)]
    StandardResponse<StreamOutputDto> GetStream(string request);
}


[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
[MessageLoggingBehavior]
public class MyService : IMyService
{

    public StandardResponse<StreamOutputDto> GetStream(string request)
    {
        // TEST CASE:
        StandardResponse<StreamOutputDto> response = new StandardResponse<StreamOutputDto>();
        response.Output = new StreamOutputDto();
        response.Output.Name = "Hi!";
        response.Output.Type = "Input";
        response.Output.Details = new List<DetailStream>();

        response.Output.Details.Add(new DetailStream(){
                Id = "1",
                CountInfo = 100,
                Date = DateTime.Today });

            response.Output.Details.Add(new DetailStream(){
                Id = "2",
                CountInfo = 200 });

        return response;
    }

}

我的WebForm.aspx:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="RadGridParser.js"></script>
</head>

<body>

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true"/>

    <telerik:RadGrid ID="RadGrid1" RenderMode="Lightweight" ClientDataSourceID="RadClientDataSource1" 
             AllowPaging="false" AllowSorting="false" AllowFilteringByColumn="false" PageSize="5" runat="server">

        <MasterTableView DataKeyNames="Name" ClientDataKeyNames="Name">
            <Columns>
                <telerik:GridBoundColumn DataField="Name" HeaderText="" DataType="System.String" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Type" HeaderText="Tipologia flusso" DataType="System.String">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Day1" HeaderText="Lunedì">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Day2" HeaderText="Martedì">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Day3" HeaderText="Mercoledì">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Day4" HeaderText="Giovedì">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Day5" HeaderText="Venerdì">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>

    </telerik:RadGrid>

    <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
        <ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse" />
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select Url="http://soldev/Axa.Sol.Web/ws/Ivass/IvassService.svc/GetStream" DataType="JSON" RequestType="Post" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <Schema ResponseType="JSON">
            <Model ID="StreamModel">
                <telerik:ClientDataSourceModelField FieldName="Name" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Type" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Day1" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Day2" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Day3" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Day4" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="Day5" DataType="String" />
            </Model>
        </Schema>
    </telerik:RadClientDataSource>

</body>

我的RadGridParser.js:

//<![CDATA[
function ParameterMap(sender, args) {
    //If you want to send a parameter to the select call you can modify the if 
    //statement to check whether the request type is 'read':
    //if (args.get_type() == "read" && args.get_data()) {
    if (args.get_type() != "read" && args.get_data()) {
        args.set_parameterFormat({ request: kendo.stringify(args.get_data().models) });
    }
}

function Parse(sender, args) {
    var response = args.get_response();
    if (response) {
        args.set_parsedData(response.Output);
    }
}

function UserAction(sender, args) {
    if (sender.get_batchEditingManager().hasChanges(sender.get_masterTableView()) &&
                !confirm("Any changes will be cleared. Are you sure you want to perform this action?")) {
        args.set_cancel(true);
    }
}

//]]>

Answer 1

RadGrid 无法开箱即用。我认为你唯一能做的就是使用 TemplateColumn。模板列有一个 "ItemTemplate"、"InsertTemplate" 和一个 "EditTemplate".

您可以将任何控件和 html 元素放入此容器中。您还可以在网格的 "ItemDataBound" 事件中访问此控件（和您的数据项）。这应该可以帮助您实现您的方案。

参考资料： Template Columns

Item-DataBound 事件：

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
  GridDataItem gridItem = e.Item as GridDataItem;
  dynamic dataItem = (YourType)(gridItem.DataItem);
  gridItem.ToolTip = dataItem.ID + " - " + dataItem.UUID;
 }
}

如何将复杂对象绑定到 Telerik 的 RadGrid

How to bind complex objects to Telerik's RadGrid

c#

asp.net

ajax

asp.net-ajax

telerik