Pull Value from Control into Model

[Joel]

My TreeList is generally working.  However, when a user selects a Custom Command Button, I need to populate the Model with that Group.Id key value.  How is this accomplished?  As shown, the "function goDetail(e)" code works.  However, if I remove the comment the last 2 lines the TreeList doesn't build... of course, I don't get any feedback as to what is wrong.  That would be nice.  But, this is where I'm trying to pull the dataItem.Id into the Model.  How can I get this to happen?  Thanks.

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

@(Html.Kendo().TreeList<Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Command(c => { c.Custom().Text("Select")
            .Name("selectButton").ClassName("selectButton")
            .Click("goDetail"); })
            .Width(Glossary.Portal.ButtonWidth);
        columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(350);
    })
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
        .ServerOperation(false)
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId);
            m.Expanded(true);
            m.Field(f => f.Name);
        }).Events(events => events.Error("onError"))
    )
    .Events(evt => evt.DataBound("treeListBound")))

<script type="text/javascript">

    function getData() {
        return @Html.Raw(Model.GetIndexData());
    }

    function goDetail(e) {
        e.preventDefault();
        alert("goDetail: " + e.toString());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert("goDetail: " + dataItem.id);
        @*@Model.Item.GroupId = dataItem.id;
        alert("goDetail: " + @Model.Item.GroupId);*@
    }

    function treeListBound(e) {
        var treeList = e.sender;
        var items = treeList.items();

        for (i = 0; i < items.length; i++) {
            var dataItem = treeList.dataItem(items[i]);

.....

 

[Joel]

I'm pretty sure my background in thick client programming is catching up with me.  So, I believe because this is stateless that means the Model doesn't exist at the time in which I am attempting to use it.  So, somehow I need to update a value in an input... but I'm grasping at straws here. 

I look forward to your reply,

Joel

[Joel]

I mostly figured this out.  If you have another way to do it I'd be interested.  Also, I'd like to capture the Model.Name property off the object to display in another input field.  Being as the Name is part of the Custom column... I don't see how to get it.

Define an Input field:

<input type="hidden" id="groupId" asp-for="Item.GroupId" />

Populate the Input field using an Ajax call:

function goDetail(e) {
    e.preventDefault();
    //alert("goDetail: " + e.toString());
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    //alert("goDetail: " + dataItem.id);
    $('#groupId').val(dataItem.id);

}

[Tsvetomir]

Hi Joel,

It is correct that in order to modify any values in the PageModel of the grid a hidden input should be used to modify the respective field. The approach is the correct one as the Kendo UI Grid is a standalone widget that is not an editor. 

As per the name field, I am not completely sure whether you would like to access the Name of the current row, the name of the button, or the Name of the PageModel. Could you provide more details on the same?

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[Joel]

Thanks for reinforcing my approach.

For a little more context, I am using a multi-step approach to gathering model data.  I am using the Kendo TabStrip to host Partial views.  On step 1, I display a hierarchy of groups.  The user will select a group from the hierarchy then move to step 2 where they will input various demographic data for a patient.  On that step, I would like to have the name of the group posted.  I'm capturing the id just fine using the above mentioned approach.  However, it'd be good to reinforce their step 1 decision on step 2 by showing the name of the group the Patient is being added to.  Because the group name is co-mingled in the icon template I can't isolate it.  Unless, there is a way to pull the name from the 'group-name' in the 'icon-template'.

 

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

[Tsvetomir]

Hi Joel,

Thank you for taking the time to share more details on the scenario you are willing to achieve. Is there a specific reason why would you like to undertake an approach that is different from obtaining the Id? The most straightforward way would be to mimic the approach of retrieving the Id and assigning it to a hidden input.

Alternatively, you could access the Name from the data item. Regardless of the HTML representation, the data item is supposed to hold the value for the Name field:

var treelist=$("#treelist").getKendoTreeList();
var selectedRow = treelist.select();
var dataItem = treelist.dataItem(selectedRow);
console.log(dataItem.Name);

Or, you could try accessing it via the template of the row:

var treelist=$("#treelist").getKendoTreeList(); 
var selectedRow = treelist.select();
console.log(selectedRow.find(".group-name").text());

Let me know in case any of the suggestions above suit your needs.

 

Regards,
Tsvetomir
Progress Telerik

[Joel]

I used your first example.  I am using the Id and the Name.  The Id is to obviously to meet the data needs.  The name is exposed on a readonly field to reassure the user on the 2nd step/page that the group value has been captured.

Stateless programming is still unpredictable for this old desktop developer.  I didn't expect to have the entire object/row baked into the selected tree node.  I expected just what I saw with the key.  This worked for me:

function goDetail(e) {
    e.preventDefault();
    //alert("goDetail: " + e.toString());
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    //alert("goDetail: " + dataItem.id);
    $('#groupId').val(dataItem.id);
    $('#groupName').val(dataItem.Name);
}

 

With the form defined this way on Step 2:

<form asp-action="Create" asp-all-route-data="routeKeys">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Item.Role" />
    <input type="hidden" asp-for="Item.Status" />
    <input type="hidden" id="groupId" asp-for="Item.DefaultGroupId" />
    <div class="form-group" style="margin-right: 5%">
        <label asp-for="GroupName" class="control-label"></label>
        <input asp-for="GroupName" class="form-control" id="groupName" readonly="true" />
        <span asp-validation-for="GroupName" class="text-danger"></span>
    </div>

 

Thanks again for your help,

Joel