Hi ,

We have a scenario where we have to display large amount of data as tree list, we are getting more than 2000 records, when the tree list is rendering we are seeing script error saying "too much recursion"  in firefox V.35 and "SCRIPT28: Out of stack space" in IE11. Kendo tree list is not supporting pagination right now.

Is there any alternative to resolve this issue?

Thanks

I am working on a Spring MVC project. I have a simple JSP form that, along with other elements, needs to get some data from the user in a Grid and submit this data as part of the form to the controller. Using the Kendo JSP wrappers(kendo:dataSource-transport-create, kendo:dataSource-transport-update) I am able to add new data, edit data and send it from a blank grid to the controller. But I am not sure how to post this data as part of the form and not just a standalone grid.

I am working on a Spring MVC project. I have a simple JSP form that, along with other elements, needs to get some data from the user in a Grid and submit this data as part of the form to the controller. Using the Kendo JSP wrappers(kendo:dataSource-transport-create, kendo:dataSource-transport-update) I am able to add new data, edit data and send it from a blank grid to the controller. But I am not sure how to post this data as part of the form and not just a standalone grid.

Hello!

Is it possible to set a custom dashType for each line in a grouped chart series?
E.g. like the colorField attribute?

Thanks for your help,
Daniel

Hello!

Is there a way to reload content via ajax while dragging the chart e.g. to the left or the right?

For example, if I have a line chart showing a timeseries and I drag the chart to the left, so that I can reload the data for the currently visible timeframe?
So I could move the chart endlessly to the left or right (like infinite scrolling)?

Thanks for your help!

Best Regards,
Daniel

 

Hello Sir,

    I am just trying to use the kendo grid in jsp. I have one checkbox column in the grid. I need to give the select all checkbox in the header of the grid. Is it possible to do it. If not then is there any other way to do the same?

 

Regards,

Mrinal

Hi,
  I am working on Detailed editable grid in which,
  Parent Grid shows the summary data and the child grid shows the detailed rows.
  At the starting, I am using some filters in which whenever "submit" button clicked, then the parent grid is loaded.
  and I am implementing the "detailExpand" to read the data from the servlet with the parameters from the parent grid.
  I have 2 Issues:
  Issue 1:
  --------
      Whenever "Submit" button is clicked, The parent grid is showing all the rows for a while, and then showing the actual filtered rows.
     And I see "SubmitController" is called twice. One without any parameters and the other with the selected "CostCenter,Team,Location" fields.

     And I am getting the same behaviour whenever I expand the parent row.

  Issue 2:
  --------
   whenever Edit/"Create New" is clicked in child grid, I need to populate the Child grid column "employeeID" with the same field from parent and want to make it as non-editable.

  I am attaching the jsp file and the ServletController.

Can you please help. 




Regards,
Nagaraju.V

Hi,

   I am working on an application in which it contains detailed editable grid.

Top/Parent  Grid is the Summary data , which is one row per employee. which is non-editable.

and the Child grid contains detailed data for each employee which is editable. Like, if we expand the parent row, It will show-up all the detailed rows for that employee.

 

Now, My requirement is, I need to add check-boxes for the Parent grid such that I can select multiple rows and modify the parent rows(Modifying means adding a new row ), then row should be added to the corresponding child grid.

 

I am using JSP for this. Can you please help/point me to the corresponding examples if available.

 

And is there any demos avaliable for JSP Kendo UI for Detailed/Hierarchical Editable Grid ?

 

Thanks In Advance.

 

Hi,

   I have a Kendo Detail Grid in which the Parent row contains the total percentage and the child row contains the individual percentages.

The Inner grid has Read/Create/Update and delete operations.

My requirements is when ever any of the operations performed in child grid, I need to update the total percentage column has to be updated in parent grid.

here is my code

 

 

<%@taglib prefix="shared" tagdir="/WEB-INF/tags"%>
<%@page import="java.util.HashMap"%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>







<shared:header></shared:header>



<!DOCTYPE html>
<html>
<head>


