CODEWITHSUNDEEP
data-bindingkendo-uikendo-gridkendo-listview
alireza
alireza

Reputation: 31

Kendo Grid Client Detail Template Local Data Binding

I have a Kendo Grid with a Kendo ListView for its client detail template. Here is the grid :

@(Html.Kendo().Grid<ITS.BusinessModel.TaskManager.TaskItem>()
        .Name("grdPackage" + Model + "sTasks")
        .Columns(columns =>
        {
            columns.Bound(taskModel => taskModel.WorkflowInstanceId);
            columns.Bound(taskModel => taskModel.WorkflowInstanceName);
            columns.Bound(taskModel => taskModel.Name).ClientTemplate("<a onclick='openTasksForm(#= ID#)' > #= Name # </a>");
        }
        .ClientDetailTemplateId("TaskSumeriesListViewTemplate")
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Model(model => model.Id(Task => Task.ID))
            .Read(read => read.Action("TaskItemsList_Read", "Task", new { packageGroupID = Model, packageType = (Model == -2) ? 0 : (Model == -1) ? 1 : 2 }))
        )
)

Here is the client template:

<script type="text/x-kendo-tmpl" id="TaskSumeriesListViewTemplate">

    @(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
        .Name("listViewPackage")
        .TagName("div")
        .ClientTemplateId("SummeriesTemplate")
        .ToClientTemplate()
        )
</script>

And here is the template for ListView :

<script type="text/x-kendo-tmpl" id="SummeriesTemplate">
    <div>
        #=ColumnName# : #=ColumnValue#
    </div>
</script>

Each TaskItem that Grid reads has a TaskSumariesList which is a List. I want to use this list in Grid Client Detail for ListView. How can I do this?

Upvotes: 1

Views: 2740

Answers (2)

Sean
Sean

Reputation: 41

In your Events call for your grid, use something like this:

.Events(e => e.DetailInit("detailInit")

Then, you can do something like this:

function detailInit(e) {
    var list= $("#listViewPackage").data("kendoGrid");      

    list.dataSource.data(e.data.TaskSumariesList) 
}

What will happen is that the list will get populated with the appropriate data when it expands.

You may need to do something like this for your List name:

.Name("listViewPackage#=WorkflowInstanceId#")

This way, you can make sure you have the right data for the right list:

function detailInit(e) {
    var list= $("#listViewPackage" + e.data.WorkflowInstanceId).data("kendoGrid");      

    list.dataSource.data(e.data.TaskSumariesList) 
}

Upvotes: 3

user2323355
user2323355

Reputation: 351

Actually Sean is right. For more information please refer: Kendo UI Grid: Detail Template Binding

You can also add DataSource(ds => ds.Ajax()) to your seccond grid.

@(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
        .Name("listViewPackage")
        .TagName("div")
        .ClientTemplateId("SummeriesTemplate")
        .DataSource(ds => ds.Ajax()) 
        .ToClientTemplate()
        )

It seems like Client template is not available for local bound grids.

Upvotes: 0

Related Questions