CODEWITHSUNDEEP
c#asp.netajaxkendo-ui
AstroSharp
AstroSharp

Reputation: 1902

How to pass a model to a Template

We have been struggling with passing values to the following template:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyCuteWeb.Areas.Admin.Models.DisplayType>" %>

<%= Html.Kendo()
.DropDownList()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.DataTextField("Name")
.DataValueField("Value")
.DataSource(source => 
{ 
    source.Read(read => 
        read.Action("GetSelectedProperties",
            "UserQueryTypes", 
            new { id="3F2504E0-4F89-11D3-9A0C-0305E82C3301" })); 
})

%>

This template calls an AJAX service to get the list of possible drop-down values but the AJAX service must accept a parameter which will be passed from a grid cell in Kendo GridView. We are not sure how to pass this parameter.

"3F2504E0-4F89-11D3-9A0C-0305E82C3301" changes from cell to cell but we are not sure how to pass it to this template dynamically. Any help would be highly appreciated. The template is specified in Cell EditorTemplate or by specifying an attribute in the hosting class via [UIHint("....")]

Any recommendation would be greatly appreciated.

Upvotes: 1

Views: 1143

Answers (2)

vadzvnik
vadzvnik

Reputation: 61

It works for me.

use event in the grid:

.Events(e => e.DataBound("On_DataBound"))

this is my js function for the event:

function On_DataBound(e) {
    var data = e.sender._data;

    for (var i = 0; i < data.length; i++) {
        var kendoId = data[i].uid;
        var categoryId = data[i].UserQueryTypeID;

        $("#MainProp_" + categoryId).kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Value",
            autoBind: true,
            change: function(e) {
                var value = this.value();
                var catID = $(e.sender.element).attr("data-categoryID")

                $.post("/UserQueryTypes/SetKeyDetailField", { categoryId: catID, keyDetailField: value }, function (data) { if (data != "true") alert(data); });
            },
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/UserQueryTypes/GetSelectedProperties?categoryID=" + categoryId
                    }
                }
            }
        });
    }
}

use template in the grid:

col.Bound(b => b.UserQueryTypeID).ClientTemplate("<input id=\"MainProp_#=UserQueryTypeID#\" data-categoryID=\"#=UserQueryTypeID#\" />");

Upvotes: 2

Iman Mahmoudinasab
Iman Mahmoudinasab

Reputation: 7015

Your data is dynamically changing in client side, means you should use javascript , this should give you idea of how to implement it:

<%= Html.Kendo()
.DropDownList()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.DataTextField("Name")
.DataValueField("Value")
.DataSource(source => 
{ 
    source.Read(read => 
    read.Action("GetSelectedProperties","UserQueryTypes")).Data("getId"); 
})
%>
<script>
function getId() {
    return {
        id: $("#inputbox1").val() //replace $("#inputbox1").val() with code which get the proper id from grid.
    };
}
</script>

Check this sample too (Cascading DropDownList). Hope to solve your problem.

Upvotes: 1

Related Questions