KendoGrid Multiple editable columns

3 posts, 0 answers
  1. Ashton
    Ashton avatar
    2 posts
    Member since:
    Aug 2020

    Posted 03 Aug 2020 Link to this post

    Good day, 

    P.S. Please keep in mind that I am still very new to KendoUI.

    Scenario : I have a KendoGrid with 4 columns , being used as a form of a Checklist, So I have 2 columns containing the question and its category , then 2 columns  with a radio button group of answers , and a text field for notes (optional).

     

    01.columns: [
    02.              {
    03.                  field: "Category",
    04.                  title: "Category",
    05.                  width: "150px"
    06.              },
    07.              {
    08.                  field: "Task_Description",
    09.                  title: "Task Description",
    10.                  width: "300px"
    11.              },
    12.              {
    13.                  field: "User_Answer",
    14.                  title: "User Answer",
    15.                  width: "150px",
    16.                  template: templateFunction
    17.              },
    18.              {
    19.                  field: "Item_Notes",
    20.                  title: "Item Notes",
    21.                  template: '# {# <input type="textbox" class="editableTextboxTemplate"        onchange="SaveAndProgress(this);" /> #} #',
    22.                  width : "250px"
    23.              }],

     

    Goal : I want to be able to auto save the row upon selection of a answer on the radio Button group, and If the user adds a note , Save that too. I feel like its worth mentioning ,that I would eventually like to have the entire grid with answers in JSON format which I can pass to my controller.

    Problem : I cant seem to call a row an have the values which have been selected in the radio button group to be inside the JSON string , nor the text from the text box.

    Log after populating : {Category: "Supporting Documentation: ", Task_Description: "Question ", User_Answer: null , Item_notes: null, Id: 1, …}

    Is it possible to achieve my goal in a simpler way, and am I complicating the situation?

    Thanks for your time.

  2. Ashton
    Ashton avatar
    2 posts
    Member since:
    Aug 2020

    Posted 03 Aug 2020 in reply to Ashton Link to this post

    Ashton said:

    Good day, 

    P.S. Please keep in mind that I am still very new to KendoUI.

    Scenario : I have a KendoGrid with 4 columns , being used as a form of a Checklist, So I have 2 columns containing the question and its category , then 2 columns  with a radio button group of answers , and a text field for notes (optional).

     

    01.columns: [
    02.              {
    03.                  field: "Category",
    04.                  title: "Category",
    05.                  width: "150px"
    06.              },
    07.              {
    08.                  field: "Task_Description",
    09.                  title: "Task Description",
    10.                  width: "300px"
    11.              },
    12.              {
    13.                  field: "User_Answer",
    14.                  title: "User Answer",
    15.                  width: "150px",
    16.                  template: templateFunction
    17.              },
    18.              {
    19.                  field: "Item_Notes",
    20.                  title: "Item Notes",
    21.                  template: '# {# <input type="textbox" class="editableTextboxTemplate"        onchange="SaveAndProgress(this);" /> #} #',
    22.                  width : "250px"
    23.              }],

     

    Goal : I want to be able to auto save the row upon selection of a answer on the radio Button group, and If the user adds a note , Save that too. I feel like its worth mentioning ,that I would eventually like to have the entire grid with answers in JSON format which I can pass to my controller.

    Problem : I cant seem to call a row an have the values which have been selected in the radio button group to be inside the JSON string , nor the text from the text box.

    Log after populating : {Category: "Supporting Documentation: ", Task_Description: "Question ", User_Answer: null , Item_notes: null, Id: 1, …}

    Is it possible to achieve my goal in a simpler way, and am I complicating the situation?

    Thanks for your time.

     

    Update : Here is my full KendoGrid code snippet

     

    var grid = $("#claimsChecklistGrid").kendoGrid({
               dataSource:
               {
                   type: "json",
                   transport:
                   {
                       read:
                       {
                           url: "@Html.Raw(Url.Action("RetrieveQuestionList", "ControllerName"))",
                           type: "POST",
                           dataType: "json"
                       }
                   },
                   autoBind: false,
                   schema:
                   {
                       data: "Data",
                       total: "Total",
                       errors: "Errors",
                       model: {
                           id: "Id",
                           fields: {
                               Category: { editable: false, nullable: false },
                               Task_Description: { editable: false, nullable: false },
                               UserAnswer: { type: "string", defaultValue: { user_answers }, editable: false },
                               ItemNotes: { type: "string", editable: true, nullable: true }
                           }
                       }
                   },
                   error: function (e)
                   {
                       display_kendoui_grid_error(e);
                       // Cancel the changes
                       this.cancelChanges();
                   },
                   pageSize: @(defaultGridPageSize),
                   serverPaging: false,
                   serverFiltering: true,
                   serverSorting: true,
               },
               noRecords: {
                   template: "No data available on current page. Current page is: #=this.dataSource.page()#"
               },
                    autoBind: false,
               pageable:
               {
                   refresh: true,
                   pageSizes: [@(gridPageSizes)]
               },
               selectable: false,
               scrollable: false,
               columns: [
                   {
                       field: "Category",
                       title: "Category",
                       width: "150px"
                   },
                   {
                       field: "Task_Description",
                       title: "Task Description",
                       width: "300px"
                   },
                   {
                       field: "User_Answer",
                       title: "User Answer",
                       width: "150px",
                       template: templateFunction
                   },
                   {
                       field: "Item_Notes",
                       title: "Item Notes",
                       template: '# {# <input type="textbox" class="editableTextboxTemplate" onchange="SaveAndProgress(this);" /> #} #',
                       width : "250px"
                   }],
           }).data("kendoGrid");
  3. Plamen
    Admin
    Plamen avatar
    3079 posts

    Posted 05 Aug 2020 Link to this post

    Hello,

    You can use column template and then on dataBound event hook on the change event of the inputs. Then we can find the corresponding row retrieve the dataItem and update it. Here you can see an dojo example - https://dojo.telerik.com/@zdravkov/iYuNOjON/3.

    If you have further questions please let me know.

    Regards,
    Plamen
    Progress Telerik

Back to Top