Mapping json response to popup

6 posts, 0 answers
  1. Alan
    Alan avatar
    6 posts
    Member since:
    Aug 2012

    Posted 15 Jun 2012 Link to this post

    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?
  2. Hetal
    Hetal avatar
    28 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    I am facing same problem... Did you get any solution?
  3. Kendo UI is VS 2017 Ready
  4. Alan
    Alan avatar
    6 posts
    Member since:
    Aug 2012

    Posted 19 Jun 2012 Link to this post

    @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());
                }
            });
  5. Hetal
    Hetal avatar
    28 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    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);
            }
  6. Alan
    Alan avatar
    6 posts
    Member since:
    Aug 2012

    Posted 26 Jul 2012 Link to this post

    @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?
  7. Hetal
    Hetal avatar
    28 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2012 Link to this post

    Hello...

    actually we now shifted to telerik MVC grid... not using Kendo UI
Back to Top
Kendo UI is VS 2017 Ready