Telerik Forums
Kendo UI for jQuery Forum
0 answers
3 views

I am trying to fix an issue on an old react application with jquery dependencies and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x

"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }


Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss . 

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />

I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.

export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}

On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

Sanal
Top achievements
Rank 1
 updated question on 14 Mar 2024
1 answer
31 views

Morning,

I've been using the Kendo Grid for years and absolutely love it for what I can do with it, but every so often I get asked to stretch the functionality of what it can do,  I haven't found much documentation on this, but i'll try my best to give an example of what I've done, and to see if there is a better way of doing it..

I have a field in my Grid that is a string, with multiple "Tags" explicitly given in the dataSource in filterable.

    {
        "columnMenu": {
            "componentType": "modern"
        },
        "stickable": true,
        "field": "conditions",
        "filterable": {
            "enabled": true,
            "multi": true,
            "search": true,
            "dataSource": [
                {
                    "conditions": "TEST123"
                },
                {
                    "conditions": "TEST"
                },
                {
                    "conditions": "ABC"
                },
                {
                    "conditions": "DEF"
                }
            ]
        },
        "groupable": true,
        "aggregates": "count",
        "groupHeaderTemplate": "Conditions: #= value # (Count: #= count#)",
        "sortable": true,
        "title": "Conditions",
       

The data in the field is a string of comma separated tags, i.e.

TEST, ABC, DEF

I've updated the filter method on the Grid so that I can select multiple options in the filter menu, and it does a "contains" look up to match multiple hits.

filter: function(e){
	this.columns.forEach(function(f){
		if(e.field === f.field){
			if(f.filterable.hasOwnProperty('dataSource')){
				e.filter.filters.forEach(function(f){
					f.operator = "contains";
					e.filter.logic = "and";
				})
			}
		}
	})
},

I have two issues here.

1. I'm using contains, so if the tags are similar (TEST, TEST123), selecting TEST will show both TEST and TEST123 - which isn't ideal.

2. If I select an option from the filter menu, it doesn't remain checked if you were to go back into the filter menu again.

I've asked this question before and had some great help to get it to this point using: https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains but I'm wondering if there is a better way of achieving the functionality I'm looking for here with the grid.  I added square brackets to the tags to distinguish them ([TEST], [TEST123]) , but my users didn't like this change.

Is there a way to do this without using contains?

I'd also like to be able to see the selected option in the filter menu - I can find the checkbox through jQuery, but I cannot toggle it's state..

e.filter.filters.forEach(function(f){
	var checkbox = $(".k-filter-menu").find("input[value='"+f.value+"']");

	console.log(checkbox);												 
        checkbox.prop("checked", true).trigger("change");
	checkbox.attr("checked", true).trigger("change");

	f.operator = "contains";
	e.filter.logic = "and";
})

Thanks for your help,

Matt

Martin
Telerik team
 answered on 05 Feb 2024
0 answers
23 views

hello,
i want to use kendo to send data to a REST API. I get a 415 error. But i do not know what i have made wrong.
My test html looks like this:

 <button id="button" type="button">Submit</button>
 <script>
     $("#button").kendoButton({
         click: function (e) {
             //alert(combobox.value);
             //alert(e.event.target.tagName);

             var dataSource = new kendo.data.DataSource({
                 transport: {
                     // make JSONP request to https://demos.telerik.com/kendo-ui/service/products/create
                     create: {
                         url: "https://localhost:7170/api/Kunden",
                         dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                         type: "PUT"
                     },
                     parameterMap: function (data, type) {
                         if (type == "create") {
                             // send the created data items as the "models" service parameter encoded in JSON
                             return { models: kendo.stringify(data.models) };
                         }
                     }
                 },
                 schema: {
                     model: {
                         id: "kundenId", // the identifier of the model
                         fields: {
                             id: { editable: false, nullable: true },
                         }
                     }
                 }
             });
             // create a new data item
             dataSource.add({ id: 4713 });
             //dataSource.insert(0, { id: 4714 });
             // save the created data item
             dataSource.sync(); // server response is [{"ProductID":78,"ProductName":"New Product","UnitPrice":0,"UnitsInStock":0,"Discontinued":false}]
             //dataSource.pushCreate([{ id: combobox.value }]);
         }
     });
 </script>

My API controller looks like this. I want to use the method SetKunde.


namespace Api.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class KundenController : ControllerBase
    {
        // GET: api/Kunden
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Kunde>>> GetKundeItems()
        {
            //return await _context.KundeItems.ToListAsync();
            DataAccess dataAccess = new DataAccess();
            return dataAccess.GetKunden();
        }

        // GET: api/Kunden/5
        [HttpGet("{id}")]
        public async Task<ActionResult<Kunde>> GetKunde(long id)
        {
            //var kunde = await _context.KundeItems.FindAsync(id);
            DataAccess dataAccess = new DataAccess();
            Kunde kunde = dataAccess.GetKunde(id);
            if (kunde == null)
            {
                return NotFound();
            }

            return kunde;
        }


        // PUT: api/Kunden/5
        [HttpPut]
        public async Task<ActionResult<Kunde>> SetKunde(KundeShort kdn)
        {
                return NotFound();
        }
   }
}
I hope someone can help.

