1. Home
  2. Forum
  3. ASP.NET MVC
  4. Button column on touch

Button column on touch

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?

3 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team August 24, 2015 12:33 PM UTC

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



DA David replied to Prasanna Kumar Viswanathan August 24, 2015 04:52 PM UTC

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

PK Prasanna Kumar Viswanathan Syncfusion Team August 25, 2015 04:49 PM UTC

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


Loader.
Up arrow icon