Questions on Kendo UI for jQuery Forum

1 answer

491 views

Kendo Treelist Drag and Drop across Parent nodes

HI,

We have requirement to implement drag and drop in Kendo Tree List.

We would like to check , if Drag and Drop feature is available in Kendo Tree list ? As per our requirement we need to drag and drop each nodes across parent nodes. The requirement is not drag and drop the nodes between parent notes. The parent node itself should be provided with an option to drag and drop across.

Considering an example if there are three parent nodes and with child nodes as below.

Parent1
Child1
Child2
Parent2
2.1 child1
Parent3

I need to have an option in tree list to change the order of the nodes as below. I should be allowed to change the ordering of the parent node. Please advise if this can be achievable in Kendo tree list ?

Parent3
Parent2
2.1 child1
Parent1
1.1Child1
Child2

If this can be achievable how this can be done ? Kindly share some sample code snippet for implementing the drag and drop feature across nodes in kendo tree list ?

Thanks

TreeList

answered on 29 Oct 2015

1 answer

329 views

[Solved] Modifying a Data Item Does Not Update Multi-Filter Options

I have a grid with one column using the new filterable.multi = true. Given a certain set of data in the grids data source, I can open the filter and see the multi checkboxes for all values in that column. If I programmatically change the value in that column of one of the rows using dataSource.at(), the filter menu's options do not update. For example, if I have a grid with a Name column with three rows: Brad, Mark, John. I open the filter menu and see options for Brad, Mark and John. If I then change Mark to David, and open the filter menu I will still see options for Brad, Mark, and John. However, if I add a new row using dataSource.add() function, it does update the filter options.

Is there a way to force the filter options to update after an edit?

This DOJO recreates the issue. First, open the filter menu on Name column, see correct options for original data. Press update button, and open filter again. See no change to options. Then press Add button. Open filter menu again, observe options have been updated.

http://dojo.telerik.com/@david.ballenger/uZeGI

Grid

answered on 29 Oct 2015

1 answer

534 views

SunBurst Chart in Kendo UI

Hi,

i have a requirement to display data in Sunburst chart like in attached screen shot. How do i do this in Kendo UI. if we can, Please send me an example of this.

Thanks

Charts

answered on 29 Oct 2015

2 answers

1.4K+ views

Moving multiple records up/down in Grid while maintaining selections

I need the ability for users to reorder the selected records within a grid using external buttons (and keep them selected after they're moved in case they want to move them again). I have the logic working to move a single row and keep it selected, but am stuck on how to move and keep multiple records selected. Whenever I have multiple items selected, only the first (e.g., top-most) is moved. The remaining ones stay where they are. (The logic that I followed to keep the items selected works as it should; I'm pretty sure it's the logic I implemented to actually move the items that's the culprit.)

HTML:

01.<div id="panels">

02. <div id="visibleGrid"></div>

03. <div id="commands">

04. <div><a href="#" id="moveItemToTop" class="k-button" style="width:150px;">Move To Top</a></div>

05. <div><a href="#" id="moveItemUp" class="k-button"style="width:150px;">Move Up</a></div>

06. <div><a href="#" id="moveItemDown" class="k-button"style="width:150px;">Move Down</a></div>

07. <div><a href="#" id="moveItemToBottom" class="k-button"style="width:150px;">Move to Bottom</a></div>

08. </div>

09.</div>

JavaScript (on documentLoad):

001.var uids = [];

002.var selectedOrders = [];

003.var idField = "Id";

004.

005.var ds1 = {

006. data: createRandomData(10),

007. pageSize: 10,

008. schema: {

009. model: {

010. id: "Id",

011. fields: {

012. Id: { type: 'number', editable: true },

013. FirstName: { type: 'string', editable: true },

014. LastName: { type: 'string', editable: true }

015. }

016. }

017. }

018.};

019.

