KendoGrid Multiple editable columns

[Ashton]

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.

[Ashton]

[quote]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.

[/quote]

 

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");

[Plamen]

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