Hello,

I am using templates with ahref for Kendo toolbar, but the Images dont Show. Only one Show full rest is cut or overlapped i believe

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(true)
.Items(items =>
{           
            items.Add().Template("<a href='javascript: void(0)' class='abutton save' onclick='GoBack()' title='Speichern' > </a>");

items.Add().Template("<a href='javascript: void(0)' class='abutton delete' onclick='onDelete()' title='löschen'> </a>");
               
             items.Add().Template("<a href='javascript: void(0)' class='abutton goback' onclick='GoBack()' title='Zurück zur Liste' > </a>");

})
)

 

my css

.abutton.save {
background: url('@Url.Content("~/Images/Save_new.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.goback {
background: url('@Url.Content("~/Images/arrow_left.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.delete {
background: url('@Url.Content("~/Images/delete.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}

What am i doing wrong

 

Thanks

 

Anamika

We are facing an issue in telerik grid when we bind it using the .BindTo() and set the .ServerOperation(false).

If we sort our grid or select the next page, it appears that the data source for the grid is still associated to the original data source and we lose the indexing in the grid.
As our grid also requires keyboard navigation through the arrow keys (selecting the down arrow should select the next row in the grid and selecting the up arrow should go to the previous row), we wrote some custom JavaScript to achieve that. (We know we can achieve the navigation also through selecting down or up arrow and spacebar, but due to business needs we want it to be a one key operation).However, we cannot accomplish this after a sort or page as the data source still points to original data source before sort and the selection jumps to the next index in the original data source instead of the adjacent row.

So our question is how to set the data source to point to the sorted data source?
We did try re-reading the data source and refreshing it but that points it all back to the original data source and the grid loses all its sorting or paging as well.
dataSource.read();
dataSource.refresh();

Here is the custom code we have in our JavaScript which is executed when a user clicks the arrow key to select the next row in the grid

function nextRow() {
    var gridService = $(gridId).data("kendoGrid");
    if (gridService !== undefined) {
        var rowCount = gridService.dataSource.data().length;
        if (rowCount !== undefined) {
            var rows = gridService.items();
            var currSelRowIndex = rows.index(gridService.select());
            var nextRowIndex = rowCount - 1;
            if (currSelRowIndex < rowCount - 1) {
                nextRowIndex = currSelRowIndex + 1;
                selectServiceLineRow(nextRowIndex, true);
            }
           else {
                nextRowIndex = 0;
                var pageService = gridService.dataSource.page();
                var pageSizeService = gridService.dataSource.pageSize();
                if ((pageService) * pageSizeService < gridService.dataSource.total()) {
                    gridService.dataSource.page(pageService + 1);
                    selectServiceLineRow(nextRowIndex, true);
                }
            }
        }
    }
}

function selectServiceLineRow(serviceLineRowIndex, withFocus) {
    var gridService = $(gridId).data("kendoGrid");
    var rowAt = gridService.dataSource.at(serviceLineRowIndex);
    var rowuid = rowAt.uid;
    var row = gridService.tbody.find("tr[data-uid='" + rowuid + "']");
    gridService.select(row);
    var cell = row.find('td:eq(0)');
    gridService.current(cell);
    if (withFocus) {
        cell.focus();
    }
    serviceLinesGridCalcPrevNextButton(serviceLineRowIndex);
}


The grid’s datasource is bined in cshtml like this.


            .DataSource(d => d
                .Ajax()
                .Events(e => e.Error("onWebApiError").Change("ResetGridScrollbar(\"#ServiceLinesGrid\")"))
                //Remove .ServerOperation when paging is added
                .ServerOperation(false)
                .Model(m => m.Id(e => e.LineNumber)))
            .BindTo(Model.ServiceLines)

I have a grid data model defined like this:

                var griddatamodel = kendo.data.Model.define({
                    id: "RequestId",
                    fields: {
                        Status: { type: "string", editable: false },
                        Priority: { type: "number", editable: true, validation: { min: 1, max: 9999 } }
                    }
                });

The datasource retrieves the data based on a few drop down lists. I have a function that returns an CanChangePriority Boolean based on the values of the drop down lists. I want to be able to make the Priority field editable depending on the CanChangePriority Boolean, and update the editable flag as the drop down selection is changed. Is there a way to do that?

Doni

I have a kendo Grid with an editor column that uses a combobox whose datasource is set to an object array. Everything works fine except when a user sets enters a custom value into the combobox (for example:'abc') that doesn't match any of the datasource options. The combobox displays undefined when tabbing off of it or moving focus out of the combobox.  I have tried to handle this in the change event of the combox box by adding the custom value to the datasource (using the Telerik online example for adding custom values), but that doesn't appear to work.

Below is my html file code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

</head>
<body>
    <div id="mappingGrid"></div>
    <script>



    //$(document).ready(function () {

       //capture vars


        var mGrid = $("#mappingGrid").kendoGrid({

                dataSource: {

                schema: {
                        model: {
                           // id: "Id",
                        fields: {
                         //   Id: { editable: false, nullable: false },

                            CustomFunction: { defaultValue: { Value: "0", Name: "" } },



                        }
                        }
                    },

            },
            //   batch:true,

            pageSize: 10,
            autoBind: false,
            height: 300,
              width: 300,
           
            scrollable: true,
            sortable: true,
            filterable: true,
            editable: true,
        //     serverFiltering: true,
            toolbar: ["create"],
            columns: [
                        { field: "CustomFunction", title: "Custom Function", editor: customFunctionEditor, template: "#=CustomFunction.Name#" },

                      { command: [{ name: "destroy", text: "" }], title: "&nbsp;", width: "100px" }],



        });
   


            function customFunctionEditor(container, options) {
                $('<input id="CustomFunction" name="CustomFunction">')
                    .appendTo(container)
                    .kendoComboBox({
                        dataTextField: "Name",
                        dataValueField: "Value",
                        change: onComboBoxChange,
                        //       autoBind: abind,
                        dataSource: [
                                    { Name: "Add", Value: "1" },
                                    { Name: "Subtract", Value: "2" },
                                    { Name: "Multiply", Value: "3" },
                                    { Name: "Divide", Value: "4" }
                        ],

                    }).appendTo(container);

            }


            function DisplayError(xhr) {
                var msg = JSON.parse(xhr.responseText);
                errornotification("Error", msg.Message);
                // alert(msg.Message);
            }



            function onComboBoxChange(e) {
                var combo = e.sender;

                var comboText = combo.text();
                // check if new value is a custom one
                if (!combo.dataItem()) {


                    var dataSource = combo.dataSource;
                    dataSource.add({
                        Value: combo.text(),
                        Name: combo.text()
                    });

                    dataSource.one("sync", function () {
                        combo.select(dataSource.view().length - 1);
                    });

                    dataSource.sync();


                }

            }
        });

    </script>
</body>
</html>

 

 

Hello,

 

Can we have tooltip for command Buttons with images

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(false)
.Items(items =>
{
items.Add().Type(CommandType.Button).ImageUrl(Url.Content("~/Images/Save_new.png")).Id("saveBtn").Click("SaveEntry");

})

 

Thanks

 

Anamika

I have a grid with editable  when the cell, I make the with it, but it will close immidiately, it is work with version   but not work with 2017.2.504

here is my code in dojo

http://dojo.telerik.com/iguti/2

anyone could tell me why?

thanks a lot.

 

 

Hi,

Possibly a stupid qs, but I'm wondering if it is possible to configure the insertFile tool in the editor to allow upload of files from a local drive, rather than just giving the option to insert a url to a file?

Currently the tool only gives me the option to insert a url.
We've implemented a bespoke attachment upload option which runs alongside the Kendo Editor, in a different app, but I'd prefer to avoid trying to redevelop it to fit into this app.

 

Cheers.

Hey everyone,

we've a TreeView with nodes that can contain child nodes which can contain child nodes and so on ....

How can we make a client-side sort, so that all levels of nodes are sorted ascending/descending? The normal sort setting of the datasource doesn't work properly  because it only sorts the top level of the nodes but not the child levels.

Any advice welcome ;)

Regards,
Michael

Hello,

I would like to implement a line chart which gives the user the opportunity to activate and to deactivate the crosshair with a drop-down menu. By default, the crosshair should not be visible.

The following code shows a sample script for the chart:


The crosshair remains invisible after calling displayCrosshair. The function only works properly if crosshair.visible has the value true:​


How can I avoid this?

My scheduler is completely non-editable. 

But I'd like the user to be able to click the little event title and get a nice modal window showing all of the details. (Similar to how editing works now, but read only)

What's the best way to go about this?

I *could* set editable to true and then create a custom edit template (that is actually read only). But then I'm left with slapping down all of the new events like delete and drag/drop.

Or perhaps I could keep the scheduler read only, use a template for the little displayed event, and roll my own popup for the details. the 

I'm starting this tomorrow and I'd love to know if anyone has some advice for a preferred direction.

Thanks!