This is a migrated thread and some comments may be shown as answers.

KendoGrid Multiple editable columns

2 Answers 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashton
Top achievements
Rank 1
Ashton asked on 03 Aug 2020, 03:00 PM

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 Answers, 1 is accepted

Sort by
0
Ashton
Top achievements
Rank 1
answered on 03 Aug 2020, 03:10 PM
[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");
0
Plamen
Telerik team
answered on 05 Aug 2020, 12:32 PM

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

Tags
Grid
Asked by
Ashton
Top achievements
Rank 1
Answers by
Ashton
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or