Hi Team,

 I ma trying to generate a grid with HTML Table. I AM adding row and  creating HTML Textbox in DOM CELLS property in kendogrid. but when i am filtering the data, filtering and pagination is not working in kendogrid table. Grid get regenerated. Can someone help pls. lPlease find the code.

$(document).ready(function(){
 var grid=$("#dataTable").kendoGrid({
 
 toolbar: [  { template:"<input type='button' class='k-button' value='AddData' onclick='addRow()'/>"  }
 /* {name: "addrow", text: " Add Row "} */],
  columns: [ { field: 'english' }, { field: 'local' }, { field: 'del' } ],
  pageable: {
         messages: {
             empty: "No items to display"
         },
         input: true,
         refresh: true,
         pageSizes: true,
         pageSizes: [10, 20, 30, 50]
     },
     scrollable: true,
     sortable: true,
  
     selectable: "row",
     filterable: true
   , dataSource: { pageSize: 10 }
   
       }).data("kendoGrid");
 grid.dataSource.pageSize(10);
 
});
function addRow() {
 var table;
 var tableID;
     table = document.getElementById("dataTable");
     tableID='dataTable';
 
      var rowCount = table.rows.length;
     
      var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     cell1.id="row["+length+"].english";
     
        var element1 = document.createElement("textarea");
        element1.cols="85";
        cell1.appendChild(element1);
       
        var cell2 = row.insertCell(1);
     cell1.id="row["+length+"].english";   
       var element2 = document.createElement("textarea");
       element2.cols="85";
        cell2.appendChild(element2);
        
        var cell3 = row.insertCell(2);
     cell1.id="row["+length+"].english";   
}
       
</script>

<TABLE id="dataTable" width="500px" border="double">
        <thead>
          <tr style="height:8px">
          <th  data-field="english" >English</th>
          <th data-field="local" >Local</th>
          <th data-field="del">Delete </th>
         </tr>

</table>

Kindly suggest solution.

Hi, Dev Team!

Not sure this right thread, but i find problem on Grid control.

I set Fiori css in my project and put folder "Fiori" near css files. but on grid control i can't see any picture, like arrow for filter column.

<link rel="stylesheet" href="https://[my path]/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://[my path]/styles/kendo.fiori.min.css" />

Also i check availability of pictures from path, like "https://[my path]/styles/Fiori/sprite.png"

I am trying a scenario where I want to move rows from one grid to another. I have used this link as a starter: https://onabai.wordpress.com/2013/01/28/kendoui-move-rows-between-grids/

The method in the above link works fine, but I am looking to add a dropdownlist in the target grid when a row is added. I am providing a dojo link to illustrate:

https://dojo.telerik.com/@alanwhurt/IsAqOVug/2

The dropdownlist is being added and what I would like to do is to be able to select a value in the list and have it persist when a new row is added. For example, if I select the first user in the left grid and move it to the target grid on the right and then select a role, all is well. If I add another user to the target grid, any previous dropdownlist selection is reset. I assume this is happening due to the grid being refreshed when a new item is added to its datasource. Is there a way to prevent this from happening, or another way I can try to accomplish this scenario?

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))

@(Html.Kendo().Grid(Model)
    .Name("SchoolGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.SchoolID).Width("100px");
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Campus).Width("100px");
        columns.Bound(p => p.StateCode).Width("100px");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width("180px");
    })
    .ToolBar(tb => tb.Create())
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.SchoolID))
        .Read("Index", "School")
        .Update("Edit", "School")
        .Create("Create", "School")
        .Destroy("Delete", "School")
    )
)

I have a kendo chart I am using within a dashboard.

The definition of the chart contains a link to the data which is returned as a DataSource (using dt.ToDataSourceResult()) and is in the format.

Field 1, Field 2, Field 3

A, 1, 2

B, 2, 2

etc.

The series are defined as 

series:[{field:"Field2",type:"x", categoryField:"field1",axis:"primary", name:"ABC" }

,{field:"Field3",type:"x", categoryField:"Field1",axis:"primary", name:"Contract Value" }]

where type is set to the series type.

In scenario 1, Field 1 is a date and we require Field 2 and 3 to each be a separately defined series (one being a bar and the other a line.) this works as we would like.

In scenario 2, Field 1 is a company name and Field 2 and 3 are again separately defined series but both bars. In this case the first series is shown as a bar but the second is missing, however the legend contains an entry for both. What is going wrong? If we change series 2 to a line it appears as before.

I understand we could reshape the data for every instance and have separate definitions but would rather have a single elegant solution. 

Can you shed any light in what is happening?

Thanks

Hello,

I downloaded the new Kendo UI v2019.3.917 version, integrated it in my web app and generated less file and got the following error:

`rgba`: color functions take numbers as parameters

I tracked it down to two widgets: Rating and Filter

If I comment the following lines in "type-bootstrap.less", then generation works:

// Rating
/*@rating-icon-text: @widget-border-color;
@rating-icon-selected-text: @accent;
@rating-icon-hover-text: @accent;
@rating-icon-focused-text: @accent;

@rating-icon-focused-shadow: 0 2px 3.6px rgba(255, 255, 255, .1);
@rating-icon-focused-selected-shadow: 0 2px 3.6px rgba(@accent, .5);*/

@import "Default/filter/_theme.less";

@import "Default/rating/_theme.less";

Hello,

is it possible to search numeric columns with the new search panel via built in functionality?

Thanks in advance.