We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Button column on touch

Thread ID:

Created:

Updated:

Platform:

Replies:

119994 Aug 21,2015 04:30 AM Aug 25,2015 12:49 PM ASP.NET MVC 3
loading
Tags: Grid
David
Asked On August 21, 2015 04:30 AM

We have a problem with EJMOBILE:


  @(Html.EJMobile().Grid<FileManagerMobileVM>("gridFileManagerMobile")
                .Datasource(d => d.Adaptor(AdaptorType.JsonAdaptor))

                    .Columns(c =>
                    {
                        c.Field("Name").HeaderText("Nombre").Add();
                        c.Field("Path").Visible(false).Add();
                        c.Field("Button").HeaderText("Enlace").Add();



                    })
                    .ClientSideEvents(c => c.Load("createGridFileManager"))
                    .AllowSelection(false)
                    .AllowScrolling(false)


                )


I set datasource by JS:

function successGridFileManager(data) {

        var dataJson = [];
        if (data != null && data != undefined) {
            $.each(data, function (s, e) {

                var name = e.name;
                var type = e.type;
                var path = "@Model.FilesPath";
                var fullpath = path + name;
                var nuevo = {
                    Name: name,
                    Path: path,
                    Button: '<div class="e-m-btnwrapper e-m-ios7 e-m-light e-m-btn-normal e-m-state-default"><input onclick="descargarAttachment(\'' + fullpath + '\',\'' + name + '\')"  data-ej-text="Descargar" data-role="ejmbutton" id="button" type="button" class="e-m-btn e-js e-m-clearall e-m-btn-tag e-m-font-normal e-m-state-default e-m-user-select" tabindex="" name="button" value="Descargar"></div>'

                }

                dataJson.push(nuevo);

            })



            var jsonFormat = ej.parseJSON(dataJson);
            var obj = $("#gridFileManagerMobile").ejmGrid("instance");
            obj.model.dataSource.dataSource.json = jsonFormat;
            obj.refreshContent();

        }

    }

function descargarAttachment(path, name) {


        var fullpath = "/Operacion/DownloadFile?path=" + path + "&name=" + name;
  
        location.rel='nofollow' href = fullpath;

    }


All work, but when i try on mobile device, column button dont work. I try with allow selection but nothing. 

If i try it in desktop browser is 100% functional...

any idea?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 24, 2015 08:33 AM

Hi David,


Thanks for using Syncfusion products.

Please confirm the following details.

1.       You have mentioned that datasource is set by JS. But in the code, that you have used load event with function name createGridFileManager but used successGridFileManager


2.       Are you rendering the Button in any one of the columns?


3.       Share us your Essential Studio version details.


4.       Provide a sample for us if possible.

Please get back to us with the mentioned details, we will be happy to assist you.

Regards,
Prasanna Kumar N.S.V



David
Replied On August 24, 2015 12:52 PM

Hi David,


Thanks for using Syncfusion products.

Please confirm the following details.

1.       You have mentioned that datasource is set by JS. But in the code, that you have used load event with function name createGridFileManager but used successGridFileManager


2.       Are you rendering the Button in any one of the columns?


3.       Share us your Essential Studio version details.


4.       Provide a sample for us if possible.

Please get back to us with the mentioned details, we will be happy to assist you.

Regards,
Prasanna Kumar N.S.V




1.  

1.       You have mentioned that datasource is set by JS. But in the code, that you have used load event with function name createGridFileManager but used successGridFileManager

 function refreshGridFiles() {
        var data =
       {
           ActionType: "Read",
           Name: "",
           Path: "@Model.FilesPath",
           ExtensionsAllow: "*.*"
       };

        $.post("/Operacion/FileActionDefault", data, successGridFileManager)
    }

    function createGridFileManager(args) {
        refreshGridFiles();
    }

    function successGridFileManager(data) {

        var dataJson = [];
        if (data != null && data != undefined) {
            $.each(data, function (s, e) {

                var name = e.name;
                var type = e.type;
                var path = "@Model.FilesPath";
                var fullpath = path + name;
                var nuevo = {
                    Name: name,
                    Path: path,
                    Button: '<div class="e-m-btnwrapper e-m-ios7 e-m-light e-m-btn-normal e-m-state-default"><input onclick="descargarAttachment(\'' + fullpath + '\',\'' + name + '\')"  data-ej-text="Descargar" data-role="ejmbutton" id="button" type="button" class="e-m-btn e-js e-m-clearall e-m-btn-tag e-m-font-normal e-m-state-default e-m-user-select" tabindex="" name="button" value="Descargar"></div>'

                }

                dataJson.push(nuevo);

            })



            var jsonFormat = ej.parseJSON(dataJson);
            var obj = $("#gridFileManagerMobile").ejmGrid("instance");
            obj.model.dataSource.dataSource.json = jsonFormat;
            obj.refreshContent();

        }

    }


2.
 Are you rendering the Button in any one of the columns?
Only add button...


 Button: '<div class="e-m-btnwrapper e-m-ios7 e-m-light e-m-btn-normal e-m-state-default"><input onclick="descargarAttachment(\'' + fullpath + '\',\'' + name + '\')"  data-ej-text="Descargar" data-role="ejmbutton" id="button" type="button" class="e-m-btn e-js e-m-clearall e-m-btn-tag e-m-font-normal e-m-state-default e-m-user-select" tabindex="" name="button" value="Descargar"></div>'

                }


