Mapping json response to popup

[Alan]

FIXED: We have built our services to handle the filtering on the server side to limit the data that is sent down. Since I'm not use to the serverFiltering option on the dataSource I created my own issue. Once I switched that flag to true everything mapped correctly.


I'm switching from jQueryUI to KendoUI. I didn't have an issue mapping my json response from the server to the autocomplete response before. Now I can't seem to figure out how to map the json response in Kendo.

var group = $("#GroupCode");
group.kendoAutoComplete({
    minLength:3,
    dataTextField: "Code",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: '@Url.Action("GroupCodeListBySG", "Equipment")',
                type: "GET",
                dataType: "json",
                data: {
                    search: function() {
                        return group.val();
                    },
                    saleGroup: function() {
                        return $("#DivDrop option:selected").val();
                    }
                }
            }
        }
    }
});

That was just the basic data in which I send two variables to the server for the search. Below is an example of a json response.

[{"ExtensionData":{},"Code":"VEHICLES","DMFPercent":0,"Default_Excise_Tax":false,"Description":"VEHICLE ASSETS","Division":null,"IsActive":false,"IsAttachment":false,"JDUX_CatID":null,"JDUX_KeyCode":null,"RDOP_Agreement_MW":null,"RDOP_Agreement_NW":null,"RDOP_Agreement_SC":null,"RDOP_Agreement_SW":null,"RDOP_Facts_MW":null,"RDOP_Facts_NW":null,"RDOP_Facts_SC":null,"RDOP_Facts_SW":null,"Sales_Group":null,"Updated":"\/Date(-62135575200000)\/","Updated_By":null}]

I had it mapped to display display the Code + Description and map IsAttachment and Code field to some hidden data. Just trying to map the return data so I can see an autocomplete display isn't working. Would someone be able to give me an example on how I can map my return?

[Hetal]

I am facing same problem... Did you get any solution?

[Alan]

@Hetal My fix was that I have all my filtering done on the server. I didn't know that serverFiltering was set to false by default (my mistake). Since I'm also mapping lots of different data for different reasons I also use templates for the display. My template is below.

<span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: blue;">"groupcodetemplate"</span> <span style="color: red;">type</span><span style="color: blue;">=</span><span style="color: blue;">"text/x-kendo-tmpl"</span><span style="color: blue;">></span>
    ${ data.Code }: ${ data.Description }
    <input type="hidden" value="${data.Code}" id="Code" />
    <input type="hidden" value="${data.Description}" id="Description" />
    <input type="hidden" value="${data.IsAttachment}" id="IsAttachment" />
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span>

Here is my autocomplete function. I need to go back and clean it up a little but it works right now.

        $(<span style="color: maroon;">"#GroupCode"</span>).kendoAutoComplete({
            animation: {
                close: {
                    duration: 0
                },
                open: {
                    duration: 0
                }
            },
            height: 500,
            minLength:3,
            dataTextField: <span style="color: maroon;">"Description"</span>,
            dataValueField: <span style="color: maroon;">"Code"</span>,
            filter: <span style="color: maroon;">"contains"</span>,
            template: kendo.template($(<span style="color: maroon;">"#groupcodetemplate"</span>).html()),<span style="color: darkgreen;"></span>
            dataSource: <span style="color: blue;">new</span> kendo.data.DataSource({
                dataType: <span style="color: maroon;">"json"</span>,
                transport: {
                    read: {
                        url: <span style="color: maroon;">"</span><span style="color: maroon; background: none repeat scroll 0% 0% yellow;">@</span>Url.Action(<span style="color: rgb(163, 21, 21);">"GroupCodeListBySG"</span>, <span style="color: rgb(163, 21, 21);">"Equipment"</span>)<span style="color: maroon;">"</span>,
                        type: <span style="color: maroon;">"Post"</span>,
                        dataType: <span style="color: maroon;">"json"</span>,
                        data: {
                            search: <span style="color: blue;">function</span>() {
                                <span style="color: blue;">return</span> $(<span style="color: maroon;">"#GroupCode"</span>).val();
                            },
                            saleGroup: <span style="color: blue;">function</span>() {
                                <span style="color: blue;">return</span> $(<span style="color: maroon;">"#DivDrop option:selected"</span>).val();
                            }
                        }
                    }
                },
                serverFiltering: <span style="color: blue;">true</span>
            }),
            select: <span style="color: blue;">function</span>(e){
                $(<span style="color: maroon;">"#AttachmentFlag"</span>).val(e.item.children(<span style="color: maroon;">"#IsAttachment"</span>).val());
            }
        });

[Hetal]

hello, can you help me with autocomplete? I am using it in MVC project. I have following in my script.

<script type="text/javascript">

    $(document).ready(function () {

        $("#autoComplete").kendoAutoComplete(["Item1", "Item2"]);

    });

 

    $("#memberautoComplete").kendoAutoComplete({

        minLength: 1,

        dataTextField: "MEMBER_ID",

        dataSource: {

            dataType: "json",

            serverFiltering: true,

            filter: "contains",

            serverPaging: true,

            pageSize: 20,

            transport: {

                read: { url: '@Url.Action("MemberAutoComplete", "Repost")',

                type: "post",

                datatype: "json"

                 }

            }

        }

    });

 

</script>

and method for the same is inside controller as follows.

public JsonResult MemberAutoComplete()

        {

            var reposts = context.Reposts.Select(r=>r.MEMBER_ID).ToList();

 

            return Json(new { reposts }, JsonRequestBehavior.AllowGet);

        }

[Alan]

@Hetal sorry for the late reply. Did you get this resolved? I'm not sure exactly what isn't working or happening. I do see that memberautoComplete is outside the document.ready function. That looks like it could cause an issue with timing. Also what does your JSON response look like if the autocomplete does trigger?

[Hetal]

Hello...

actually we now shifted to telerik MVC grid... not using Kendo UI