multiple ListViews with cascading drop-downs

[Tenen]

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

[Boyan Dimitrov]

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

 

 

[Dekel]

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

[Boyan Dimitrov]

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