Questions on Kendo UI for jQuery Forum

0 answers

663 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.

Data Source

updated question on 12 Sep 2021

1 answer

286 views

[Solved] I am trying to load excel from a file path but doesn't load spreadsheet asp.net mvc

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.

General Discussions

Spreadsheet

answered on 10 Sep 2021

1 answer

108 views

Grid works without TRANSPORT section / Nothing but headers get displayed with the TRANSPORT section

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";
}

    $(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: " ", width: "250px" }
            ],
            editable: "popup"

});

Grid

answered on 10 Sep 2021

1 answer

205 views

dropdown with add new item in a grid collumn

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

DropDownList

Grid

answered on 10 Sep 2021

1 answer

553 views

[Solved] Apply grid filter from transport string?

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!

Data Source

Filter

Grid

answered on 09 Sep 2021

2 answers

300 views

[Solved] Kendo Upload - No Title for remove button

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.

Upload

answered on 09 Sep 2021

2 answers

2.4K+ views

Kendo grid Edit & create button popup title change

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...

General Discussions

answered on 08 Sep 2021

1 answer

935 views

Multiselect Customizing Template list css issue

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;
                }

MultiSelect

answered on 08 Sep 2021

1 answer

121 views

search does not works when we use setOptions({messages: { defaultFileName: node.fileName}})

https://dojo.telerik.com/utOdediD/18

PDFViewer

answered on 08 Sep 2021

1 answer

1.5K+ views

Tooltip does not hide when element is hidden

I have a grid where I have some buttons with icons for every row. For those buttons I need to display some tooltips. To do this I am using the kendo tooltip however when the user hovers the button and after the tooltip is displayed the user clicks on the button, the button is hidden but the tooltip is still shown.

How can I close the tooltip when the element is no longer visible on the screen?

ToolTip

answered on 08 Sep 2021