Questions on Kendo UI for jQuery Forum

3 answers

226 views

I am using the panel bar with only a single panel for a portal dashboard so it can be collapsed and expanded.

This is working fine:

@(Html.Kendo().PanelBar()
.Name("widget1")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelBar => {
panelBar.Add().Text("Bob1")
.Expanded(true)
.Content(@<div>Some Content</div>);
})
)

However, when I click on the panel bar title to collapse the color changes. I assume some style is being added or removed but I just can't figure out what it is. I am using the blueopal styling, it changes from a light blue to a dark blue.

PanelBar

answered on 19 Sep 2014

4 answers

417 views

Only allow certain week days?

I've been using jQuery UI for a while, but I like the look and range of Kendo. So, before I dive in, here's the first question.

Is it possible to only allow a certain day of the week to be chosen with the Date Picker?

Thanks,
Mat

DatePicker

answered on 19 Sep 2014

3 answers

1.3K+ views

[Solved] How to reorder multiple columns programitcally

Hi,

We want to reorder columns on the grid based on some event. So lets say Grid has 3 columns A, B, and C. And on a button click, we want the new order to B, C, and A. Now we used the reorderColumn() method and called it 3 times for each column. But since each call expects indices, and columns are ordered on each reorderColumn() call, I am unable to have the desired column order. So I am unable to find a generic solution for this which will reorder columns according to my specifications.

Can you please let me know how I can fix this.

Thanks a lot.

Grid

answered on 19 Sep 2014

5 answers

1.6K+ views

KendoMultiSelect returning [object Object]

I am pretty new to kendo and have been trying to get the multi select working for a little while with no final success.

I have got the dropdown widget working perfectly and I can switch out the drop down for a multiselect and visually it works but when it goes to save the data back to the datasource in the View Model it returns [object Object].

I have set the data-value-primitive = 'true' but am really a bit stuck. Is there something simple that I am missing.

MultiSelect

answered on 19 Sep 2014

3 answers

213 views

Different UICulture and Culture

We have decided to move over to Kendo components.

The localization requirement is basically the same as standard .NET.

Culture for dates,numeric and so on.
UICulture for text.

The reason for it is that our clients must display amounts in currency NOK(nb-NO) since their data is NOK and not selectable, but they can select either nb-NO or other like for example en-GB as text.
In Sweden and other countries it is the local currency there, but the text is also UICulture is selectable.
Is that possible?

Regards
Ole Oscar Johnsen

General Discussions

answered on 19 Sep 2014

2 answers

324 views

Button group / radio buttons for kendo UI web

Hello,

I have been looking high and low for a simple radio button / button group control for Kendo UI Web, but cannot seem to find any such control. I do see it for the mobile version, but I rather not mix in the mobile controls for a Web app.

Is there no radio group / button group control for the web version?

If not:
1) Is there an ETA for such a control?
2) Do you happen to have a workaround for accomplishing something like a radio group / button group (themed like everything else)?

Thanks,
Lars

General Discussions

answered on 19 Sep 2014

1 answer

301 views

Grid with popup editing at the cell level

Hi,

I'm looking to have popup style editing in a grid, but at the cell, not the row level. So instead of having an per row edit button that would launch the popup, I'd like to launch it by clicking on a cell. When not being editing, the value displayed in the cell would come from a formatting function/template/etc I provide. When being editing the popup displayed should also be a template or something like that, which I can control.

I'm not too worried about the data binding part, if it's possible to do this without kendo doing the data binding, as long as there are hooks, I can handle that myself.

Is this possible, if so, how?

thanks,
andy

Grid

answered on 19 Sep 2014

5 answers

300 views

How to connect draggable with sortable.

Hi ,

I need to implement a functionality where an item dragged from treeview should be dropable in to a sortable list .

There can be many sortable lists and the source of draggable item can be list or static elements on the page.

When i checked connectWith option in sortable, it didnt work.

is there any other configuration needed?

pls help me resolve this.

Thanks,

Drag and Drop

answered on 19 Sep 2014

3 answers

594 views

[Solved] Done/success bar persisting for Upload beyond window close/reopen

I'm using Kendo UI (in IE9 on server, local dev in IE11, using async but not drag and drop) to upload PDF specification sheets for products in an order. The PDFs are displayed in a Kendo Grid, with an icon on each row displaying their status. Sometimes a document may go missing or become out of date, so the user can click on the status icon to open up a Kendo window on top of the grid that allows them to upload a file to replace the missing/out of date reference. Therefore, it is likely that they will upload one, close the window, move to another row, and upload another (and so on). Only single file upload is supported for this reason.

On the first window open event, everything works fine. The file is uploaded, stored appropriately, and the "done" bar pops up (underneath the button, which may or may not be a UX problem -- see attached image). However, when the window is closed and then reopened, the success/done bar persists, even if the user hasn't uploaded a second file yet. This remains no matter where you travel in the website, unless your entire session ends and restarts.

