I am trying to fire an action every time a mobile tabstrip item is selected and not just the first click. This is very common for refreshing the current view or scrolling back to the top on apps like Twitter that are an endless scrolling list. 

data-select="onSelect" only fires when the item is inactive (first time) and data-click="onClick" which I saw here in the forums does nothing nor is it in the api docs (deprecated maybe?). 

I tried simply using jQuery to get (#tabstrip a).click() and then reset the scroller of the current view but this would only fire on subsequent clicks (not the initial) and it wasn't working right on my phone, only in the simulator. 

Please advise on the best way to do this?

Scenario:

I have a kendo ui panel bar in a view within an area(say MyArea) which has kendoComboBox (partial view) from a different area(say Services)

@(Html.Kendo().PanelBar()
        .Name("PanelBar")
        .Items(search =>
            {
                search.Add()
                    .Text("Search YLAU EdiLog")
                    .Expanded(true)
                    .Content(@<text>
                                <form method="post" id="myForm">
                                          <div class="TableCell">@Html.Partial("~/Services/Views/Customer/WMSCustomerList.cshtml")  </div>

     
WMSCustomerList.cshtml(partial view):

<script type="text/javascript">

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url:"Services/Customer/WMSCustomerList",
                dataType: "json"                  
            }
        }
    });
    $("#Company").kendoComboBox({
        dataSource: dataSource,
        dataTextField: "AccountName",
        dataValueField:"AccountCode"
    })

Issues:

- The url specified for the kendo combo box does not gets called i.e, the controller from a different area(Services) does not get called. 

Q: How do you call a datasource from different areas in a partial view ?


- I changes the datasource url by adding a slash in the start of the url (url:"/Services/Customer/WMSCustomerList",) which then works correctly. 

Q: What is the significance of adding a slash in front of the url? Why doesn't the url area switching work without a slash? Please clarify

Thanks!



    

How would you change the barcode encoding at runtime if the barcode widget is used in a template?
To clarify, user selects barcode type from a dropdown list, according to selection the barcode changes.
The barcode widget is used in a listview as a template.
For example, in the listView -
@(Html.Kendo().ListView()
    .Name("listView')
    .ClientTemplateId("aTemplate")
    :
    :
)

<script type="text/x-kendo-tmpl" id="aTemplate">
        <div class="product">
            <h3>#:ProductTitle#</h3>           
            @(Html.Kendo().Barcode()
                .Name("Id_#=Id#")
                .Value("#=Barcode#")
                .Encoding(BarcodeSymbology.Code128)       <-- how whould you change this at runtime?
                .Height(50)
                .Width(180)               
                .ToClientTemplate()
            )       
         </div>
 </script>

Regards,
Menashay

Hey!

I'm creating a view, based on a ViewModel. This View Model has two Complex Properties, of which one is collection


Second Property (viz. secList) is collection which displays two columns in grid(Description, Action, Rest are hidden). Action is a list of CheckBoxes.

Action Method to fill the View is:


Razor Code which Renders Kendo Grid is:

  @(Html.Kendo().Grid(Model.secList)
    .Name("secList")
    .Columns(columns =>
    {
        columns.Bound(p => p.SecurityListId).Hidden();
        columns.Bound(p => p.HubId).Hidden();
        columns.Bound(p => p.FormId).Hidden();
        columns.Bound(p => p.DataActionId).Hidden();
        columns.Bound(p => p.Description).Width(450).Filterable(true);
        columns.Bound(p => p.Action).Width(50).Sortable(false).Filterable(false);
       .HeaderTemplate("<div align=center><p>Select All </p><input id='selectall' type='checkbox'  checked= 'checked' /></div>")
        .ClientTemplate("<div align=center><input type='checkbox'  checked='checked' /></div>"); 
    })
         .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
           .Model(model =>
            {
                model.Id(p => p.SecurityTemplateId);
                model.Field(p => p.Description).Editable(false);
                model.Field(p => p.Action).Editable(true);

            }))
     .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:530px;" })
    );

All i need from grid to show Description and List of Checkboxes. Logic of Insertion is on Action (Post) in Controller. 
My Issue is I'm able to display gird, but when I try to access this collection on Create (Post), the model Property (secList) is null. Can you please advise from where I'm getting it wrong?

I am using snippets with my kendo editor and need to replace the standard "Insert HTML" drop down label with "Insert Merge Field".

I have tried simply replacing the text, but it gets replaced as soon as i insert the first field.

TIA

Hello,
I have a combobox that looksup on a table with a lot of data and I wish to call an action of a controller to retrieve data while typing.... how can achieve this with Kendo UI MVC with Razor's helpers?

Thanks

Is there a simple way to remove or hide the down arrow on a top level menu?

Hi Team,

I want to make date picker textbox readonly so that user can only select the date from picker,but can not edit,so I do not need to do the client side validation any more.

and the next thing is I want to display the date in .Format("dd MMM yyyy") format,but while passing this valuse to server,I want it to be in default dd-MM-yyyy format

Can you please help me out in doing this.

Thanks & Regards,

Preeti

Hi to all,

Great day

Can you help me on how to add properly the confirm dialog before click the upload button on select event in kendo upload.
Below is the code where the confirm dialog is appearing but still the upload is still in-progress which is not right.
It should wait for the user to confirm the upload yes or no before progress event is activated.

Here's my code below:

$(document).ready(function () {

        var lookup = $("#ComboLookupTable").data("kendoComboBox");
        $("#files").kendoUpload({
            async: {
                saveUrl: "Lookup/UploadFile",
                autoUpload: false,
                value: 'Import'
            },
            localization: {
                select: "Select a file",
                uploadSelectedFiles: "Import",
                headerStatusUploaded: "File validation",
                headerStatusUploading: "File uploading...",
                statusFailed: "Uploading file failed",
                statusUploaded: "File validating...",
                statusUploading: "Uploading..."
            },
            multiple: false,
            select: function (e) {
                confirmUpload(e);
                              
            },
            progress: function (e) {
                debugger;
                onProgress(e);
            },
            upload: function (e) {
               // debugger;
                lookup.enable(false);
                this.element.prop("disabled", true);
                this.element.closest(".k-button").addClass("k-state-disabled");
                 e.data = { selectedTable: $("#ComboLookupTable").val() };
            },
           
            success: function (e) {
                //debugger;
                resetUpload();
                if (e.XMLHttpRequest.responseText != '' && e.response != 'gridESREF' && e.response != 'gridFuelEfficiency' && e.response != 'gridConversionFactor' &&
                    e.response != 'gridGlobalEmissionFactor' && e.response != 'gridElectricalRegionalEmissionnFactor' && e.response != 'gridGWP') {
                    showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                    e.preventDefault();
                    dialog.close();
                }
                else {
                    var delay = 1500;
                    setTimeout(function () {
                        //grid names;
                        //gridRefresh(e.response);
                        dialog.close();
                    }, delay);
                }
            },
            complete: function (e) {
                resetUpload();
                this.element.prop("disabled", false);
                this.element.closest(".k-button").removeClass("k-state-disabled");
                lookup.enable(true);
            },
            error: function (e) {
                resetUpload();
                if (e.XMLHttpRequest.responseText != '') {
                    showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                    e.preventDefault();
                    dialog.close();
                }
            }

        });
    });

 
//Here's the function of my confirm dialog called by select event.


    function confirmUpload(e) {
        window.setTimeout(function () {
            $(".k-upload-selected").click(function (e) {
                // custom logic
                var kendoWindow = $("<div />").kendoWindow({
                    title: "Replace Lookup Table Data?",
                    height: 130,
                    width: 280,
                    resizable: false,
                    modal: true,
                    animation: {
                        open: {
                            effects: "fade:in",
                            duration: 500
                        },
                        close: {
                            effects: "slide:right fadeOut",
                            duration: 500
                        }
                    },
                    visible: false
                });

                kendoWindow.data("kendoWindow")
                    .content($("#upload-confirmation").html())
                    .center().open();

                kendoWindow
                    .find(".upload-confirm,.upload-cancel")
                        .click(function () {
                            if ($(this).hasClass("upload-cancel")) {
                                // If no
                                kendoWindow.data("kendoWindow").close();
                                e.preventDefault();
                                dialog.close();
                                return false;
                            }
                            else {
                                // If yes
                                kendoWindow.data("kendoWindow").close();
                            }
                        })
                                
            });
        }, 1);
       
    }


Thank you and God bless.

Hi guys...
I have a complex situation here.

I have a treeview loaded with remote data on server 
(exactly the same of your example) and so I have an mvc anction with a nullable id that returns the child of the selected node.
Now in the normal scenario the tree starts with all node collapsed.
The problem is that I need to provide a way to load the page, and the tree as well, with a particular node loaded.

Here my tree:

I don't provide the action cause it is a bit complex and misleading since I get the data from 3 different tables...
anyway...It works perfectly...

now, I tried to pass the parameter to the actual treeview view (mcv) (success) and then pass it the to client (js)

I guess I need to open the node client-side...and sometimes the selected node could be up to the 9 level deep...
the problem is: if I pass the id (of the node) as an argument of the DataBound event, this event fires when the treeview is not rendered yet.
(while if I attach the event handler as you see on the code I provided, it fires when the rendering is compleated) that's weird...
so..How can I achieve what I need? there's no other event that fires "on Compleate", right?
Can I pass my parameter and have the event fire In the right moment?


I hope I made myself clear.
thanks
Fabio