Edit List of Values in Inline Grid

8 posts, 0 answers
  1. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 15 May 2020 Link to this post

    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

     

  2. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 20 May 2020 Link to this post

    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.

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 21 May 2020 Link to this post

    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
  4. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 22 May 2020 Link to this post

    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.
  5. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 22 May 2020 Link to this post

    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>

  6. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 26 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 26 May 2020 in reply to Nikolay Link to this post

    please provide the link for the thread #1468890. I am not sure how to open this
  8. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 27 May 2020 Link to this post

    Hi Ramu,

    Please refer to the following link:

    Regards,
    Nikolay
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top