3.

      Share us your Essential Studio version details.


  <add assembly="Syncfusion.EJ, Version=13.2450.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.MVC, Version=13.2500.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    Provide a sample for us if possible.
 @using (Html.BeginForm("SaveMobile", "Operacion", FormMethod.Post, new { id = "formOperacionMobile" }))
    {

        @Html.HiddenFor(m => m.Id)
        @Html.HiddenFor(m => m.EstadoId)
        @Html.HiddenFor(m => m.Parado)
        <br />

        <div class="content-form-mobile">


            <div>

                @(Html.EJMobile().Grid<FileManagerMobileVM>("gridFileManagerMobile")
                .Datasource(d => d.Adaptor(AdaptorType.JsonAdaptor))

                    .Columns(c =>
                    {
                        c.Field("Name").HeaderText("Nombre").Add();
                        c.Field("Path").Visible(false).Add();
                        c.Field("Button").HeaderText("Enlace").Add();



                    })
                    .ClientSideEvents(c => c.Load("createGridFileManager"))
                    .AllowSelection(false)
                    .AllowScrolling(false)


                )


                <div style="margin-top:10px">
                    @(Html.EJMobile().Button("btnUploadFile")
                    .Text("Subir foto")

                    .RenderMode(RenderMode.Auto)
                    .ClientSideEvents(c => c.TouchEnd("touchEndUploadFile")))

                    <div id="errorUploadFile" style="display:none" class="alert alert-danger" role="alert">

                    </div>

                </div>
            </div>

            <br />


           



        </div>
    }


<script>


function touchEndUploadFile() {

        $("#inputFile").click();
    }

 function uploadFile() {

        var inputfile = document.getElementById('inputFile');
        if (!ej.isNullOrUndefined(inputfile)) {
            if (inputfile.files[0] != null) {
                $('#formUploadFile').submit();

            }
        }

    }
    function refreshGridFiles() {
        var data =
       {
           ActionType: "Read",
           Name: "",
           Path: "@Model.FilesPath",
           ExtensionsAllow: "*.*"
       };

        $.post("/Operacion/FileActionDefault", data, successGridFileManager)
    }

    function createGridFileManager(args) {
        refreshGridFiles();
    }

    function successGridFileManager(data) {

        var dataJson = [];
        if (data != null && data != undefined) {
            $.each(data, function (s, e) {

                var name = e.name;
                var type = e.type;
                var path = "@Model.FilesPath";
                var fullpath = path + name;
                var nuevo = {
                    Name: name,
                    Path: path,
                    Button: '<div class="e-m-btnwrapper e-m-ios7 e-m-light e-m-btn-normal e-m-state-default"><input onclick="descargarAttachment(\'' + fullpath + '\',\'' + name + '\')"  data-ej-text="Descargar" data-role="ejmbutton" id="button" type="button" class="e-m-btn e-js e-m-clearall e-m-btn-tag e-m-font-normal e-m-state-default e-m-user-select" tabindex="" name="button" value="Descargar"></div>'

                }

                dataJson.push(nuevo);

            })



            var jsonFormat = ej.parseJSON(dataJson);
            var obj = $("#gridFileManagerMobile").ejmGrid("instance");
            obj.model.dataSource.dataSource.json = jsonFormat;
            obj.refreshContent();

        }

    }
    function descargarAttachment(path, name) {


        var fullpath = "/Operacion/DownloadFile?path=" + path + "&name=" + name;
        // window.open(fullpath);
        location.rel='nofollow' href = fullpath;

    }

    function confirmAlert(args) {
        App.activePage.find("#dialogAlertMobile").ejmDialog("close");
    }

    function confirmModal(args) {

        if (args.text == "No") {
            $("#Parado").val("false")
        }
        else if (args.text == "Sí") {
            $("#Parado").val("true")
        }

        $("#EstadoId").val("@((int)EnumsHelper.EstadoOperacion.Finalizada)")
        $("#formOperacionMobile").submit();

    }
    function touchEndToolbar(args) {
        if (args.itemname == "save") {
            $("#formOperacionMobile").submit();
        }
        if (args.itemname == "done") {

            var instanceTrabajoRealizado = App.activePage.find("#TrabajoRealizado").ejmTextArea("instance");

            //Trabajo realizado vacio.
            if (instanceTrabajoRealizado.getValue() == "") {
                App.activePage.find("#dialogAlertMobile").ejmDialog("open");
            }
            else {
                App.activePage.find("#dialogConfirmMobile").ejmDialog("open");
            }

        }
        if (args.itemname == "back") {
            location.rel='nofollow' href = "/Dashboard/IndexMobile";
        }

    }

</script>


All grid button work if i load on windows web browser, but when i try on android chrome,no

Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 25, 2015 12:49 PM

Hi David,

Thanks for the update.

We created a sample according to the code you provided and viewed the sample in in Chrome browser in an Android phone. We able to render the button. Therefore we are unable to reproduce the mentioned issue. For your convenience, we attached a screenshot of the mobile view.

Please find the screenshot and the sample :



Sample Link : http://www.syncfusion.com/downloads/support/forum/119994/ze/GridMobile-794639659

Please provide the following details:

1.       Provide the screenshot of an issue that you are facing.

2.       Provide a sample for us if possible, or modify the sample we have sent so that the issue is reproduced.


Please let us know if we have missed anything.

Regards,
Prasanna Kumar N.S.V


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;