Kind regards
Jens
Jens
Top achievements
Rank 1
 asked on 21 Dec 2023
1 answer
16 views

Hello Teacher:

          My front-end code:

var dataSource = new kendo.data.DataSource({
                type: "aspnetmvc-ajax",
                pageSize: 25000,
                serverPaging: false,
                serverGrouping: false,
batch: true,
                transport: {
                    read: {
                        url: urlRead,
                        data: kendo.antiForgeryTokens(),
                        type:"GET"
                    },

                    create: {
                        url: urlCreate,
                        data: kendo.antiForgeryTokens(),
                        cache: true,

                    },
                    update: {
                        url: urlUpdate,
                        data: kendo.antiForgeryTokens(),
                        cache: true,
                    },
                    destroy: {
                        url: urlDestroy,
                        data: kendo.antiForgeryTokens(),
                        cache: true
                    },

                    parameterMap: function (data, type) {
                        //if (type == "create") {
                        //    // send the created data items as the "models" service parameter encoded in JSON
                        //    return { models: kendo.stringify(data.models) };
                        //}
                    }

                },
                //requestStart: function() {
                //    kendo.ui.progress($("#"+gridName), true);
                //},
                //requestEnd: function() {
                //    kendo.ui.progress($("#"+gridName), false);
                //},
                sync: function (e) {


                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: model,
                    errors: function (response) {
                        //ShowNotification(response);
                        return response.error;
                    }
                },
                error: function (e) {
                    //ShowNotification("Error");
                    dataSource.cancelChanges();
                }
            });
            //dataSource.bind("error", function () { ShowNotification("dsError") });

            grid.setOptions({
                dataSource: dataSource,
                persistSelection: true,
                navigatable: true,
                resizable:true,
                reorderable:true,
                dataBound: function (e) {
                    if (e.sender.dataSource.view().length > 0) {
                        e.sender.select("tr:eq(0)");
                        grid.trigger("change");
                        grid.unbind("dataBound");
                    }

                }
            });

Processing data in batches, I don't know how the frontend sends backend requests and how the backend receives requests?

                                        
Neli
Telerik team
 answered on 06 Dec 2023
1 answer
24 views
Hi Team,

In kendo grid jquery I have added data to a data Source in JSON format. In this format, there is a property in the JSON. If that property is true, I want to change the color of the row. Is it possible to set a different color?

gridData = @Html.Raw(ViewData["DataDetailsJson"]);


var dataSource = new kendo.data.Data Source({
    data: gridData,
    batch: true,
    autoSync: true,
    schema: {
        model: {
            id: "uid",
            fields: {
                id: { hidden: true },
                Project: { editable: false },
                User: { editable: false },
                Status: { editable: false },
            },
        },
    },
});
Neli
Telerik team
 answered on 29 Nov 2023
1 answer
17 views

Like the title says, my grid doesn't "call home" on row deletion... read/update/create work just fine (and all go to the same .aspx on the server).

Here's my (edited slightly) code:

var sThisPage = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);

 

