Questions on Kendo UI for jQuery Forum

3 answers

374 views

[Solved] Programatically select Row based on QueryString parameter

Hey guys, I've found a couple threads here that were helpful, but there must be some difference in my situation as I am unable to get them to work properly. I have a page with a JavaScript kendoGrid using an ODATA service as its dataSource. The dataSource primary key is "id" and on document.ready I want to page to, and select, the matching Row based on the data field "Id" and the QueryString parameter.

The below code all functions correctly as far as the alert(caseId) in the document.ready function. After that nothing happens. Can anyone see what I'm doing wrong?

Also, I have tried replacing caseId in the dataSource.get(caseId) with a hard coded Id but it did not work...

001.<!DOCTYPE html>

002.<html>

003. <head>

004. <title></title>

005. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />

006. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.bootstrap.min.css" />

007.

008. 

009. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

010. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

011.

012. <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>

013. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

014. <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

015. </head>

016. <body>

017. <div class="container">

018. <div class="jumbotron">

019. <h1>Environmental Affairs <small>Document Manager</small></h1>

020. <p>Upload concern related documents and images</p>

021. </div>

022. <script>

023. function getParameterByName(name) {

024. name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

025. var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

026. results = regex.exec(location.search);

027. return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

028. }

029. function isFormValid() {

030. var x = document.getElementById("field1").value;

031. if (x == null || x == "") {

032. alert("Select a case");

033. return false;

034. }

035. }

036. function getSelectedCase() {

037. //Selecting Grid

038. var gview = $("#grid").data("kendoGrid");

039. //Getting selected item

040. var selectedItem = gview.dataItem(gview.select());

041. //accessing selected rows data

042. document.getElementById("field1").value = selectedItem.EnforcementNumber;

043. }

044. </script>

045. 

046. <form action="upload.php" onsubmit="return isFormValid()" method="post" enctype="multipart/form-data">

047. <div class="form-group">

048. <label for="field2">Choose a document or image...</label>

049. <input name="fileToUpload" id="fileToUpload" type="file" class="form-control input-lg"/>

050. <input id="field1" name="field1" type="hidden"/>

051. </div>

052. <label for="grid">Select a case to attach your document to...</label>

053. <div id="grid"></div>

054. <script>

055. // document ready fires when the whole page is ready

056. // and all elements, scripts, styles have been loaded

057. $(function () {

058. // regex for some date parsing

059. // select the div and create the grid element

060. $("#grid").kendoGrid({

061. dataSource: {

062. type: "odata",

063. transport: {

064. read: "http://envaffairs/complaints/ApplicationData.svc/Complaints"

065. },

066. sort: {

067. field: "EnforcementNumber",

068. dir: "desc"

069. },

070. schema: {

071. data: "value",

072. total: "['odata.count']",

073. model: {

074. fields: {

075. Id: {type: "number" },

076. EnforcementNumber: {type: "string" },

077. ParcelNumber: {type: "string" },

078. Street: {type: "string" },

079. DateAndTimeOfComplaint: {type: "datetime" },

080. TypeOfComplaint: {type: "string" }

081. }

082. }

083. },

084. pageSize: 5,

085. serverPaging: false,

086. serverFiltering: true,

087. serverSorting: true

088. },

089. filterable: true,

090. selectable: "row",

091. sortable: true,

092. pageable: true,

093. columns: [

094. {

095. field: "Id",

096. width: 75,

097. filterable: false

098. },

099. {

100. field: "EnforcementNumber",

101. title: "Case"

102. },

103. {

104. field: "ParcelNumber",

105. title: "Parcel"

106. },

107. {

108. field: "Street",

109. title: "Address"

110. },

111. {

112. field: "DateAndTimeOfComplaint",

113. title: "Complaint Date",

114. format: "{0:MM/dd/yyyy}",

115. width: 200

116. },

117. {

118. field: "TypeOfComplaint",

119. title: "Complaint Type"

120. }

121. ]

122.

123. });

124.

125. });

126.

127. $(document).ready(function () {

128. $("#fileToUpload").kendoUpload({

129. multiple: false

130. });

131. var caseId = getParameterByName('id');

132. alert(caseId);

133. var el = $("#grid"),

134. grid = el.data("kendoGrid"),

135. dataSource = grid.dataSource,

136. model = dataSource.get(caseId),

137. index = dataSource.indexOf(model);

138. dataSource.page(index/dataSource.pageSize() + 1);

139. var row = el.find("tbody>tr[data-id=" + model.id + "]");

140. grid.select(row);

141. });

142. </script>

143. <br>

144. <label>Enter a file description and click Submit...</label>

145. <div class="input-group">

146. <input id="field2" name="field2" type="text" class="form-control" placeholder="File Description"/>

147. <span class="input-group-btn">

148. <input type="submit" onclick="return getSelectedCase();" class="btn btn-default" value="Submit"/>

149. </span>

150. </div>

151. </form>

152. </div>

153. </body>

154.</html>

Grid

answered on 03 Feb 2015

1 answer

115 views

Conditional Custom Image

Hello,

In my treeview how do I display a different custom image if hasChildren is true.

Thanks,
Rich

