Telerik Forums
Kendo UI for jQuery Forum
1 answer
8 views

Hi all,

Is it possible to disable en hide the treeview in filemanger?

Greetings Maxime

Martin
Telerik team
 answered on 14 Sep 2021
1 answer
19 views

Hi,

in Kendo Spreadsheet cell, when it's in editing, the backspace button doesn't work to cancel cell content;

any idea to resolve it?

 

Patrick
Telerik team
 answered on 13 Sep 2021
0 answers
11 views

Hello I am coming from Kendo for Core. I am trying to get data from the database but im not sure where im going wrong.

Here is my controller action and the call from the webpage.

   public IActionResult GetRoles()
        {
            var Roles = _context.AspNetRoles.ToList();

            return Json(Roles);
        }

  $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: '../Admin/GetRoles'
                    },
                    pageSize: 20
                },

This works locally but when i publish to the server it cannot find the method.  I looked at the service they have posted but im not sure what i would need to do.

 

local does give an error but the data shows

kendo.all.js:2178 Unknown DataSource transport type 'json'.
Verify that registration scripts for this type are included after Kendo UI on the page.
Kerry
Top achievements
Rank 1
 updated question on 12 Sep 2021
1 answer
12 views

my cshtml file

  @(Html.Kendo().Spreadsheet()
            .Name("spreadsheet").HtmlAttributes(new { style = "width:100%;" })

        )

