CODEWITHSUNDEEP
jquerykendo-uikendo-grid
Reddy
Reddy

Reputation: 1497

Change Table format to Div

I am using Kendo UI Grid plugin. How can I Change Grid Table layout to Div based layout?

And also I am able to Create New / Edit existing item etc...

Please check the below reference image for more clarification...

Any help please?

Online Demo

Kendo Grid

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/api">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

 <div id="grid"></div>

  <script>
    jQuery(document).ready(function(){
      $("#grid").kendoGrid({
        columns: [
          { field: "Name" },
          { field: "Age" },
          { command: "edit" }
        ],
        dataSource: {
          data: [
            { id: 1, Name: "Reddy Prasad", Age: 30 },
            { id: 2, Name: "Gaurav Kapadia", Age: 33 }
          ],
          schema: {
            model: { id: "id" }
          }
        },
        editable: {
          mode: "popup",
          window: {
            title :"This is the title"
          }
        },
        toolbar: [{ name: 'create', text: 'Add' }]
      });
    });
  </script>

</body>
</html>

Upvotes: 2

Views: 496

Answers (1)

Jon
Jon

Reputation: 636

It would require some styling to allow multiple divs per line and make it look the way you want, but using kendo templates, you can achieve this. Some CSS can be used for hiding the header and the row table can give that panel appearance to each item in a cell.

In the JavaScript there's a line for the row template and in the HTML, that template is defined and uses the fields from your dataSource.

Please note that the data-uid="#: uid #" on the <tr> in the template is necessary for the edit button to work. Without that property the button will be broken since it's not sure which "row" we want to edit.

jQuery(document).ready(function(){
      $("#grid").kendoGrid({
        columns: [
          { field: "Name" },
          { field: "Age" },
          { command: "edit" }
        ],
        dataSource: {
          data: [
            { id: 1, Name: "Reddy Prasad", Age: 30 },
            { id: 2, Name: "Gaurav Kapadia", Age: 33 }
          ],
          schema: {
            model: { id: "id", Name: "", Age: "" }
          }
        },
        editable: {
          mode: "popup",
          window: {
            title :"This is the title"
          }
        },
        toolbar: [{ name: 'create', text: 'Add' }],
        rowTemplate: kendo.template($("#rowtemplate").html())
      });
    });
html { 
    font-size: 14px; 
    font-family: Arial, Helvetica, sans-serif; 
}

.k-grid-header-wrap th {
    display: none;
}

tr {
    float: left;
}

.rowEdit {
    float: right;
}

.myPanel {
    border: 1px solid #888;
    background-color: #eee;
    width: 200px;
    margin: 5px;
    padding: 15px;
}

.myPanel label {
    clear: both; /* puts labels on new line */
    display: block;
    padding: 15px 0 5px 0;
}
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/api">
    <style></style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

 <div id="grid"></div>
    
 <script type="text/x-kendo-template" id="rowtemplate">
 
   <tr data-uid="#: uid #"><td>
   
   <div class="myPanel">
   
     <a class="rowEdit k-button k-button-icontext k-grid-edit" href="\#">
       <span class="k-icon k-edit"></span>Edit
     </a>
   
     <label>Name: "#: Name #"</label>
     
     <label>Age: "#: Age #"</label>
   
  </div> 
  
  </td></tr>
 
 </script>
</body>
</html>

Upvotes: 1

Related Questions