020.var visibleGrid = $("#visibleGrid").kendoGrid({

021. dataSource: ds1,

022. editable: "popup",

023. selectable: "multiple",

024. scrollable: true,

025. change: function (e, args) {

026. var grid = e.sender;

027. var items = grid.items();

028.

029. items.each(function (idx, row) {

030. var idValue = grid.dataItem(row).get(idField);

031. if (row.className.indexOf("k-state-selected") >= 0) {

032. selectedOrders[idValue] = true;

033. } else if (selectedOrders[idValue]) {

034. delete selectedOrders[idValue];

035. }

036. });

037. },

038. dataBound: function (e) {

039. var grid = e.sender;

040. var items = grid.items();

041. var itemsToSelect = [];

042. items.each(function (idx, row) {

043. var dataItem = grid.dataItem(row);

044. if (selectedOrders[dataItem[idField]]) {

045. itemsToSelect.push(row);

046. }

047. });

048.

049. e.sender.select(itemsToSelect);

050. },

051. columns: [

052. { field: "Id", width: 30, title: "Id" } ,

053. { field: "FirstName", width: 90, title: "First Name" },

054. { field: "LastName", width: 90, title: "Last Name" }

055. ]

056.}).data("kendoGrid");

057.

058./* move up */

059.$("#moveItemUp").on("click", function (idx, elem) {

060.

061. var selected = visibleGrid.select();

062. if (selected.length > 0) {

063.

064. $.each(selected, function (idx, elem) {

065. var dataItem = visibleGrid.dataItem($(this));

066. var index = visibleGrid.dataSource.indexOf(dataItem);

067.

068. if (index > 0) {

069. var newIndex = index - 1;

070. visibleGrid.dataSource.remove(dataItem);

071. visibleGrid.dataSource.insert(newIndex, dataItem);

072. }

073. });

074. }

075.

076. movingItems = false;

077.});

078.

079./* move to top */

080.$("#moveItemToTop").on("click", function (idx, elem) {

081.

082. var selected = visibleGrid.select();

083. var firstIndex = -1;

084.

085. if (selected.length > 0) {

086. $.each(selected, function (idx, elem) {

087.

088. if (firstIndex < 0)

089. {

090. firstIndex = 0;

091. }

092. else

093. {

094. firstIndex++;

095. }

096.

097. var dataItem = visibleGrid.dataItem($(this));

098. var index = visibleGrid.dataSource.indexOf(dataItem);

099. var newIndex = firstIndex;

100.

101. if (newIndex != index) {

102. visibleGrid.dataSource.remove(dataItem);

103. visibleGrid.dataSource.insert(newIndex, dataItem);

104. }

105. });

106. }

107.

108. return false;

109.});

110.

111./* move down */

112.$("#moveItemDown").on("click", function (idx, elem) {

113. var selected = visibleGrid.select();

114. if (selected.length > 0) {

115.

116. $.each(selected, function (idx, elem) {

117. var dataItem = visibleGrid.dataItem($(this));

118. var index = visibleGrid.dataSource.indexOf(dataItem);

119. var maxIndex = visibleGrid.dataSource._data.length - 1;

120.

121. if (index < maxIndex) {

122. var newIndex = index + 1;

123.

124. visibleGrid.dataSource.remove(dataItem);

125. visibleGrid.dataSource.insert(newIndex, dataItem);

126. }

127. });

128. }

129.

130. return false;

131.});

132.

133./* move to bottom */

134.$("#moveItemToBottom").on("click", function (idx, elem) {

135. var selected = visibleGrid.select();

136. var lastIndex = -1;

137.

138. if (selected.length > 0) {

139.

140. if (lastIndex < 0) {

141. lastIndex = visibleGrid.dataSource._data.length - 1;

142. }

143. else {

144. lastIndex--;

145. }

146.

147. $.each(selected, function (idx, elem) {

148. var dataItem = visibleGrid.dataItem($(this));

149. var index = visibleGrid.dataSource.indexOf(dataItem);

150. var newIndex = lastIndex;

151.

152. if (newIndex != index) {

153. visibleGrid.dataSource.remove(dataItem);

154. visibleGrid.dataSource.insert(newIndex, dataItem);

155. }

156. });

157. }

158.

159. return false;

160.});

