Edit List of Values in Inline Grid

[Ramu]

I am using the grid to display some fields. one of the field is to display the List of usernames. I am able to display the List of user names using ClientTemplate. But Iam facing the issue while editing or adding new row. While displaying I bind the column with usenameList and pass the same in function used for ClientTemplate. While display it's working fine. but when I click on Edit/Add New it's throwing javascript error as usenameList is undefined. my requirement to to display the lit of users with option to delete them and a buuton add new user. I didn't find he option to crate a templete to sho while editing like ClientTemplate for dispaly.

 

.Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.someId);
        columns.Bound(p => p.discontinue).
        columns.Bound(p => p.userList).Title("Approvers").ClientTemplate("#=userTemplate(userList)#").Sortable(false);
        columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy(); })
    })

 

function userTemplate(data) {
        this.approvers = "";
        data.forEach(element => {
            this.approvers += "<tr> <td style='width: 30 %; font-weight: bold'>" + element.userID+ "</td> <td>" + element.Display Name +</td></tr>";
        });
        return "<table>" + this.approvers + "</table>";
    }

The Edit Column in grid looks like the attched. Please let me know how to do it

 

[Nikolay]

Hello Ramu,

I would suggest here to incorporate a MultiSelect as an Editor for the userList column. This way the User will be able to add new users and delete existing ones upon editing of the filed. This has been demonstrated in the following demo project.

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/multiselect-in-grid

Please note this is an MVC Grid implementation, however it is valid for ASP.NET Core projects. 

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Ramu]

I have implemented it using MultiselectEditor and it's working fine. Now I had another issue that in  multiSelect, when user try to add new items I have to validate the item by calling the service and if its valid I need to add it to the list. I am planning to use the noDataTemplate for this, but not sure how to validate the user entry and sow the option to add only when it is valid. Could you please advise on that

[Ramu]

To explain it better, in multiselect I am displaying the List of existing available users in the list. but they can valid users outside the list b checking whether it's valid user or not by calling some external service. if it is valid I want to show the option add that item.

[Ramu]

I tried creating noDataTemplate, when I use it as normal  javascript(with out ajax callback) like below it's working as expected

 

<script id="noDataTemplate" type="text/x-kendo-tmpl">
        # var value = instance.input.val(); #
        # var id = instance.element[0].id; #
        # if(value == 'validUser') {#
        <div>
            do you want to add the user - <span style="font-weight:bold">'#: value #' </span>?
        </div>
        <br />
        <button class="k-button" onclick="addnew('#: id #', '#: value #')" ontouchend="addnew('#: id #', '#: value #')">add new item</button>
        # } else { console.log('value:  ' + data);#
        <div>
            user does not exists
        </div>
        # }  #
    </script>

 

But as I have to validate user I used the template as below, it's executing without error, but the Html is not rendering in the template. it's showing the notemplate area, but there is no text inside it. (not even showing no data found). looks it's the issue because of callback. Please let me know how to solve this issue.

 

<script id="noDataTemplate" type="text/x-kendo-tmpl">
        # var value = instance.input.val(); #
        # var id = instance.element[0].id; #
        # $.post("@Url.Action("validateuser", "AdminWorkflow")", {alias: instance.input.val()}, function(data){#
        # if(data) {
               <div>
            do you want to add the user - <span style="font-weight:bold">'#: value #' </span>?
        </div>
        <br />
        <button class="k-button" onclick="addnew('#: id #', '#: value #')" ontouchend="addnew('#: id #', '#: value #')">add new item</button>
        # } else { console.log('value:  ' + data);#
        <div>
            user does not exists test
        </div>
        # }  #
        #})  #
    </script>

[Nikolay]

Hi Ramu,

I am glad to hear you have managed to implement the MultuSelect is as a column editor.

Regarding the new inquiry, I have submitted a new thread (#1468890) as it concerns another topic and a new ticket is required for each new inquiry.

This one will be closed now. Please expect a reply in the new thread.

Regards,
Nikolay
Progress Telerik

[Ramu]

please provide the link for the thread #1468890. I am not sure how to open this

[Nikolay]

Hi Ramu,

Please refer to the following link:

• https://www.telerik.com/forums/remote-validation-of-add-new-item-template-in-multiselect

Regards,
Nikolay
Progress Telerik