Placeholder for Lookup in TPC (The Portal Connector)

Question

I have a requirement to provide placeholder for all controls in my TPC form. I wanted to know if there is a way to do so. I have tried placing placeholder in Template like:

 <input id='@Html.GetUniqueId(Model.Name)_input' data-tpc-role="lookup-input" name="@Model.MetaField.FieldName" data-tpc-default-value="@Model.GetLookupValue()" data-tpc-value="@Model.GetLookupValue()"
                   placeholder ="myplaceholdertext" type="text" @MvcHtmlString.Create(@Model.ValidationAttributes) data-tpc-custom-validation="lookup"/>

and through script

$(document).on("tpc:ready", function(){
    var picklistName = "mypicklistname";
    //Set Text to Placeholder Value
    tpc.forms[0][picklistName].get_kendoInput().text("Please select an option.");
});

None of these work. Let me know if this is the correct forum to ask TPC related questions TIA

Answer 1

You have the kendo control but the value you want to set is the first item in its dataSource. Don't forget to refresh the control to make it show:

$(document).on("tpc:ready", function(){
    var picklist = tpc.forms[0]["mypicklistname"];
    //Set Text to Placeholder Value
    picklist.get_kendoInput().dataSource.data()[0].Label = "Please select an option.";
    picklist.get_kendoInput().refresh();
});