combining dropdownlist into edit template

2 posts, 0 answers
  1. Lienys
    Lienys avatar
    16 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 Link to this post

    I need to create a dropdownlist in my custom edit view. This is what I've done so far, and shows all the inputs except the dropdownlist

    <!--Edit template-->
    <script type="text/x-kendo-template" id="editNominationsTmpl">
        <div id="editContainer">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <th>Nominee</th>
                        <th>Nominator</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Name:</th>
                        <td><input type="text" class="k-input k-textbox" name="NominatedName" value=" #= NominatedName # " /></td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorName" value=" #= NominatorName # " /> </td>
                    </tr>
                    <tr>
                        <th>Job Title:</th>
                        <td><input type="text" class="k-input k-textbox" name="NominatedTitle" value=" #= NominatedTitle # " /></td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorTitle" value=" #= NominatorTitle # " /> </td>
                    </tr>
                    <tr>
                        <th>Department:</th>
                        <td>
                            <input id="dropdownlistNominee" name="DeptId" />
                        </td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorDept" value=" #= NominatorDept # " /></td>
                    </tr>
                    <tr>
                        <th>Email:</th>
                        <td>
                            <input type="hidden" name="Index" value=" #= NominatedIndex # " />
                            <input type="hidden" name="RequestInfoID" value="#= NominatorIndex # " />
                        </td>
                        <td><input type="email" class="k-input k-textbox" name="NominatorEmail" value=" #= NominatorEmail # " /></td>
                    </tr>
                </tbody>
            </table>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
            </div>
        </div>
    </script>

    //Creates a global object called templateLoader with a single method "loadExtTemplate"
    var templateLoader = (function ($, host)
    {
        //Loads external templates from path and injects in to page DOM
        return {
            //Method: loadExtTemplate
            //Params: (string) path: the relative path to a file that contains template definition(s)
            //Params: (int) index: user index
            loadExtTemplate: function (path, fileName, index)
            {
                //Use jQuery Ajax to fetch the template file
                $.get(path, { name: fileName },
                    function (result) {
                        console.log(result);
                        $(host.body).append(result);
                        console.log($(host.body).html());
                    })
                    .done(function (data)
                    {
                        $(host).trigger("TEMPLATE_LOADED", [path , index]);
                        console.log("Published an event that indicates when a template is done loading");
                    });
            }
        };
    })(jQuery, document);

    // waits until the template is fully loaded
            $(document).bind("TEMPLATE_LOADED", function (e, path, index)
            {
                // send to create the dropdownlist
                createDropdownList(index);

                var wnd = $("#nominationsEdit").data("kendoWindow");
                console.log(wnd);

                var templateContent = $("#editNominationsTmpl").html();
                console.log(templateContent);

                var editTemplate = kendo.template(templateContent);
                console.log(editTemplate);

                $.get("/Admin/GetEditNominations",
                    {
                        index: index
                    },
                    function (data) {
                        console.log(data);
                        //dataTemplate = data;
                        //dataDropwDown = loadDropdownListInfo();
                    },
                    "json")
                    .done(function (data)
                    {
                        console.log("success getting the information... now create the dropdaownlist");

                        // populate the template with the information
                        var result = kendo.render(editTemplate, data);

                        // set the default value the dropdownlist will show
                        // $("#dropdownlistNominee").kendoDropDownList().index(data.DeptID);

                        // append the information to the new window
                        wnd.content(result);

                        // show the window
                        wnd.center().open();
                    });
            });

    function createDropdownList(index)
    {
        //create the dropdownlist
        $("#dropdownlistNominee").kendoDropDownList(
            {
                dataTextField: "DeptName",
                dataValueField: "DeptID",
                dataValueField: index,
                dataSource:
                    {
                        transport:
                            {
                                read:
                                    {
                                        url: "/Admin/GetDeptInfo"
                                    }
                            }
                    }
            });
    }

    with this code the custom edit window shows all the inputs information, except the dropdownlist this input, that it shows empty.

    What I'm missing?

    thanks in advance.


  2. Lienys
    Lienys avatar
    16 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 Link to this post

    Is working now, I think the problem was the async calls. this is how is working now

    <!--Edit template-->
    <script type="text/x-kendo-template" id="editNominationsTmpl">
        <div id="editContainer">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <th>Nominee</th>
                        <th>Nominator</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Name:</th>
                        <td><input type="text" class="k-input k-textbox" name="NominatedName" value=" #= NominatedName # " /></td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorName" value=" #= NominatorName # " /> </td>
                    </tr>
                    <tr>
                        <th>Job Title:</th>
                        <td><input type="text" class="k-input k-textbox" name="NominatedTitle" value=" #= NominatedTitle # " /></td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorTitle" value=" #= NominatorTitle # " /> </td>
                    </tr>
                    <tr>
                        <th>Department:</th>
                        <td><input id="dropdownlistNominee" name="DeptId" /></td>
                        <td><input type="text" class="k-input k-textbox" name="NominatorDept" value=" #= NominatorDept # " /></td>
                    </tr>
                    <tr>
                        <th>Email:</th>
                        <td>
                            <input type="hidden" name="Index" value=" #= NominatedIndex # " />
                            <input type="hidden" name="RequestInfoID" value="#= NominatorIndex # " />
                        </td>
                        <td><input type="email" class="k-input k-textbox" name="NominatorEmail" value=" #= NominatorEmail # " /></td>
                    </tr>
                </tbody>
            </table>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
            </div>
        </div>
    </script>

    //Creates a global object called templateLoader with a single method "loadExtTemplate"
    var templateLoader = (function ($, host)
    {
        //Loads external templates from path and injects in to page DOM
        return {
            //Method: loadExtTemplate
            //Params: (string) path: the relative path to a file that contains template definition(s)
            //Params: (int) index: user index
            loadExtTemplate: function (path, fileName, index, deptId)
            {
                //Use jQuery Ajax to fetch the template file
                //var tmplLoader = $.get(path, { name: fileName }, function (result) {
                $.get(path, { name: fileName },
                    function (result) {
                        console.log(result);
                        $(host.body).append(result);
                        console.log($(host.body).html());
                    })
                    .done(function (data)
                    {
                        $(host).trigger("TEMPLATE_LOADED", [path , index, deptId]);
                        console.log("Published an event that indicates when a template is done loading");
                    });
            }
        };
    })(jQuery, document);

    // load nominee edit dropdownlist info
    function loadDropdownListInfo(index)
    {
        //var result;
        $.get("/Admin/GetDeptInfo", {}, function (data)
        {
            console.log("Dropdownlist datasource: ");
            console.log(data);
            //result = data;
            $("#dropdownlistNominee").kendoDropDownList(
                {
                    autobind: false,
                    index: index,
                    dataTextField: "DeptName",
                    dataValueField: "DeptID",
                    dataSource: data
                });
            console.log("success getting dropdownlist info");
        },
        "json")
        .done(function (data)
        {
            console.log("adding a dropdownlst finished");
            //result = data;
        });
    }

    // waits until the template is fully loaded
            $(document).bind("TEMPLATE_LOADED", function (e, path, index, deptId)
            {
                // send to create the dropdownlist
                //createDropdownList(index);

                console.log("template is fully loadded");

                var wnd = $("#nominationsEdit").data("kendoWindow");
                console.log(wnd);

                var templateContent = $("#editNominationsTmpl").html();
                console.log(templateContent);

                var editTemplate = kendo.template(templateContent);
                console.log(editTemplate);

                $.get("/Admin/GetEditNominations",
                    {
                        index: index
                    },
                    function (data) {
                        console.log(data);
                        //dataTemplate = data;
                        loadDropdownListInfo(deptId);
                        //console.log(dataDropwDown);
                    },
                    "json")
                    .done(function (data)
                    {
                        console.log("success getting the information... now create the dropdaownlist");

                        // populate the template with the information
                        //var container = [data , dataDropwDown];
                        var result = kendo.render(editTemplate, data );

                        // set the default value the dropdownlist will show
                        //$("#dropdownlistNominee").kendoDropDownList().index(data.DeptID);

                        // append the information to the new window
                        wnd.content(result);

                        // show the window
                        wnd.center().open();
                    });
            });

    Right now I'm working trying to show the dropdownlist with an initial value. 

  3. Kendo UI is VS 2017 Ready
Back to Top