Things I've tried:
--destroying the window that the upload DOM is in
--destroying the upload DOMremoving the upload DOM (can't get it to come back though)
--emptying the files from the upload DOM
--removing the CSS class associated with the list of successful file uploads
--destroying every CSS class associated with the uploader onSuccess (for the upload) and onClose (for the window)

I think what would work would be to create a new "instance" of the uploader every time the window opens, but I'm not sure how to do that.

The JS code for the window/uploader is very primitive:

001.var DocAdd = function () {

002.

003. openAddDocumentWindow = function () {

004.

005. var w = $("#addWindow");

006. var f = $("#files");

007.

008. kendo.ui.Upload.fn._supportsDrop = function () { return false; } //prevents Done bar from getting bigger and bigger each time the window opens...why is that? Only happens in IE11

009.

010. f = $("#files").kendoUpload({

011. //options

012. async: {

013. saveUrl: "EditSubmittal.aspx",

014. autoUpload: true

015. },

016. error: addControllerOnUploadError,

017. upload: addControllerOnUpload,

018. multiple: false,

019. showFileList: false,

020. });

021.

022. //constructs window

023. w = $("#addWindow").kendoWindow({

024. title: "Add Document",

025. pinned: true,

026. draggable: false,

027. resizable: false,

028. actions: [

029. "Close"

030. ],

031. modal: true,

032. close: onClose,

033. open: function (e) {

034. var refHeight = $(window).innerHeight();

035. this.setOptions({

036. width: 500,

037. height: 250

038. });

039. },

040. });

041.

042. w.data("kendoWindow").open().center();

043.

044. }; //end function openEditDocumentWindow

045.

046.

//=========================================================================================================================

047. // Function addControllerOnUpload

048. //

049. // This function will contain the main logic for the file upload process.

050.

//=========================================================================================================================

051. function addControllerOnUpload(e) {

052.

053. if (e.files[0].extension !== ".pdf") {

054. e.preventDefault();

055.

056. //also validate size if possible

057. addControllerOnUploadError(e);

058. }

059. else {

060. //get access to the files here.

061. //future dev, get JSON data. Codebehind handles upload logic.

062. }

063. }

064.

//=========================================================================================================================

065. // Function addControllerOnUploadError

066. //

067. // This function will run if the file upload is a failure.

068.

//=========================================================================================================================

069. function addControllerOnUploadError(e) {

070.

071. var msg = "Document upload failed. Make sure that your file is a .pdf document and try again.";

072.

073. kendo.ui.ExtAlertDialog.show({

074. title: SUB_GEN_MSG_TITLE,

075. icon: "k-ext-information",

076. message: msg,

077. width: "600px",

078. height: "100px",

079. attributes: {

080. "align": "center"

081. },

082. });

083. }

084.

085.

//=========================================================================================================================

086. // Function onClose

087. //

088. // This function is a test to get rid of persisting upload data

089.

//=========================================================================================================================

090. function onClose() {

091.

092. //SOME OF THE STUFF I'VE TRIED TO GET RID OF DONE/SUCCESS BAR ON REOPEN

093.

094. //kendo.destroy("#files");

095. //kendo.destroy("#addWindow");

096. //$(".k-upload-files").empty();

097. //$(".k-widget k-upload k-header").kendo.destroy();

098.

099. // Destroy widget and detach events

100. //$("#files").data("kendoUpload").destroy();

101.

102. // Remove widget element from DOM

103. //$("#files").closest(".k-upload").remove();

104. //$(".k-file .k-file-success").find("li").remove();

105. }

106.

107. return {

108. openAddDocumentWindow: openAddDocumentWindow

109. };

110.}();

The markup for creating the window and the uploader is also very basic (sorry about the <br><br> eyesore and inline styling...will be changed):

01.<div id="addWindow" style="display:none;height:100%; ">

02. <div id="addWindowTopPane" style="overflow:hidden;">

03. <div id="addWindowMain" style="overflow:hidden;">

04. <form method="post" action="/kendo-ui/upload/submit">

05. <div style="text-align:center; margin-top: 65px;">

06. <label id="allowedFileTypeMsg">Allowed file types are: .pdf </label>

07. </br></br>

08. <input id="files" name="files" type="file"/>

09. </div>

10. </form>

11.

12. </div>

13. </div>

14.</div>

In review, questions/problems:

1) How do I get a "fresh" instance of the uploader with no success/done rows on each window open event?
2) Why does this success/done row show up behind my "Select Files" button?

Attachments:

FirstTimeOpeningBeforeUpload.png: Shows the upload window when it is first clicked in the session. This is what it should look like every time the window opens.

EveryOtherTimeWindowIsOpenedAfterFirstUpload.png: Self explanatory. Also shows the done row behind the button...why is that?

ExampleDOMExplorerF12.png: Shows the markup dynamically created at runtime for the uploader, in case destroying DOM elements by class is the way to go.

Upload