multiple ListViews with cascading drop-downs

4 posts, 0 answers
  1. Tenen
    Tenen avatar
    6 posts
    Member since:
    Feb 2015

    Posted 15 Apr 2015 Link to this post

    Hi,

    I am trying to create sortable editable list view with
    cascading dropdown list in it

    I have three problems:

    1.      
    On adding new item in
    Controllers “Editing_Create” action I
    receive null values for properties from drop down lists (EntityTypeId and EntityId)

    2.      
    When I am adding sortable
    behavior to the list view, in the edit item mode the text input for the “Text” model property is disabled

    3.      
    Minor issue: the max characters
    validation is not working on text input for the “Text” model property

    Besides these three issues the list view rendered as
    expected

    Thanks,



    View:




    <div class="demo-section">


    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>


    </div>




    <div class="demo-section">




    @(Html.Kendo().ListView<QuickLinkViewModel>()


    .Name("listView" + Model.ComponentId)


    .TagName("div")


    .ClientTemplateId("quickLinkTemplate")


    .DataSource(dataSource => dataSource


    .Model(model => model.Id("ComponentId"))


    .Create(create => create.Action("Editing_Create", "QuickLink", new { parentId = Model.ComponentId }))


    .Read(read => read.Action("Editing_Read", "QuickLink", new{parentId = Model.ComponentId}))


    .Update(update => update.Action("Editing_Update", "QuickLink"))


    .Destroy(destroy => destroy.Action("Editing_Destroy", "QuickLink"))


    )


    .Editable()


    )


    </div>


     @(Html.Kendo().Sortable()


    .For("#listView" + Model.ComponentId)


    .Handler(".handler")


    .Cursor("move")


    .PlaceholderHandler("layout.footer.placeholder")


    .HintHandler("layout.footer.hint")


    .Events(events => events.Change("layout.footer.onChange"))






    Editable Template:



    <div class="quickLink-view
    k-widget">


    <input type="hidden" name="ParentId" value="#:ParentId#" />


    <input type="hidden" name="SortOrder" value="#:SortOrder#" />


    <span class="handler">&nbsp;</span>


    <span>


    <input data-role="dropdownlist"


    data-text-field="Text"


    data-value-field="Value"


    data-bind="value:
    EntityTypeId"


    value="#:EntityTypeId#"


    data-source="layout.entityTypesData"


    id="entityType#:id#"


    name="EntityTypeId"


    data-option-label="Select"


    data-close="layout.footer.setValue"


    data-val-required="*">


    <span class="field-validation-valid" data-valmsg-for="entityType#:id#" data-valmsg-replace="true"></span>


    </span>


    <span>


    <input data-role="dropdownlist"


    id="entity#:id#"


    name="EntityId"


    data-auto-bind="false"


    data-text-field="Text"


    data-value-field="Value"


    data-cascade-from="entityType#:id#"


    data-bind="value:
    EntityId"


    value="#:EntityId#"


    data-source="layout.entityDropDownDataSource"


    data-option-label="Select"


    data-close="layout.footer.setValue"


    data-val-required="*" />


    <span class="field-validation-valid" data-valmsg-for="entity#:id#" data-valmsg-replace="true"></span>


    </span>


    <span>


    <input class="k-textbox"


    data-val="true"


    data-val-maxlength="Text
    cannot be longer than 25 characters."


    data-val-maxlength-max="25"


    data-val-required="*"


    id="text#:id#"


     name="Text"


    type="text"


    value="#:Text#" />


    <span class="field-validation-valid" data-valmsg-for="text#:id#" data-valmsg-replace="true"></span>


    </span>


    <div class="edit-buttons">


    <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>


    <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>


    </div>

    </div>



    Model:




    public class QuickLinkViewModel


    {


    public int ComponentId { get; set; }


    [Required(ErrorMessage
    = Errors.Required)]


    public TgEntityType?
    EntityTypeId { get; set; }


    [Required(ErrorMessage
    = Errors.Required)]


    public int? EntityId { get; set; }


    [Required(ErrorMessage
    = Errors.Required)]


    [MaxLength(25,
    ErrorMessage = "Name cannot be longer
    than 25 characters.")]


    public string Text { get; set; }


    public int SortOrder { get; set; }


    public int ParentId { get; set; }

        }



    Create action in Controller:




    [AcceptVerbs(HttpVerbs.Post)]


    public async Task<ActionResult>
    Editing_Create([DataSourceRequest] DataSourceRequest request, QuickLinkViewModel link, int? parentId)


    {


    var results = new List<QuickLinkViewModel>();




    if (link != null && parentId != null &&
    ModelState.IsValid)


    {


    link.ParentId = parentId.Value;




    await Create(link);


    results.Add(link);


    }




    return
    Json(results.ToDataSourceResult(request, ModelState));


    }

    Thanks

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Apr 2015 Link to this post

    Hello Tenen,

    Straight to your questions: 

           1. Please try to set the valuePrimitive to true. By default the value binding for the select widgets(including DropDownList) uses the selected item from the data to update the View-Model field when the initial value is null. The data-value-primitive attribute can be used to specify that the View-Model field should be updated with the item value field instead.

            2. I am not able to replicate such issue when used Sortable for ListView widget. Could you please send us isolated runnable example that replicates the issue. 

           3. Please try to setting maxlength attribute to the input element. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dekel
    Dekel avatar
    25 posts
    Member since:
    Jan 2015

    Posted 19 Apr 2015 in reply to Boyan Dimitrov Link to this post

    Hello,

    Thanks for the fast reply.

    Straight to my questions: 

     

    1.       valuePrimitive attribute helped, and now it is working as
    expected;

    2.       build an example: http://dojo.telerik.com/EkiJA/3
    textbox enabled but mouse click event not working on it in edit mode

    3.      maxlength is good, but how
    can I show relevant message to the user when he tries to write more than 25
    chars?

     Thanks
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 21 Apr 2015 Link to this post

    Hello Dekel,

    I am glad to hear that the suggestion solution worked. 

        2. There is a specific detail about integrating the sortable widget with the listview:  If the ListView's editing is enabled should be used  a more specific filter selector that excludes the item which is currently in edit mode. More information you can find in this article. I modifed the dojo example with the required selector. 

        3.  I would suggest reviewing the kendo validator in order to implement validation, error messages and tooltips.  

     

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready