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

时间:2016-05-09 12:14:00

标签: c# asp.net ajax telerik asp.net-ajax

我必须创建一个表来监视流列表。 从附件中可以看到,该表必须具有以下功能:

  • 要监控的流描述(或名称)
  • 类型(输入,输出或两者)
  • 特定日期的结果(,此处是问题

这是令人满意的结果: enter image description here

数据流由Web Service通过JSON提供。

我计划用RadGrid完成所有工作,但我在实现方面遇到了一些困难。

这是模型传递:

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

其中&#34; DetailStream &#34;是:

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 是特定日期特定流的结果。 详细信息是DetailStream的列表,即特定周内特定流的结果。

使用Name和Type没有问题,但我不知道如何管理DetailStream列表。有人可以帮帮我吗?

这是我目前的实施:

我的网络服务

[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);
    }
}

//]]>

1 个答案:

答案 0 :(得分: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;
 }
}