$("#clientsTree").kendoTreeView({
           dataTextField: "nodeName",
           dragAndDrop: true,
           dataSource: {
               transport: {
                   read: {
                       url: "@Url.Action(MVC.UnityClientProfileManager.ClientProfile.GetAllParentClients())",
                   }
               },
               schema: {
                   model: {
                       id: "nodeId",
                       hasChildren: "hasChildren",
                       fields: {
                           //nodeId: { type: "string" },
                           nodeParentId: { type: "string" },
                           nodeName: { type: "string" },
                           clientId: { type: "number", nullable: true },
                           clientGuid: { type: "string", nullable: true },
                       }
                   }
               }
           },

{
   "nodeId": "/52/",
   "nodeParentId": "/",
   "nodeName": "Preferred Materials, Inc",
   "nodeLevel": 1,
   "hasChildren": false,
   "expanded": false,
   "clientId": 52,
   "clientGuid": "1f3c21db-319b-e311-9b61-00155de1f901"
},
{
   "nodeId": "/78/",
   "nodeParentId": "/",
   "nodeName": "Rich Group",
   "nodeLevel": 1,
   "hasChildren": true,
   "expanded": false,
   "clientId": 78,
   "clientGuid": "46fe584c-3165-e411-953e-00155de1f901"
}

TreeView

answered on 03 Feb 2015

2 answers

202 views

Select files dialog box starting point

Hi,

I am implementing a kendo upload widget in a web application. In this application, the user will need to upload an excel file that is in a predetermined directory. Is it possible to set the default starting point on the select files dialog box to be in the root of this directory so that they do not have to click down to it? The user may not even have direct access to the directory itself, they may only be able to reach it through this application.

Also, if this is possible, would it be possible to choose a sub directory starting point based on a variable value the user enters into a text box? The directory is pretty large (over 750,000 folders) and any way to narrow down the search for a file will greatly enhance productivity.

Thanks

Upload

answered on 03 Feb 2015

13 answers

2.1K+ views

selecting a grid row

I have a datasource bound to a grid. Knowing a specific data item, I would like to select that item in the grid programatically. How can this be done?

Thanks

Grid

answered on 03 Feb 2015

1 answer

281 views

Grid Column Locking not working

We're building grids on the fly, but the output is like this:

<div id="OrcaGrid29" data-bind="kendoGrid:
{data: dataSource29,
columns: [
{title: 'Provider Id', field: 'ContextId', hidden: true, headerAttributes: { style: 'white-space: normal' }}
,{title: 'Provider Name', field: 'ContextName', width: 150, locked: true, lockable: false, headerAttributes: { style: 'white-space: normal' }}
,{title: 'Provider Short Name', field: 'ContextShortName', width: 150, headerAttributes: { style: 'white-space: normal' }}
,{title: 'NPI', field: 'm_333_Text', width: 100, headerAttributes: { style: 'white-space: normal' } }
...
],
toolbar: [{name:'save', text: 'Save'}, {name: 'create', text: 'Add Provider'}, {name: 'Help', className: 'FormHelp', text: 'View Help' }], editable: true, pageable: { pageSize: 10 }, navigatable: true, scrollable: true, enabled: enabled }">
</div>

Without trying to lock the column, the grid looks fine (see attached: Grid_Without_Column_Lock.PNG). With "locked: true" and "lockable: false" on a column or columns, we get output like attachments: WithColumnLocking_Initial_Page.PNG and WithColumnLocking_After_Paging.PNG. We really need this feature, so any help would be much appreciated!

Thanks,
Bob

Grid

answered on 03 Feb 2015

4 answers

550 views

will not bind a checkbox column in the grid

Dear Telerik,

We have problems implementing binding to a checkbox in a grid. We believe that we do everything the Kendo way, but it's still not working.

We have made an example were you can see our problem - may be someone in here can see, what we are doing wrong.

What you should do to see the problem: try check one or many items in the select column. Push the button "Show selected items". We have made a alert, that will display the id's that we have selected, but the alert is empty, even that we have bind the column.

Example

http://dojo.telerik.com/AYaTE

Thanks in advance

Peter Beyer
CRM-Byggefakta

Grid

answered on 03 Feb 2015

1 answer

68 views

Issue while adding row reordering in kendoTreeList using Sortable

I am trying to add row reordering functionality in kendoTreeList using kendoSortable.
Whenever i drag and drop row at different position the new arrangement is not as expected.

If I drag TIger below ABC1 then new arrangements should be as below
meow
Mango
ABC1
TIGER
Orange
Yellow

But it appears as

The row after the desired dragged row appears below the actual dragged row after dropping (reordering)

I am using following code.

Sortable

answered on 03 Feb 2015

1 answer

3.6K+ views

Remove Comma in Kendo Numeric Textbox

Hello,

I don't want either comma or decial for the number I entered. I just want the numer as it is entered by the user. How can I do it ?

$("#Number").kendoNumericTextBox({
spinners: false
});

NumericTextBox

answered on 03 Feb 2015

3 answers

1.4K+ views

select first row ?

Hello Everyone,

I can succesfully add a new row by following code :

$("#grid").data("kendoGrid").dataSource.insert(0, {

id: newId,

titel: newTitel,

creatiedatum: new Date()

});

Now I want to select this new added row programmatically.
Because I add it above, selecting the first record would do the trick.

1) How do I select the first record in the grid?
2) How do I select a new inserted row in the datasource ?

1 answer would be sufficient :)

thx,
Gert

Grid

answered on 03 Feb 2015

5 answers

118 views

Dirty Record Display Issue - AngularJS Scope

Hi Guys,

Have just tripped over an issue with the display of a dirty record during popup editing, whereby the cell value is not being compiled against the angular scope.

To illustrate I have created the following dojo snippet

http://dojo.telerik.com/@AlanBell/AvuDA

which takes the 'Grid - AngualrJS' demo and tweaks things to uppercase the City value via a filter.

If you run the snippet and edit a record, when it becomes dirty the underlying grid shows the City value as "{{dataItem.City | uppercase}}" instead of the uppercased data value.

Regards
Alan

Grid

answered on 03 Feb 2015