Questions on Kendo UI for jQuery Forum

1 answer

170 views

Treelist Multicolumn headers locked columns

I am using a treelist with multicolumn headers and I have the left side of the treelist locked with the right side columns scrollable horizontally... In my overall layout I have a left hand menu that expands/collapses.. The treelist loads/appears fine but when I collapse the left nav an issue appears where the headers and exterior of the treelist expands as it should but when scrolling the columns the right side keeps the original size which makes it appear that they are cutoff.. screenshot attached ... should i be calling some type of resize/reinitialize when collapsing/expanding the menu?

TreeList

answered on 17 Jun 2021

1 answer

122 views

datasource override sort parameter name

Hi I have a remote server api that expects the sort params to be "sortBy" (name of field to sort), and "sort" (direction).

How can I change the kendo ui datasource transport read event to send these instead of the default "sort" object.

the below does not work, because Sort is getting overwritten by the underlying kendo code:

data: function (e) {
                        
                        if (e.sort) {
                            var r = { sortBy: e.sort[0].field, sort: e.sort[0].dir };
                            
                            console.log(r);
                            return r;
                        }
                        else return "";
                        
                    }

Data Source

answered on 16 Jun 2021

0 answers

58 views

TreeList Export to PDF button is in rendered PDF

You can look at the kendo demo itself, click "Export to PDF", and you'll see the button. It's not this way in the Kendo Grid though.

Thanks,

Chris

TreeList

asked on 15 Jun 2021

2 answers

8.8K+ views

Getting checkbox value from grid column

I have a grid that has 2 checkboxes in it. Before I send the data to the controller I am looping through the rows to get certain values. I have no issues getting the grid data source and iterating through the rows. I am however running into an issue finding out if the checkboxes are checked or not.

Grid

$("#multipleUploadDetailGrid").kendoGrid({
     dataSource: {
         //data: self.MultipleUploadDetails,
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     DocumentType: { editable: true, field: "DocumentType" },
                     FileName: { editable: false, type: "string" },
                     FileSize: { editable: false, type: "string" },
                     IsConf: { editable: true, type: "boolean" },
                     IsTs: { editable: true, type: "boolean" },
                 }
             }
         }
     },
     pageable: false,
     selectable: false,
     refresh: false,
     editable: true,
     resizable: true,
     reorderable: true,
     noRecords: { template: "<div class='k-grid-norecords-template' style='margin:0 auto;position:static;'>No Files Uploaded</div>" },
     sortable: {
         mode: "multiple",
         allowUnsort: true
     },
     columns: [
         { field: "FileName", title: "Name", width: 150, sortable: true },
         { field: "FileSize", title: "Size", width: 150, sortable: true },
         { field: "DocumentType", title: "Document Type", width: 225, editor: docTypeDropDownEditor, template: "#if (!!data.DocumentType){#<span>#:oir.Utilities.checkNull(DocumentType.Name)#</span>#}else{#<span>No Doc Type</span>#}#"},
         {
             field: "IsConf", title: "Confidential",
             template: "<input name='IsConf' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }
         },
         { field: "IsTs", title: "Trade Secret", template: "<input name='IsTs' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" } },
     ],
 });

Code to iterate through datasource.

        var grid = $("#multipleUploadDetailGrid").data("kendoGrid");
        var ds = grid.dataSource.view();
        var dslength = ds.length;
        
        if (dslength > 0) {
            for (var i = 0; i < dslength; i++) {
                var currRow = ds[i];
                //trying to get checkbox value here.
             }
        }

Checkbox

Grid

answered on 15 Jun 2021

1 answer

438 views

MVC Map link multiple markers with arrow line.

Hi,

I am using Kendo MVC Map to display transaction data. With the reference of https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location, I am able to draw a path between markers, but I want to show an arrow on the path of map. Below is the code I am using to display map,

<div id="transactionMap">
    @(Html.Kendo().Map()
.Name("map")
.Center(43.76398900, -79.54862200)
.Zoom(15)
.Layers(layers =>
{
    layers.Add()
        .Type(MapLayerType.Tile)
        .UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        .Subdomains("a", "b", "c")
        .Attribution("&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>." +
                     "Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>")
        .ZIndex(0);

    layers.Add()
        .Style(style => style.Fill(fill => fill.Opacity(0.2)))
        .Type(MapLayerType.Shape)
        .ZIndex(1);

    layers.Add()
        .Type(MapLayerType.Marker)
        .DataSource(dataSource => dataSource
              .Read(read => read.Action("Transaction_Read", "TestReports").Data("TripLogMarkerParam").Type(HttpVerbs.Get))
        )
        .LocationField("LatLng")
        .TitleField("Name")
        
        .ZIndex(2);


})
.Events(e=>e.Reset("onResetMap")   
       ))
