Questions on Kendo UI for jQuery Forum

1 answer

426 views

How to adjust spacing or size of OrgChart

Hi, I'm working with the Kendo jQuery OrgChart widget and for some reason it is blowing up to a huge size and I haven't had any luck adjusting it. Here is a dojo of the data I'm working with (https://dojo.telerik.com/ibiniBuW). It doesn't seem to have many more nodes than the demos but it automatically takes up a huge amount of space. The dimensions seem to default to height: 2413px and width: 10399px no matter the size of the parent div.

I have tried resizing the div itself and then using styling on the k-orgchart-container class and neither method changed anything. I have also tried setting height, width, and chartArea from within the widget and none of those changes made any difference either.

Any help would be much appreciated, thanks!

OrgChart

answered on 18 Jul 2022

1 answer

192 views

Kendo Multi Select AJAX POST Request

Hi,

I want to create the kendo multi-select using jquery ajax. Using ajax I have sent the request to the server every time when a user types a letter in multi-select. So for that, I have created this Script that is attached below :-

var searchTerm = params.term && params.term != "" ? params.term : islNewsArticle2LastSearchTerm;

var payload ={
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
};


var new1 = new kendo.data.DataSource({
  transport: {
                    read: function(s) {
                        $.ajax({
                             delay: 350, // wait 250 milliseconds before triggering the request
                             url: "https://"+'@Session.OrgUrl~'+"/searchapi/taskviews/tasklist",
                             type: "post",
                             data: JSON.stringify(payload),
							 dataType: 'json',
							 contentType: "application/json",
							 beforeSend: function(req) {
           req.setRequestHeader('Authorization', "Bearer @Session.AuthToken~");
       },           
        processResults: function (data) {   
                //console.log("results: "+data.results.length);
                var res = [];
                if(data && data.results){
                    for(var i  = 0 ; i < data.results.length; i++) {
                        res.push({id: data.results[i].objectId, text: data.results[i].title});
                    }
                }
                return {
                    results: res
                }
            },
			complete: function(){
            }
                        });
                    }
                }
});
$("#islTasks").kendoMultiSelect({
        placeholder: "Select Tasks...",
        filter: "contains",
        autoBind: false,
    dataValueField: "objectId",
    dataTextField : "title",
    dataSource : new1
});

Now I am not able to select the value that which user types in multi-select. So Can anybody help me with this how can I get the multi-select value using jquery and pass it to the variable payload inside "q"

The basic functionality I want is that when a user searches any term a request sends to the server. This is the payload data that i have to passv i.e,

{
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
}

Here q in the last include the value that which user search. Can anybody help me with this

MultiSelect

answered on 18 Jul 2022

0 answers

96 views

select and Deselect all Records of group when jQuery Kendo Grid Group is Used

Hello,

I am using jQuery Kendo Grid Group and I want to achieve selection and Deselection of all child Records of group when particular group is selected .

General Discussions

asked on 16 Jul 2022

0 answers

89 views

kendo.all.min.js:9 multiselect cannot read property 'style' of undefined at init._adjustListwidth

kendo.all.min.js:9 multi-select cannot read property 'style' of undefined at init._adjustListwidth

MultiSelect

asked on 16 Jul 2022

2 answers

1.2K+ views

Kendo MultiSelect won't stay open on first selection only

Using Kendo UI for ASP.MVC with jQuery, version 2022.1.301. Here are the steps:

Click in multi select
Drop down appears
Select any item
Drop down closes - This is the issue
Click in the multi select again
Drop down appears
Toggle any item(s) on or off and it will now stay open and work perfectly fine!
Click outside the multiselect and it closes as expected

The issue is step 4. I have been debugging through kendo.all.js and I can provide a small bit of inside. The issue lies at line 64,761 which is a function called _inputFocusout. When I click in the multiselect in step 1, the input box is focused and the cursor is blinking. When I click in it the second time the cursor doesn't show, rather "1 item(s) selected" is showing. So the focus out event doesn't happen now, and it works.

Oddly this works in the demos but I can't see anything I am doing wrong.

@(Html.Kendo().MultiSelectFor(m => m.SelectedEmployees)
   .AutoBind(true)
   .AutoClose(false)
   .BindTo(employeesSmall)
   .DataTextField("NameFirstLast")
   .DataValueField("Id")
   .Name("employees")
   .TagMode(TagMode.Single)
)

MultiSelect

answered on 15 Jul 2022

1 answer

150 views

Reorderable rows with a draggable column

Hi,

Reordering rows using the draggable column might seem a bit buggy, as you have to move the cursor to the right before dropping to reorder the rows successfully, as can be seen in the following example https://dojo.telerik.com/ipOyacoH . It would be nice if dragging and dropping directly above and below (inside the draggable column) would work without moving the cursor to the right, but I can't seem to make this work. Could somebody please help me with this?

Thanks in advance!

Drag and Drop

Grid