This is a migrated thread and some comments may be shown as answers.

Mapping json response to popup

5 Answers 136 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 15 Jun 2012, 06:08 PM
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?

5 Answers, 1 is accepted

Sort by
0
Hetal
Top achievements
Rank 1
answered on 19 Jun 2012, 05:57 AM
I am facing same problem... Did you get any solution?
0
Alan
Top achievements
Rank 1
answered on 19 Jun 2012, 01:04 PM
@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());
            }
        });
0
Hetal
Top achievements
Rank 1
answered on 20 Jun 2012, 09:01 AM
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);
        }
0
Alan
Top achievements
Rank 1
answered on 26 Jul 2012, 09:33 PM
@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?
0
Hetal
Top achievements
Rank 1
answered on 27 Jul 2012, 03:00 AM
Hello...

actually we now shifted to telerik MVC grid... not using Kendo UI
Tags
AutoComplete
Asked by
Alan
Top achievements
Rank 1
Answers by
Hetal
Top achievements
Rank 1
Alan
Top achievements
Rank 1
Share this question
or