</div>

<script src="@Url.Content("~/Content/dataviz/map/js/chroma.min.js")"></script>
<script>
    var geom = kendo.geometry;
    var draw = kendo.drawing;
            
    function TripLogMarkerParam() {

        return {
            tripId: @ViewBag.tripId,
            fromTripLogId: @ViewBag.fromTripLogId,
            toTripLogId: @ViewBag.ToTripLogId
        };

    }

    function onResetMap(e) {
        var map = e.sender;
        var markers = map.layers[2].items;

        for (var i = 0; i < markers.length - 1; i++) {

            linkMarker(map, markers[i], markers[i + 1]);
        }

    }

   
    function linkMarker(map, marker, nextMarker) {
        var dataFrom = map.locationToView(marker.location());
        var nextDataFrom = map.locationToView(nextMarker.location());

        var shapeLayer = map.layers[1];
        var line = new kendo.dataviz.drawing.Path({
            stroke: {
                color: "#FF0000",
                width: 2,
                lineCap: "round"
            }
            
        });
        line.moveTo(dataFrom).lineTo(nextDataFrom);          
        shapeLayer.surface.draw(line);
    }
</script>

Map

answered on 14 Jun 2021

1 answer

167 views

Shared datasource between Grid and map components

Is it possible to synchronize Map and Grid components with a shared datasource ? and have you an example somewhere ?

Regards

Data Source

Grid

Map

answered on 14 Jun 2021

1 answer

368 views

FileManager Prevent Copy on Drag and Drop

Is there a way to remove copy and only confirm Move when dragging and dropping a file?

I tried manipulating options.messages.dialogs.moveConfirm to show only move, but I still have a small button for Copy

filemanager.options.messages.dialogs.moveConfirm.content = '<p style="text-align: center;">Do you want to move file?</p>';
filemanager.options.messages.dialogs.moveConfirm.okText = '';

Drag and Drop

FileManager

answered on 14 Jun 2021

1 answer

633 views

kendo datetimepicker is displaying behind dialog

I am using the kendo-ui(2021.2.511) datetimepicker control in my Vuejs 2.x application.

The datetimepicker controls works when used on a page.

But when I use the datetimepicker in a v-dialog, and click the datetimepicker, the control displays behind the dialog for a moment then closes.

Has anyone seen this behavior? Is there a setting or work around to make the datetimepicker work correctly when used in a v-dialog?

DatePicker

answered on 14 Jun 2021

1 answer

192 views

How to achieve 5 digit decimal precision in Currency type column?

In my Application there is column of Currency type. Ex: If there is some value $230.344 coming from database it is displaying as $230.34. When I am entering 230.34 in is equal to filter, it is not filtering this value. No value is displayed.

How can I filter the displayed value in currency column

Filter

Grid

answered on 14 Jun 2021

0 answers

126 views

Sorting child items in each parent item A-Z

Hey all I am trying to find the correct way to order/sort my child names in order from A-Z.

Currently my treeview looks like this:

And this is how I would like to sort it:

The data is coming in via JSON like so (using the above example):

[{
        "Name": "AU",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Gitlab",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "B",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHubCommits",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHub",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Re",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ir",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ru",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveA",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveH",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    },.........
]

Note that the JSON above does not come in any type of order. The Category names themselves are in order by me doing this:

dataSource: {
   data: resultData,
   schema: {
       model: {
          children: 'items'
       },
       parse: (data) => {
          let newData = [];

           //Re-order catagory names A-Z
           data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);
....

The rest of the above code looks like this::

           data.forEach(item => {
              let parent = newData.find(parentItem => parentItem.text === item.Category);

              if (!parent) {
                 //The beginning of the tree category
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 //Each "child" under the above category
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

           return [{
              id: 1,
              text: 'Categories',
              expanded: true,
              items: newData
           }];
       }
   }
 }
});

How would I, using the code above, sort also the child items under each category name?

I've tried already adding this to the code:

sort: {
   field: "Name", 
   dir: "asc"}

But that does not seem to do anything?

Data Source

Sortable

TreeView

updated question on 10 Jun 2021