<script> $(document).ready( function () { var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet"); $.ajax({ type: "POST", url: '@Url.Action("GetFileFromDetails", "Spreadsheets")', contentType: "application/json; charset=utf-8", data: { data: myData }, dataType: "json", success: function (recData) { //alert(recData); spreadsheet.fromJSON(recData.response); }, error: function (ex) { alert(ex); } }); }); </script>

my controller


  [HttpPost]
        public ActionResult GetFileFromDetails()
        {
           
var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
            return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);
        }
this method returns same value as shown in upload example still this doesn't load spreadsheet
  [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {            
            var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
            return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);
        }
while using upload sample it works fine. 
Hardik
Top achievements
Rank 1
Iron
 answered on 10 Sep 2021
1 answer
20 views

Support

 I am new to Telerik Grid.  This code I put together from a couple of the sites examples

to show "proof of concept" for a newly assigned project.  The display of the grid works fine

if I remove the "TRANSPORT section of the datasource.  The popup edit will save to the cached data but

will not call the update action as specified.  As you see the data is generated as a list and converted

to JSON on entry to the view.  Any assistance would be greatly appreciated.  Thank you.

 

Bill Lawler 

 

Below is my controller, model, and View snippets 

 

MY CONTROLLER

    public class TankTagItemVM
    {
        public string Tank { get; set; }
        public string Level_Tag { get; set; }
        public string Material_Tag { get; set; }
        public string Temperature_Tag { get; set; }
        public string Water_Level_Tag { get; set; }
        public string Gross_Pumpable_Tag { get; set; }
        public string Gross_Heel_Tag { get; set; }
        public string Gross_Volume_Tag { get; set; }
        public string Gross_Max_Tag { get; set; }
        public string Net_Volume_Tag { get; set; }
        public string Mvmt_Level_Tag { get; set; }
        public string Mvmt_Gross_Pumpable_Tag { get; set; }
        public string Mvmt_Gross_Heel_Tag { get; set; }
        public string Mvmt_Gross_Volume_Tag { get; set; }
        public string Mvmt_Gross_Max_Tag { get; set; }
        public string Mvmt_Net_Volume_Tag { get; set; }
    } 

 

 

 

MY CONTROLLER

        public ActionResult GetTankTags([DataSourceRequest] DataSourceRequest request)
        {

            DateTime startDate = DateTime.Parse("2021-01-17");
            var page = request.Page;
            var pagesize = request.PageSize;

            string conn = ConfigurationManager.ConnectionStrings["PMRCConnectionString"].ConnectionString;
            SqlConnection sqcon = new SqlConnection(conn);
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            cmd.Connection = sqcon;
            cmd.CommandText = "dmi.tml_get_tank_tag_items_sp";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            sd.SelectCommand.Parameters.Add("@pDtToday", SqlDbType.DateTime).Value = startDate;
            sqcon.Open();
            sd.Fill(dt);
            sqcon.Close();
            List<TankTagItemVM> TanksTagSummary = new List<TankTagItemVM>();
            foreach (DataRow dr in dt.Rows)
            {
                TankTagItemVM st = new TankTagItemVM();
                st.Tank = dr["Tank"].ToString();
                st.Level_Tag = dr["Level_Tag"].ToString();
                st.Material_Tag = dr["Material_Tag"].ToString();
                st.Temperature_Tag = dr["Temperature_Tag"].ToString();
                st.Water_Level_Tag = dr["Water_Level_Tag"].ToString();
                st.Gross_Pumpable_Tag = dr["Gross_Pumpable_Tag"].ToString();
                st.Gross_Heel_Tag = dr["Gross_Heel_Tag"].ToString();
                st.Gross_Volume_Tag = dr["Gross_Volume_Tag"].ToString();
                st.Gross_Max_Tag = dr["Gross_Max_Tag"].ToString();
                st.Net_Volume_Tag = dr["Net_Volume_Tag"].ToString();
                st.Mvmt_Level_Tag = dr["Mvmt_Level_Tag"].ToString();
                st.Mvmt_Gross_Pumpable_Tag = dr["Mvmt_Gross_Pumpable_Tag"].ToString();
                st.Mvmt_Gross_Heel_Tag = dr["Mvmt_Gross_Heel_Tag"].ToString();
                st.Mvmt_Gross_Volume_Tag = dr["Mvmt_Gross_Volume_Tag"].ToString();
                st.Mvmt_Gross_Max_Tag = dr["Mvmt_Gross_Max_Tag"].ToString();
                st.Mvmt_Net_Volume_Tag = dr["Mvmt_Net_Volume_Tag"].ToString();
                TanksTagSummary.Add(st);
          }
          return View(TanksTagSummary);
        }

 

 

MY CSHTML 

@model List<WebApplication5.Models.TankTagItemVM>
@{
    ViewBag.Title = "GetTankTags";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Tank Tags List</h2>

<div id="grid"></div>
<script>
    $(document).ready(function () {
        var model =@{@Html.Raw(Json.Encode(Model))};
        var crudServiceBaseUrl = "https://localhost:44387/TanksList";

        dataSource = new kendo.data.DataSource({
            data: model,
            pageSize: 20,
            schema: {
                model: {
                    id: "Tank",
                    fields: {
                        Tank: { type: "string" },
                        Level_Tag: { type: "string" },
                        Material_Tag: { type: "string" },
                        Temperature_Tag: { type: "string" },
                        Water_Level_Tag: { type: "string" },
                        Gross_Pumpable_Tag: { type: "string" },
                        Gross_Heel_Tag: { type: "string" },
                        Gross_Volume_Tag: { type: "string" },
                        Gross_Max_Tag: { type: "string" },
                        Net_Volume_Tag: { type: "string" },
                        Mvmt_Level_Tag: { type: "string" },
                        Mvmt_Gross_Pumpable_Tag: { type: "string" },
                        Mvmt_Gross_Heel_Tag: { type: "string" },
                        Mvmt_Gross_Volume_Tag: { type: "string" },
                        Mvmt_Gross_Max_Tag: { type: "string" },
                        Mvmt_Net_Volume_Tag: { type: "string" },
                    }
                }
            },
            transport: {
                read: {
                    url: '@Url.Action("GetTankTags", "TanksList")',
                    dataType: 'json'
                },
                update: {
                    url: '@Url.Action("GetTankTags_Update", "TanksList")',
                    dataType: 'json',
                    type: 'POST'
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            }
        });

        $('#grid').kendoGrid({
            dataSource: dataSource,
            selectable: "single",
            sortable : {
                mode :"single",
                allowUnsort : "false"
            },
            height: 550,
            pageable : {
                refresh : false,
                pageSizes : true,
                buttonCount:10
            },
            columns: [
                { field: "Tank", title: "Tank", width: "70px" },
                { field: "Level_Tag", title: "Level", width: "70px" },
                { field: "Material_Tag", title: "Material", width: "100px" },
                { field: "Temperature_Tag", title: "Liquid Temp", width: "100px" },
                {
                    title: "Midnight Cut-off Tags", attributes: { style: "text-align: center" },
                    columns: [
                        { field: "Water_Level_Tag", title: "Water Level", width: "100px" },
                        { field: "Gross_Pumpable_Tag", title: "Gross Pumpable", width: "100px" },
                        { field: "Gross_Heel_Tag", title: "Gross Heel", width: "100px" },
                        { field: "Gross_Volume_Tag", title: "Gross Volume", width: "100px" },
                        { field: "Gross_Max_Tag", title: "Gross Max", width: "100px" },
                        { field: "Net_Volume_Tag", title: "Net Volume", width: "100px" }
                    ]
                },
                {
                    title: "Pumper Log Tags",
                    columns: [
                        { field: "Mvmt_Level_Tag", title: "Level", width: "70px" },
                        { field: "Mvmt_Gross_Pumpable_Tag", title: "Gross Pumpable", width: "100px" },
                        { field: "Mvmt_Gross_Heel_Tag", title: "Gross Heel", width: "100px" },
                        { field: "Mvmt_Gross_Volume_Tag", title: "Gross Volume", width: "100px" },
                        { field: "Mvmt_Gross_Max_Tag", title: "Gross Max", width: "100px" },
                        { field: "Mvmt_Net_Volume_Tag", title: "Net Volume", width: "100px" }
                    ]
                },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
            ],
            editable: "popup"
        });
Neli
Telerik team
 answered on 10 Sep 2021
1 answer
17 views

I'm Already implemented a dropdown in a grid collumn according to this demo: https://demos.telerik.com/kendo-ui/grid/editing-custom

I'm Already did a test with this custom dropdown: https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem

I thinking if its possible to add this custom dropdown in a collumn of the grid to add a new category if the category is not found in the dropdown.

The collumn field doesnt show in the collumn Comment.

I tried the following code without success, some tips of how to solve this?

EDIT 1: I tried a solution from stackoverflow, and I think it is very close to solving this issue(http://dojo.telerik.com/OZIXOlUM). Still, the addNew function expects the widgetID. In the onclick of the add new button, the widgetID is passing nothing (see print screen). How did I get this ID? The script "noDataTemplate" is trying to get the id this way '#:instance.element[0].id#', but as I said, nothing returns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vat Grid</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="grid"></div>
    

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
        </div>
        <br/>
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>

    <script>
        $(document).ready(function(){
            var dataSource = new kendo.data.DataSource({
                data: categories
            });

            var gridDataSource = new kendo.data.DataSource({
                data : [ {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "Some Comment",
                    "Confirmed": 1,
                    "Stat": 1
                }]
            });

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                        field: "Stat",
                        title: "Status"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed",
                        template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
                    }, {
                        field: "Commen",
                        title: "Comment",
                        editor: commentCategoryEditor,
                        template:  "#=Commen#",                      
                        //template: "<input id='Commen'>",
                        width: 450,
                        nullable : true
                    }]
            }); 

        });

        var categories = [{
            "CategoryName": "-"
        },{
            "CategoryName": "Category 1"
        }, {
            "CategoryName": "Category 2"
        }];

        function commentCategoryEditor(container, options){
        $('<input name="Commen">')
                .kendoDropDownList({
                    filter: "startswith",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: dataSource,
                    noDataTemplate: $("#noDataTemplate").html()
            });
        }

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList();
            var dataSource = widget.dataSource;

            if (confirm("Are you sure?")) {
                dataSource.add({
                    CategoryID: 0,
                    CategoryName: value
                });
                dataSource.one("sync", function() {
                    widget.select(dataSource.view().length - 1);
                });
                dataSource.sync();
            }
        };
            
                
            

    </script>
</div>


    

</body>
</html>
Regards,

Jorge
Neli
Telerik team
 answered on 10 Sep 2021
1 answer
10 views

Hi!

Can I also apply a filter string representation read from a filter transport.parameterMap?

let grid = $('#myGrid').data("kendoGrid");

// This works, apply filter from object
grid.dataSource.filter({ field: "amount", operator: "eq", value: 7 });

// read the grid' filter as string
let filterstring = grid.dataSource.transport.parameterMap({ filter: grid.dataSource.filter() }).filter;
// value is now "amount~eq~7"

// Q: can something like this be done in some way?
grid.dataSource.filter("amount~eq~1234567"); // bad code

Thanks!

Patrick
Telerik team
 answered on 09 Sep 2021
2 answers
14 views

Hi team,

In Kendo Upload, with the Default theme (LESS), the remove button (cross) for an uploaded file does not show its title when mousing over, see screenshot.

Seems the result of a bad pointer-events css.

Best regards,

Laurent.

Neli
Telerik team
 answered on 09 Sep 2021
2 answers
72 views

Hi,

I'm trying to change kendo grid Edit & create button popup titles,

both buttons popups same win but need to change edit button popup title as exists (Edit), & create(Add new record) button popup title to Add new record,

 

please help me to do this change...

Abdulsalam Elsharif
Top achievements
Rank 2
Iron
Iron
 answered on 08 Sep 2021
1 answer
23 views

Hi

I am working on Multiselect Customizing Template given on https://demos.telerik.com/kendo-ui/multiselect/template

I followed the example and created the same into my project. But the issue i am facing is that I have to copy the css as given in the example and add it into my css file.

Now talking about the css linked with #customers-list

This id is generated automatically by kendo.

Now if i want to add multiselect at multiple places into my project i have to add new id dependency into the css for it to support the image styling with the text.

Is there any way that i only create the CSS ones and use it for other select boxes as well

CSS in example:

 #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }
                
                /* Material Theme padding adjustment*/
                
                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }

Neli
Telerik team
 answered on 08 Sep 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran