CODEWITHSUNDEEP
kendo-uikendo-grid
Japa
Japa

Reputation: 632

Kendo ui grid duplicate records with custom upload button in toolbar

I know this question has been posted a few times, and i haven´t done anything else unless searching for an answer to the behavior i´m having on my grid...the problem is, the create method being called multiples times AFTER inserting the first one...so the first inserts well, the second repeats two times and so on:

I have a inline grid with two buttons on my grid, the first one just inserts "normally", the second button calls this(below) in a kendoWindow:

<div id="fileUploadWindow">
<form id="fileUploadForm" enctype="multipart/form-data" action="ficheiro.php" method="post">
  <input style="font-family: roboto;" type="file" id="file" name="file">
  <p id="fileUploadFormResult" style="font-family:Roboto;font-size:13px;float:left;margin-top: 15px;"></p>
  <button style="display: block;margin-left: 230px;margin-top: 10px;border: solid;border-width: 1px;padding-left: 10px;background: transparent;border-color: #FF9300;font-size: 13px;font-family: roboto;padding-right: 10px;" id="idBtnEnviarFicheiro" name="nameBtnEnviarFicheiro" type="submit">Enviar</button>
</form>
</div>

It´s just a simple form with a input type file, and for this to be called, i have this method:

$(".k-grid-popup", ent.element).on("click", function () 
  { 
    $("#fileUploadWindow").kendoWindow({
     actions: ["Close"],
     draggable: true,
     width: "300px",
     height: "65px",
     modal: true,
     resizable: false,
     title: "Inserir Ficheiro",
     visible: false,
     close:function()
     {

     }
    }).data("kendoWindow").center().open();

    $('#fileUploadForm').on('submit',(function() 
    {
      var formData = new FormData($(this)[0]);
      ficheiroVal = $("#file").val().split('\\').pop();

      $.ajax({
        url: 'ficheiro.php',
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data)
        {

          if(data === "")
          {
            $("#fileUploadFormResult").text("Erro!, por favor tente de novo.");
            hypeDocument.getElementById("fileUploadForm").reset();

          }
          else
          {

            $("#fileUploadFormResult").text("Envio com Sucesso!.");

            ficheiroValReal = data;
                    $('#gridBaseDados').data('kendoGrid').dataSource.add({idPai:'',tipo:ficheiroValReal, nome:ficheiroVal, dataCriacao: ''});
$('#gridBaseDados').data('kendoGrid').dataSource.sync();

          }
        },
        error: function(data) 
        {
          $("#fileUploadFormResult").text("Erro!, por favor tente de novo.");
        }         
      });

      return false;
    }));

My grid model is this:

          batch: true,
          serverPaging: true,
          serverSorting: true,
          pageSize: 8,
          schema: 
          {
            data: "data",

            model: 
            {
                id: "idDocumento",
                fields: 
                {
                  idDocumento: { editable: false, nullable: true, type: "number"},
                  idPai: { validation: { required: false } },
                  tipo: { validation: { required: false } },
                  nome: { validation: { required: true } },
                  dataCriacao: {type:"string",editable: false},
                  dataModificacao: {type:"string",editable: false},
                }
            }
          }

I don´t know if ist´s relevant or not, but here is my php code:

<?php

 if(isset($_POST["nameBtnEnviarFicheiro"])) 
{
    if( ($_POST["nameBtnEnviarFicheiro"]) && (empty($_POST['file'])))
    {
        echo ""; 
    }
    else
    {

     $temp = explode(".", $_FILES["file"]["name"]);
     $newfilename = round(microtime(true)) . '.' . end($temp);
     move_uploaded_file($_FILES["file"]["tmp_name"], "tabeladocumento/" . $newfilename); 
     echo $newfilename;
    }   
}
?>

So, the user clicks on the popup button, and a kendowindow appears with a input file, the users chooses a file and the FIRST time, the grid inserts the record corectly(appearing only one time)...then he closes the kendoWindow, and if he wants to insert a new file, it does...but the record appears TWO times...the create method is called two times and also my ficheiro.php is also called two times.

I´ve also used this(below) in multiple places, like in the create method..also after calling the sync() but nothing seems to work. What it could be?!

$('#gridBaseDados').data("kendoGrid").dataSource.read();

Upvotes: 0

Views: 544

Answers (1)

우두머리
우두머리

Reputation: 555

When you close you window you must destroy all widgets inside, to avoid duplicated instances.

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

Hope this help

Upvotes: 1

Related Questions