CSS:

01.* {

02. font-family: "Verdana", sans-serif;

03. font-size: 10pt;

04.}

05.

06.#panels {

07. display: table-row;

08.}

09.

10.#visibleGrid {

11. width: 400px;

12. display: table-cell;

13.}

14.

15.#commands div {

16. padding-left: 15px;

17. padding-bottom: 3px;

18.}

You can also see the project in action here.

Any thoughts on what I should do? I've checked out the documentation, as well as searches, but have come up empty thus far.

Grid

answered on 29 Oct 2015

1 answer

207 views

Removing Extra connection points

Hi ,

I have created a rectangular diagram shape and trying to connect to another rectangular shape. I just want two connection points. But when I select the shape it shows 4 different connection points on four sides. How can I limit the connection points to only 2 instead of 4.

Here is the image I have attached. I want to get rid of connections those are marked in circles.

Thanks

Diagram

answered on 29 Oct 2015

9 answers

352 views

Performance issues with TreeList in AngularJS

Hi,

I have a simple angular module with the treelist and it seems really slow. There are 4 second pauses every time the treelist tries to render. The same done without angular, in kendo dojo works as expected: http://dojo.telerik.com/iVixe

The template, which angular is using, is simply the following:
<div id="treelist"></div>

The zipped module javascript file is attached to this message.

Used components:

AngularJS v1.3.6
Kendo UI v2015.1.318

TreeList

answered on 29 Oct 2015

1 answer

204 views

Grid Missing Icons

I have a kendo UI grid that has missing Icons. Attached is graphic of what it looks like.

My application is a MVC 5 app with bootstrap.

My bundles are loaded in order below.

bundles.Add(new StyleBundle("~/Content/css").Include(

"~/Content/bootstrap.css",

"~/Content/jquery.jqGrid/ui.jqgrid.css",

"~/Content/jquery-ui.min.css",

"~/Content/themes/base/jquery.ui.dialog.css"));

bundles.Add(new StyleBundle("~/Content/themes/smoothness/css").Include(

"~/Content/themes/smoothness/*.css"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/CustomCSS").Include(

"~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/KendoUI").Include(

"~/Content/KendoUI/kendo.common.min.css",

"~/Content/KendoUI/kendo.default.min.css",

"~/Content/KendoUI/kendo.dataviz.default.min.css"));

Any assistance would be great.

Grid

answered on 29 Oct 2015

1 answer

171 views

Load large dataset

Hi,

There are about 100000000 records in the database , i want to bring 100 records at a time and fetch next 100 with pagination each time. As i am fetching large no of data set at one go, it take lot of time to get response back from server.

Grid

answered on 29 Oct 2015

1 answer

2.3K+ views

Load large Number data set From Server side

Hi,

There are about 100000000 records in the database , i want to bring 100 records at a time and fetch next 100 with pagination each time. As i am fetching large no of data set at on g, it take lot of time to get response back from server.

Grid

answered on 29 Oct 2015

1 answer

140 views

Help with conditional templating based on json data

Hi,

I want my grid to be populated from a json,the sample data is shown below

[
    {
        "id": 1,
        "name": "name1",
        "data": {
            "control": "textbox",
            "value": 700
        }
    },
    {
        "id": 2,
        "name": "name2",
        "data": {
            "control": "checkbox",
            "value": true
        }
    }
]

so in my grid under the "data" column the view should contain a textbox for row1 and a checkbox in row2 with the respective values and also possible to update the values.

Is it possible to achieve this using kendo ui grid?Is there any examples available.for this.

Grid

answered on 29 Oct 2015