$("#divGrid").kendoGrid({ columns: [ { field: 'Department1', title: 'Department', width: 100, editable: telerik_grid_column_onEditable, editor: deptDropDownEditor, template: "${displayDept(Department1)}", }, { field: 'EmployeeID', title: 'Employee', width: 200, editable: telerik_grid_column_onEditable, editor: emplDropDownEditor, template: "${displayEmpl(EmployeeID)}", }, { field: 'SecurityLevel', title: 'Security level', width: 100 }, { field: 'EmplActive', title: 'Active', width: 80, template: "#= EmplActive ? '<span class=\"fa-solid fa-check\"></span>' : '' #" }, ], dataSource: new kendo.data.DataSource({ serverPaging: false, serverFiltering: false, serverSorting: false, //autoSync: true,

requestStart: function (telerikEvent) { }, requestEnd: function (telerikEvent) { }, sync: function (telerikEvent) { var oToolbar = $("#divToolbar").data("kendoToolBar"); var oFirstLine = this._data[0]; if (!oFirstLine.ID || oFirstLine.ID == '') { //First line is a new recordif ((!oFirstLine.Department1 || oFirstLine.Department1 == '') || (!oFirstLine.EmployeeID || oFirstLine.EmployeeID == '') || (!oFirstLine.SecurityLevel || oFirstLine.SecurityLevel == '' || oFirstLine.SecurityLevel == 0)) { alert('New line not saved as some values are missing.'); } } oToolbar.enable("#btnSave", false); oToolbar.enable("#btnCancel", false); }, error: function (e) { if (e.xhr) { alert(e.xhr.responseText); } $("#divGrid").data("kendoGrid").cancelChanges(); }, transport: { read: { url: sThisPage, type: "POST", dataType: "json", cache: false, data: { action: "R" } }, update: { url: sThisPage, type: "POST", dataType: "json", cache: false, data: { action: "U" } }, create: { url: sThisPage, type: "POST", dataType: "json", cache: false, data: { action: "C" } }, destroy: { url: sThisPage, type: "POST", dataType: "json", cache: false, data: { action: "D" } }, }, schema: { model: { id: "ID", fields: { Department1: { type: "number" }, EmployeeID: { type: "number" }, DeptName: { type: "string" }, EmployeeName: { type: "string" }, SecurityLevel: { type: "number", validation: { required: true, min: 1, max: 100 } }, EmplActive: { type: "boolean", editable: false }, } } }, }), editable: true, sortable: true, selectable: "row", change: telerik_grid_onChange, beforeEdit: telerik_grid_onBeforeEdit, edit: telerik_grid_onEdit, cellClose: telerik_grid_onCellClose, remove: function (telerikEvent) { var x = telerikEvent; this.dataSource.sync(); }, });


function telerik_toolbar_button_onClick(telerikEvent) {
	var x = telerikEvent;
	var oGrid = $("#divGrid").data("kendoGrid");
	
	switch (telerikEvent.id) {
/*snip*/
		case 'btnDelete':
			var oSelected = oGrid.select();
			oGrid.removeRow(oSelected);
			break;
	}
}	//telerik_toolbar_button_onClick

If I set breakpoints on the requestStart and requestEnd functions in the data source and delete a line, neither gets hit.

 

Am I doing something wrong?


Eric
Top achievements
Rank 1
Iron
 answered on 17 Nov 2023
0 answers
37 views

So I have data in this format 

{

name: health

data:[[1,2],[2,2],[3,4]]

type:"area"

visible:true

},

{

name: health2

data:[[1,2],[2,2],[3,4]]

type:"line"

visible:true

}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .

Hrushi
Top achievements
Rank 1
 asked on 28 Oct 2023
0 answers
31 views

i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why. 

 $("#grid").kendoGrid({
                        dataSource: {
                           
                    transport: {
                         read: {
                             url: function(options) 
                             {   return "${pageContext.request.contextPath}/charts";
                                         },
                            
                            dataType: "json",
                            type: "GET"
                        }
                        },
                            
                            schema:{
                                model: {
                                    fields: {
                                        id: { type: "number" },
                                        fullName : { type: "string" },
                                        address: { type: "string" },
                                        email : { type: "string" },
                                        password: { type: "string" },
                                        designation: { type: "string" },
                                        salary: { type: "number" }
                                    }
                                }
                            },

                            aggregate: [ { field: "fullName", aggregate: "count" },
                                
                                          { field: "salary", aggregate: "sum" }
                                          ]
                             
                       ,pageSize: 8 },
                        sortable: true,
                        scrollable: false,
                       pageSize: 5,
                       pageSizes: true,
                        hieght:20,
                         pageable: {
                
           pageSizes: [4, 6,10,"all"],
           buttonCount: 5
                },
     columns: [
                   { field: "id", title: "ID", width: 180  },
                   { field: "fullName", title: "Name",width:300,
                    template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#"  },
                     { field: "address", title: "Address",width:300 },
                      { field: "email", title: "Email",width:200},
                      { field: "password", title: "Password" ,width:200},
                            { field: "designation", title: "Designation" ,width:300},
                            { field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
                            { width:200,
                              template: "<a class='k-button' href='/Home/Index'>Redirect</a>"   }
                            
                        ]
                    });

kha
Top achievements
Rank 1
Iron
 asked on 22 Oct 2023
1 answer
33 views

Hi,

 

For some reason when I try to add a new record to my dataSource ….then refresh the grid  for my hierarchical table that uses detailInit,

 

…. the formatting is bypassed for my new record added to the dataSource.

 

 

After I add the new data to the JavaScript array... and refresh the grid, it does repopulate the child or detail grid:

 

 

But it doesn't appear to catch the format: "{0:c}"

 

 

I don't know why the new value (monetary) is getting bypassed with the format option? Here is my code for the detailInit(e):

 


functiondetailInitMainGrid(e) { console.log("IN: detailInitMainGrid()"); var payCodeList = []; var data = _view.get("interimDS.interimPayrollRecords"); //DEBUG:var data2 = e.data; $.each(data, function (index, value) { if (value.payCode != 'Total') { // add NON-TOTAL records to data array//DEBUG://console.log(" LAST NAME:" + value.fullName + " : RECORD ID: " +value.interimPayrollRecordId); payCodeList.push({ interimPayrollRecordId: value.interimPayrollRecordId, payCode: value.payCode, amount: value.amount, amountHrsMins: value.amountHrsMins, monetary: value.monetary, }); } }); console.log("event data source: ID:" + e.data.interimPayrollRecordId + ", NAME: " + e.data.fullName); //var detailCell = e.detailCell;//detailCell.css("padding-left", "350px"); $("<div/>").appendTo(e.detailCell).kendoGrid({ dataSource: { data: payCodeList, serverPaging: false, serverSorting: false, serverFiltering: false, filter: { field: "interimPayrollRecordId", operator: "eq", value: e.data.interimPayrollRecordId } }, scrollable: true, sortable: true, pageable: false, columns: [ { field: "payCode", title: "Pay Code", width: "110px", attributes: { class: "child-table-details" } }, { field: "amount", title: "Amount<br/>(HRS)", width: "50px", format: "{0:n}", attributes: { class: "child-table-details" } }, { field: "amountHrsMins", title: "Amount<br/> (HRS:MIN)", width: "50px", attributes: { class: "child-table-details" } }, { field: "monetary", title: "Monetary<br/>Amount", width: "50px", format: "{0:c}", attributes: { class: "child-table-details" } } ] }); }

 

I did  manage to debug through the creation of the child table (in the detailInit(e) function) when I click the little triangle on the left of the parent record, but it seems to bypass the new value I pushed to the JavaScript array structure and prints it out with our the $ or the trailing .00. I don't want to create a custom formatter in javascript, I think the format option for the monetary column should be working... but maybe there is something I am doing that causes it to malfunction or convert it to the monetary or currency format?

Thanks again for your help and patience,

George

 

George
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 13 Oct 2023
0 answers
37 views

In Export as Excel limited data is only Shown, If we add more data in the Kendo Table Grid, Additionally,  When we click on Export as Excel, only the same set of data is shown, without any new data being added to the  Excel Sheet.

See here Data is upto 45 in Kendo Table but when we export as Excel then only upto 32 data is loading, no new data is being loaded on Excel Sheet.

Mohit
Top achievements
Rank 1
 asked on 03 Oct 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?