<style>
html {
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Demo</title>


<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/layout-jsp.css" />


<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<!-- jquery and kendo javascript. jquery MUST be first. -->
<script src="js/jquery.min.js"></script>


<script src="js/kendo.all.min.js"></script>



</head>


<body>
  </div>
  <button type="submit" class="btn btn-default btn-class"
   id="submitbutton">Submit</button>
 </div>
 
 
 <%               
    HashMap<String, Object> data = new HashMap<String, Object>();
    data.put("employeeID", "#=employeeID#");


%>



 <div class="grid-class" id="grid-id">
  <kendo:grid id="parent-grid" name="parent-grid"
   detailInit="detailInit" detailExpand="DetailExpand" pageable="true"
   detailTemplate="grid-nested-id" sortable="true">
   <kendo:grid-pageable pageSizes="true"></kendo:grid-pageable>
   <kendo:dataSource pageSize="10">
    <kendo:dataSource-transport read="SubmitController">
     <kendo:dataSource-transport-parameterMap>
      <script>
            function parameterMap(options, operation) {
                console.log(options);
                return options;
            }
          </script>
     </kendo:dataSource-transport-parameterMap>
    </kendo:dataSource-transport>
   </kendo:dataSource>
   <kendo:grid-columns>
    <kendo:grid-column title="ID" field="employeeID" />
    <kendo:grid-column title="FirstName" field="employeeFirstName" />
    <kendo:grid-column title="LastName" field="employeeLastName" />
    <kendo:grid-column title="Percentage" field="percentage" />
   </kendo:grid-columns>
  </kendo:grid>


  <kendo:grid-detailTemplate id="grid-nested-id">
   <kendo:grid id="child-grid_#=employeeID#"
    name="child-grid_#=employeeID#" class="child-grid-class"
    save="onSave" pageable="true" sortable="true" editable="true"
    edit="onEdit" cancel="onCancel" change="onChange">
    <kendo:grid-editable mode="inline"
     confirmation="Are you sure you want to remove this item?" />
    <kendo:grid-toolbar>
     <kendo:grid-toolbarItem name="create" />
    </kendo:grid-toolbar>
    <kendo:grid-columns>
     <kendo:grid-column title="Employee ID" field="employeeID"
      width="90px" />
     <kendo:grid-column title="Product" field="productName"
      editor="productEditor" width="90px"></kendo:grid-column>
     <kendo:grid-column title="Activity" field="activityName"
      editor="activityEditor" width="150px"></kendo:grid-column>


     <kendo:grid-column title="Percentage" field="percentage"
      width="90px" />
     <kendo:grid-column title="&nbsp;" width="250px">
      <kendo:grid-column-command>
       <kendo:grid-column-commandItem name="edit" text="modify" />


       <kendo:grid-column-commandItem name="destroy" />
      </kendo:grid-column-command>
     </kendo:grid-column>
    </kendo:grid-columns>
    <kendo:dataSource pageSize="10">



     <kendo:dataSource-transport>
      <kendo:dataSource-transport-create
       url="SubmitController?action=create" type="POST"
       contentType="application/json" />
      <kendo:dataSource-transport-read url="SubmitController" />
      <kendo:dataSource-transport-update
       url="SubmitController?action=update" type="POST"
       contentType="application/json" />
      <kendo:dataSource-transport-destroy
       url="SubmitController?action=destroy" type="POST"
       contentType="application/json" />


      <kendo:dataSource-transport-parameterMap>
       <script>
            function parameterMap(options, operation) {
                console.log(options);
                return options;
            }
          </script>
      </kendo:dataSource-transport-parameterMap>
     </kendo:dataSource-transport>
     <kendo:dataSource-schema>
      <kendo:dataSource-schema-model id="uId">
       <kendo:dataSource-schema-model-fields>
        <kendo:dataSource-schema-model-field name="employeeID"
         type="string" />
        <kendo:dataSource-schema-model-field name="productName"
         type="string">
         <kendo:dataSource-schema-model-field-validation required="true" />
        </kendo:dataSource-schema-model-field>
        <kendo:dataSource-schema-model-field name="activityName"
         type="string">
         <kendo:dataSource-schema-model-field-validation required="true" />
        </kendo:dataSource-schema-model-field>
        <kendo:dataSource-schema-model-field name="percentage"
         type="number" />
        <kendo:dataSource-schema-model-field name="totalPercentage"
         type="string" />
       </kendo:dataSource-schema-model-fields>
      </kendo:dataSource-schema-model>


     </kendo:dataSource-schema>
    </kendo:dataSource>



   </kendo:grid>
  </kendo:grid-detailTemplate>


 </div>


 <script type="text/javascript">
 $(document).ready(function(){
  
  $("#submitbutton").click(function(){
   $("#grid-id").show();
   $("#grid-nested-id").show();
   console.log("Submit Button Clicked");
   console.log(selCostcenter);
   console.log(selTeam);
   var $locations=$("#locations");
   selLocation = $locations.val();
   console.log(selLocation);
   var submitString={"costcenter":selCostcenter,"team":selTeam,"location":selLocation};
   $("#parent-grid").data().kendoGrid.dataSource.read({"costcenter":selCostcenter,"team":selTeam,"location":selLocation});
   
  }); 
 });





 function DetailExpand(e){
  console.log("detailExpand");
  //console.log(e.detailRow);
  var row = e.masterRow[0];
  var employeeID= $(row).closest('tr').find('td').eq(1).text();
  console.log("eID:"+employeeID);
  var childGrid = "#child-grid_"+employeeID;
  $(childGrid).data().kendoGrid.dataSource.read({"employeeID":employeeID,"infoType":"detailed"});
  console.log($(childGrid).data().kendoGrid.dataSource);
  /*$(row).closest('tr').find('td').each(function() {
          var textval = $(this).text(); // this will be the text of each <td>
          console.log(textval);
     });
  */
  
  
  
 }


 function detailInit(e){
  console.log("detailInit");
 }
 function onSave(e){
  console.log("Entered On Save");
  //console.log(e);
  //console.log("---");
  var parentRow = this.wrapper.closest("tr").prev();
//   var employeeID= $(parentRow).find('td').eq(1).text();
   //console.log("eID:"+employeeID);
   //var totalpercent = e.model.o.totalPercentage;
  /*
   var Model = e.model;
   
   for(var key in Model) {
       var value = Model[key];
       console.log("key: " + key);
       console.log("value: " + value);
   }
   
*/
   /*
   var totalPercent =  Model["totalPercentage"];
   for(var key in totalPercent) {
       var value = totalPercent[key];
       console.log("key: " + key);
       console.log("value: " + value);
   }
   */
   


   console.log( e.model["totalPercentage"]);
   //console.log( Model["totalPercentage"]);
          //$(parentRow).find('td').eq(5).text(totalpercent) ;


  
 }
 function onEdit(e){
  console.log("Entered On Edit");
  
   var parentRow = this.wrapper.closest("tr");
   console.log(parentRow);  
  console.log("Exit From Edit");
  
 }
 
 function onChange(){
  console.log("Entered On Change");
 }


 
 function cancel(e){
  console.log("Entered cancel");
  e.preventDefault();
 }
 


 function OnChildRequestEnd () {
  console.log("Entered Into OnChildRequestEnd");
 }
 function OnSync () {
  console.log("Entered Into OnSync");
 }


 // this function creates a Kendo UI DropDown List which will be attached to the row in the grid
 // where it is required
 function productEditor(container, options) {
  // create an input field with jQuery and configure it's values with declarative intialization
  // see http://docs.kendoui.com/howto/declarative_initialization for more information
  $("<input data-text-field='productName' data-value-field='productName' data-bind='value: " + options.field + "' />")
  // append it to the container (grid row currently in edit mode)
  .appendTo(container)
  // create the Kendo UI DropDown List
  .kendoDropDownList({
   dataSource: {
    // define the endpoint that will provide the data for this control
    transport: {
     read: "ProductController"
    }
   }
  });
 }


 function activityEditor(container, options) {
  // create an input field with jQuery and configure it's values with declarative intialization
  // see http://docs.kendoui.com/howto/declarative_initialization for more information
  $("<input data-text-field='activityName' data-value-field='activityName' data-bind='value: " + options.field + "' />")
  // append it to the container (grid row currently in edit mode)
  .appendTo(container)
  // create the Kendo UI DropDown List
  .kendoDropDownList({
   dataSource: {
    // define the endpoint that will provide the data for this control
    transport: {
     read: "ActivityController"
    }
   }
  });
 }


 function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
 
</script>
</body>
</html>

 

 

 

 

please help.

Hi,

   Thanks in advance.

I am working on Detailed Editable Grid. The Inner Grid is editable.

The outer  grid has a column with  total value of one of the child grid's field.
SO, whenever a child grid row is updated, It will call the servlet and update the database table and return the row with "totalPercentage" field added to the row,

I want to set this field to parent grid. But , I am getting the "totalPercentage" as undefined. I am attaching the code.

Is there any way we can refresh only one row of the parent grid when child grid is updated ?

or

capture the values returned from servlet.

 

I am very new to Kendo. Can you please suggest any alternative way if it is better ?