2016-08-18 87 views
0

我正在複製與此處顯示的功能非常接近的功能。 https://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/Kendo Grid Inline MultiSelect - 發佈的值

我有一個內聯多選編輯器字段的Kendo網格。我有一個datasource.sync()事件開始改變多選。我遇到的問題是如何將數據安排在post變量中。

我在FireFox中使用FireBug。我可以設置一個函數在sync()事件中查看我的multiselect字段中的值。

console.log(this.value());

這將是一個字符串數組場我稱之爲「RoleCode」。總之,控制檯日誌顯示的值,因爲他們應該,例如

A, OU

然而,當我看到中郵呼籲我的控制器,並在參數,我看到了RoleCode場被複制,這是爲什麼我的控制器不能識別方法簽名。例如,這是我在FireBug中看到的...

ID 123 
Field1 TextFromField1 
RoleCode[1][RoleCode] OU 
RoleCode[] A 

任何想法我應該如何設置它,以便後期參數可用?

UPDATE

現在我只是改變了更新功能來發送多選值作爲逗號分隔字符串。我可以在控制器中處理它們。我不太喜歡這種設置,但是直到我發現如何讓發佈的值正確發送,這就是我要做的。

update: { 
      url: "Home/GridUpdate", 
      type: "POST", 
      dataType: "json", 
      data: function() { 
       //Grid does not post multiselect array correctly, need to convert to a string 
       var rolesString = $("#gridRoleList").data("kendoMultiSelect").value().toString(); 
       return { rolesString: rolesString }; 
      }, 
      complete: function (e) { 
       setTimeout(function() { 
        refreshGrid(); 
       }, 300); 
      }, 
      success: function (result) { 
       // notify the data source that the request succeeded 
       options.success(result); 
      }, 
      error: function (result) { 
       // notify the data source that the request failed 
       options.error(result); 
      } 
     }, 

更新2

其實這不是一個好主意,因爲如果我在編輯網格中的另一個領域,我得到一個js錯誤,因爲多選找不到。

回答

0

這裏的我如何解決它。在編輯器功能的更改事件中,我使用多選的值更新了模型的值。然後數據像這樣正確地發佈爲一個字符串數組。

ID 123 
Field1 TextFromField1 
RoleCode[] A 
RoleCode[] OU 

我的網格編輯功能

function roleMultiSelectEditor(container, options) { 
    $('<input id = "gridRoleList" name="' + options.field + '"/>') 
     .appendTo(container) 
     .kendoMultiSelect({ 
      dataTextField: "RoleCode", 
      dataValueField: "RoleCode", 
      autoBind: true,  
      change: function (e) { 
       //Applies the value of the multiselect to the model.RoleCode field 
       //Necessary to correctly post values to controller 
       options.model.RoleCode = this.value(); 
       processGridMultiSelectChange(); 
      }, 
      dataSource: { 
       type: "json", 
       transport: { 
        read: { 
         dataType: "json", 
         url: baseUrl + "api/DropDownData/RoleList", 
        }, 
       } 
      }, 
      dataBound: function (e) { 
      } 
     }); 
} 
0

看起來像你的問題可以通過其序列

讀取動作後發送數據來解決 - 使用MVC包裝

.Create(create => create.Action("Create", "Home").Data("serialize")) 

JS代碼

<script type="text/javascript"> 

function serialize(data) { 
    debugger; 
    for (var property in data) { 
     if ($.isArray(data[property])) { 
      serializeArray(property, data[property], data); 
     } 
    } 
} 

function serializeArray(prefix, array, result) { 
    for (var i = 0; i < array.length; i++) { 
     if ($.isPlainObject(array[i])) { 
      for (var property in array[i]) { 
       result[prefix + "[" + i + "]." + property] = array[i][property]; 
      } 
     } 
     else { 
      result[prefix + "[" + i + "]"] = array[i]; 
     } 
    } 
} 


</script> 

Please refer here for complete source code

+0

感謝。我認爲這是我需要的,但我沒有使用MVC包裝。任何想法如何通過datasource.sync()事件上的這些函數或傳輸的更新函數來運行數據? – madvora

+0

您可以使用transport.read。數據函數從JS發送附加參數,請參考Kendo UI文檔。 http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data –