Grid ToolBarClick event with custom toolbar show partial view

[Damir Margetic]

Hi,

I want to show partial view after click event on custom toolbar item defined on grid.

Here is event handler I try to use but without success.

in razor 

    <div id="partial_edit">

        @Html.Partial("_TypeSettingAdd", New LoyCardSettingsType)

    </div>

java script

        function GridToolClick(sender) {

            $target = $(sender.target);

            var gridObj = $("#TypeSettingGrid").data("ejGrid");

            var rowIndex = gridObj.model.selectedRowIndex;

            if($target.hasClass("izmjeni")){

                var data = gridObj.model.currentViewData[rowIndex];

                var _ID =data.id_loycard_type_setting

                $.ajax

                    ({

                        url: "AdminHome/EditTypeSetting",

                        type: 'GET',

                        data: 1,

                        success: function (data) {                       

                            $("#partial_edit").html(data);                       

                        }

                    });

            };

            if($target.hasClass("dodaj")){

                var data = gridObj.model.currentViewData[0];

                data.id_loycard_type_setting=0;

                data.loycard_setting_desc="";

                data.id_loycard_setting=0;

                $(temp.render(data)).ejDialog({title:"Detalji"});

            };

        }

in console i got error 

jquery-2.1.4.min.js:4 GET http://localhost:49647/HomeAdmin/AdminHome/EditTypeSetting 404 (Not Found)

Any suggestion wil help.

Regards

Damir M.

[Seeni Sakthi Kumar Seeni Raj]

Hi Damir, 

We are unable to reproduce any problem at our end. Refer to the following code example and sample. 

<div id="partial_edit"> 

</div> 

 

@(Html.EJ().Grid<object>("TypeSettingGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

                        .ToolbarSettings(toolbar => 

                        { 

                            toolbar.ShowToolbar(true).CustomToolbarItems(new List<object>() { "izmjeni" }); 

                        }) 

             .. . 

 

            .ClientSideEvents(events => events.ToolbarClick("GridToolClick")) 

        ) 

 

<script type="text/javascript"> 

 

    function GridToolClick(sender) { 

        $target = $(sender.target); 

        var rowIndex = this.model.selectedRowIndex; 

        if ($target.hasClass("izmjeni")) { 

            var data = this.model.currentViewData[rowIndex]; 

            var _ID = data.OrderID 

            $.ajax 

                ({ 

                    url: "/Home/Productpartial", 

                    type: 'GET', 

                    data: {data: _ID}, 

                    success: function (data) { 

                        $("#partial_edit").html(data); 

                    } 

                }); 

        }; 

    } 

</script> 

 

        [HttpGet] 

        public ActionResult Productpartial(int Data) 

        { 

            var data = OrderRepository.GetAllRecords().Where(ord => ord.OrderID == Data).FirstOrDefault(); 

            ViewBag.data= data; 

            return PartialView("_partial", data); 

        } 

Sample: http://www.syncfusion.com/downloads/support/forum/126454/ze/F1264541912742675.zip 

The reported issue may also occur due to the routing problem or wrong url path for the Ajax Request. So we suggest to ensure the Url Path and arguments mentioned in the server-end as well the data sent from the client-end were same datatype. Please refer to the following forums. 

http://stackoverflow.com/questions/30261034/when-sending-jquery-post-to-mvc-controller-getting-404-error 

Regards, 

Seeni Sakthi Kumar S. 

[Damir Margetic]

Hi Seeni Sakthi Kumar S.,

thank you for answer, was very helpfull as sample to.

[Seeni Sakthi Kumar Seeni Raj]

Hi Damir, 

We are happy to hear that your problem has been resolved. Please get back to us, if you need further assistance on this. 

Regards, 

Seeni Sakthi Kumar S.