Monika Monika - 1 month ago 30
Vb.net Question

Passing data in view model to controller via kendo grid

So far, I'm just trying to instantiate my kendogrid and passing through values from my view model. I got the following piece of code from Telerik's documentation for vb.net. The thing is, an exception is thrown from .Grid ->
"Type parameter for public overridable overloads function grid(of T as a class) as a gridbuilder(of t) cannot be inferred"

Html.Kendo().Grid().Name("kendogrid")

I'm not sure what this error means and I don't know how to go about fixing it.

View

$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
},
update: {
url: "update",
dataType: "json",
type: "POST"
},
create: {
url: "CreateInvoiceRecord",
dataType: "json",
type: "GET",
},
parameterMap: function (options, operation) {
console.log(operation);
console.log(options);
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "itemID",
fields: {
ItemName: { type: "string" },
Amount: { type: "number", editable: false, validation: { required: true } },
ProductLine: { type: "string" },
Status: { type: "string" },
}
}
},
aggregate: [{ field: "Amount", aggregate: "sum" }
]
});
$("#kendogrid").kendoGrid({
DataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create", "save"],
columns: [
{ field: "ItemName", title: "Item", width: "150px" },
{ field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
{ field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ command: "Update", title: "Update" , width:"150px"}],
editable: true
});
});


Model

Public Class MyViewModel
Public Property id As String
Public Property id2 As String
End Class

Answer

Finally got what I wanted working using a hack for create and then ajax for read. Not totally sure why this works the way it does so I'll need to look into it some more. I needed to pass parameters to controllers that are connected to kendogrid - specifically the read and create operations. I created a view model to store the values that I obtained from my Index controller and then used the view model to pass the values from kendogrid to the read and create operation controllers. For some reason, I was only able to pass parameters to the read operation using ajax.

Javascript

<Script>
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {    
                    url: "readData",
                    dataType: "json",
                    type: "GET",                  
                },
                create: {
                    url: "CreateInvoiceRecord?trxid=@Model.id2&bcid=@Model.id",
                    dataType: "json",
                    type: "GET",
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "itemID",
                    fields: {
                        ItemName: { type: "string" },
                        Amount: { type: "number", validation: { required: true } },
                        ProductLine: { type: "string" },
                        Status: { type: "string" }
                    }
                }
            },
            aggregate: [{ field: "Amount", aggregate: "sum" }]
        });
        $("#kendogrid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable:  true,
            height: 550,
            toolbar: ["create", "save"],
            columns: [
                { field: "ItemName", title: "Item", width: "150px" },
                { field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
                { field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
                { field:  "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
                { command:  "Update", title: "Update" , width:"150px"}],
            editable: true
        });
    });
    function productLineDropDownEditor(container, options) {
            $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({              
                autoBind: false,
                valuePrimitive: true,
                dataTextField: "name",
                dataValueField: "name",
                dataSource: {
                    transport: {
                        read: {
                            url: "/Customs/getProdLines",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        model: {
                            fields: {}
                        }
                    },
                }
            });
    }
    function statusDropDownEditor(container, options) {
            var data = [
                { text: "Active", value: "1" },
                { text: "Paid", value: "2" },
                { text: "Cancelled", value: "3" }
            ]
            $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                valuePrimitive: true,
                dataTextField: "text",
                dataValueField: "value",
                autobind: false,
                dataSource: data
            });
    }
    //function testAjax() {     
    //}
    //data: { 'name': ItemName, 'amount': Amount, 'prodline': ProductLine, 'status': Status },
    $.ajax({
        type: "Get",
        data: { id: "@Model.id", id2:"@Model.id2" },
        url: "readData/",
        dataType: "json",
        success: function (itemList) {
            console.log(itemList);
        }
    });
</script>

Model

Public Class MyViewModel
    Public Property id As String
    Public Property id2 As String
End Class