k

[Rakhesh Rao]

Hi,

Can you send me some samples on knockout Syncfusion grid ,I mean filters and binding with models like that.

[Madhu Sudhanan P]

Hi Rakhesh,

 

Thanks for using Syncfusion products.

 

Based on your request, we have created a simple ejGrid sample using Knockout and the same can be downloaded from the below location.

 

Sample Location:  kosample.zip

 

In the above the filtering feature is enabled and the grid control properties will be provided as the value of the “data-bind” and the binding handler name should be “ejGrid” to create the grid control as follow.

 

 

<div id="Grid" data-bind="ejGrid: {dataSource: dataSource,

allowGrouping:true,allowSorting:true,allowFiltering:true,allowPaging:true,selectedRow:selectedRow ,pageSettings:{currentPage:currentPage,pageSize:4} }"></div>

 

@Note: The words highlighted in green are the properties in grid that can be observed by KO.

 

 

The observable model properties of ejGrid are dataSource, selectedRow  and currentPage property of pageSettings . The grid model properties will be registered with observable as follow.

 

 

window.employeeView = {

                dataSource: ko.observableArray(obj),

                selectedRow: ko.observable(1),

                currentPage: ko.observable(2),

            };

ko.applyBindings(employeeView);

 

 

Please refer our online demo for knockout sample in grid.

 

http://js.syncfusion.com/demos/web/#!/azure/grid/ObservableBinding/KnockoutSupport

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi,

thank you for reply,

MyRequirement:

add a edit button in each grid row ,when click on the that  it has to open one custom view form by passing some rowid of that row , i tried with your document like below  but i am not achieved my expected result 

dataSource: ko.observableArray(e.result),

            col: [

              headerText: "Action", width: 50, isUnBound: true, commands: [{ type: ej.Grid.unboundType.Edit, buttonOptions: { text: "Edit" } }] }

            ],

            edit: { allowAdding: true, editMode: ej.Grid.editMode.Normal },

i attached the cell edit  event but its not firing that event.

can you send me sample for the above thing.

thanks in advance

[Madhu Sudhanan P]

Hi Rakhesh,

 

Thanks for using Syncfusion products.

 

Based on your requirement we have created a simple command column sample in grid using Knockout and the same can be downloaded from the below location.

 

Sample Location: unboundKO.zip

 

In the above sample, we have created ejGrid with unbound columns using Knockout as follows.

 

 

<div id="grid" data-bind="ejGrid: {dataSource: dataSource,rowHover:false,columns:columns,allowPaging:true,pageSettings:{currentPage:currentPage,pageSize:4},

edit:{allowEditing:true,allowDeleting:true,editMode:ej.Grid.editMode.DialogTemplate,dialogEditorTemplateId:'#template'} }"></div>

var col = [

             . . . .

                {

                  headerText: "Manager Records",

                  commands: [

                    { type: ej.Grid.unboundType.Edit, buttonOptions: { text: "Edit" } },

                    { type: ej.Grid.unboundType.Delete, buttonOptions: { text: "Delete" } },

                    { type: ej.Grid.unboundType.Save, buttonOptions: { text: "Save" } },

                    { type: ej.Grid.unboundType.Cancel, buttonOptions: { text: "Cancel" } }

                  ],

                    isUnBound: true

                }

]

 

window.employeeView = {

                dataSource: ko.observableArray(obj),

                selectedRow: ko.observable(1),

                currentPage: ko.observable(2),

                columns: col,               

            };

                      

            ko.applyBindings(employeeView);

 

 

We can achieve the custom form editing in grid by using template editing, currently ejGrid supports DailogTemplate, ExternalFormTemplate and InlineFormTemplate. In the above sample, we have  used the DialogTemplate editing. The template will be as follow.

 

 

<script id="template" type="text/x-jsrender">

        <b>Employee Details</b>

        <table cellspacing="10">

            <tr>

                <td style="text-align: right;">

                    Employee ID

                </td>

 

 

                <td style="text-align: left">

                    <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />

                </td>

            </tr>

. . . . . .

 . . . . . . .

      </table>

</script>

 

For various available editing types in ejGrid, please refer the below online demo link.

 

http://js.syncfusion.com/demos/web/#!/azure/grid/Editing

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi,

thank you for reply,

you had showed me the dialog ,instead is it possible to redirect to different page , if its possible send me one example.

Thanks in advance.

[Rakhesh Rao]

Hi,

I got the example from your side like add anchor tag in the grid row , i attached the event but i am unable to access the current row values in that event

http://www.syncfusion.com/downloads/support/directtrac/126905/linksincolumnKO-1202315525.zip

can you tell me how to access the current row values in that event.

one more thing if we add tool bar buttons like add and edit ,can we attach the event to that and access the selected row values .

Can you send me both examples.

[Madhu Sudhanan P]

Hi Rakhesh,

 

Please find the response.

 

We can get the row data in the actionBegin or beginEdit events. Please refer the following table for arguments passed to the args of the callback by the beginEdit and actionBegin events.

 

Name	Description
beginEdit	Trigger when editing the row
$("#Grid").ejGrid({beginEdit: function (args) {   // args.cancel   - Returns the cancel option value. // args.model    - Returns the grid model. // args.type     - Returns the name of the event. //args.currentTr  -Return the edited tr element //args.rowIndex  -Return the index of the grid row. //args.primaryKey  -Return the primary key. //args.primaryKeyValue  -Return the primaryKey value }});
actionBegin	Trigger when every grid action such as sorting, filtering, paging, CRUD operations, etc. has began
In the below we have provided the args value associated with the editing begin alone. The args will take different values in different action.   $("#Grid").ejGrid({ actionBegin: function (args) {   // args.cancel   - Returns the cancel option value. // args.model    - Returns the grid model. // args.type     - Returns the name of the event. //args.currentTr  -Return the edited tr element //args.rowIndex  -Return the index of the grid row. //args.primaryKey  -Return the primary key. //args.primaryKeyValue  -Return the primaryKey value });

 

In the above events, we can get the row data as follows.

 

 

<div id="grid" data-bind="ejGrid: {dataSource:. . . . . . .,actionBegin:'beginAction' }"></div>

 

function beginAction(args) {

            if (args.requestType == "beginedit") {

                var rowdata = args.model.currentViewData[args.rowIndex];

            }

        }

 

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi,

that event will fire only when allowediting is true , but i attached event to the hyper link , i need current row values in that event.

is that is possible.

find the details in the attachment.

One more issue if i add tool bar ,my grid header is not visible i mean its over written on the grid header. is it possible to anchor tags in the toolbar and attach event to those.

Can you send me the sample for those.

Thanks in advance 

Attachment: Index_6e744aa1.zip

[Rakhesh Rao]

Hi Madhu,

one more issue ,when I clicks on the next page of the grid,the data is displaying but filters are disappeared , you can find the problem in the code which i had attached.

Can you rectify the problem.

Thanks in advance.

Attachment: Index_73778f30.zip

[Rakhesh Rao]

Hi Madhu,

one more issue ,when I clicks on the next page of the grid,the data is displaying but filters were disappeared , when I clicks on that filter place, its showing the filter menu but symbol were disappeared , find the attachment which has script file and screen shots

 please give provide the solution which i replied since yesterday. 

Thanks in advance.

Attachment: Index_141188eb.zip

[Madhu Sudhanan P]

Hi Rakhesh,

 

Please find the response.

 

Query #1: “when I clicks on the next page of the grid,the data is displaying but filters are disappeared”

 

We are able to reproduce the reported issue and we have confirmed “” as a defect. We have logged defect report and the fix for the issue “” is estimated to be include in our Volume 2, 2014 Service Pack release.

 

Query #2: “is it possible to anchor tags in the toolbar and attach event to those.”

 

We have toolBarClick event in ejGrid which will be triggered when the toolbar item is clicked and we can get the row data in the toolBarclick event as follows.

 

 

<div id="grid" data-bind="ejGrid: {dataSource: dataSource,.. . . . . . toolBar:{allowToolBar:true,toolBarItems:['edit','delete','update','cancel']}, toolBarClick:'clicked' }"></div>

 

function clicked(args) {

            var gridobj = $('#grid').data("ejGrid");

            var index = gridobj.model.selectedRow; // Get selected row index

            var rowdata = gridobj.getCurrentViewData()[index]; //get the row data from current view data

            console.log("Toolbar clicked")

            console.log(rowdata);          

        }

 

 

In the anchor tag click event we can get the row data as follows.

 

 

$('.e-gridcontent').on("click", "a", function (e) {               

                e.preventDefault();

. . .

                $this = $(this);

                $tr = $this.closest('tr');              

                action = $this.data("action");

                gridObj = $("#grid").data("ejGrid");

                index = gridObj.getIndexByRow($tr); //Get row index

                var rowdata = gridObj.getCurrentViewData()[index]; //get the row data from current view data

 

                console.log("Anchor clicked")

                console.log(rowdata);

. . . . . .

});

 

 

Query #3: “if i add tool bar ,my grid header is not visible i mean its over written on the grid header”

 

We afraid that we are unable to reproduce the reported issue and please provide us more information (Replication procedure or Screenshot or Share your Layout page) regarding your issue and the information provided would be more helpful for us to analyze the reported issue and provide you the response as early as possible.

 

For your convenience we have created a simple MVC application with ejGrid using Knockout and the same can be downloaded from the below location.

 

Sample Location: MVCNew.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

 

[Madhu Sudhanan P]

Hi Rakhesh,

 

Sorry for the inconvenience caused. Please ignore the previous response.

 

Query #1: “when I clicks on the next page of the grid,the data is displaying but filters are disappeared”

 

We are able to reproduce the reported issue and we have confirmed “Filtering menu icon has not showned while set through setmodel” as a defect. We have logged a defect report and the fix for the issue “Filtering menu icon has not showned while set through setmodel” is estimated to be include in our Volume 2, 2014 Service Pack release.

 

Query #2: “is it possible to anchor tags in the toolbar and attach event to those.”

 

We have toolBarClick event in ejGrid which will be triggered when the toolbar item is clicked and we can get the row data in the toolBarclick event as follows.

 

 

<div id="grid" data-bind="ejGrid: {dataSource: dataSource,.. . . . . . toolBar:{allowToolBar:true,toolBarItems:['edit','delete','update','cancel']}, toolBarClick:'clicked' }"></div>

 

function clicked(args) {

            var gridobj = $('#grid').data("ejGrid");

            var index = gridobj.model.selectedRow; // Get selected row index

            var rowdata = gridobj.getCurrentViewData()[index]; //get the row data from current view data

            console.log("Toolbar clicked")

            console.log(rowdata);          

        }

 

 

In the anchor tag click event we can get the row data as follows.

 

 

$('.e-gridcontent').on("click", "a", function (e) {               

                e.preventDefault();

. . .

                $this = $(this);

                $tr = $this.closest('tr');              

                action = $this.data("action");

                gridObj = $("#grid").data("ejGrid");

                index = gridObj.getIndexByRow($tr); //Get row index

                var rowdata = gridObj.getCurrentViewData()[index]; //get the row data from current view data

 

                console.log("Anchor clicked")

                console.log(rowdata);

. . . . . .

});

 

 

Query #3: “if i add tool bar ,my grid header is not visible i mean its over written on the grid header”

 

We afraid that we are unable to reproduce the reported issue and please provide us more information (Replication procedure or Screenshot or Share your Layout page) regarding your issue and the information provided would be more helpful for us to analyze the reported issue and provide you the response as early as possible.

 

For your convenience we have created a simple MVC application with ejGrid using Knockout and the same can be downloaded from the below location.

 

Sample Location: MVCNew.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

 

[Rakhesh Rao]

Hi Madhu,

As per your request i attached screen shots for the query#3, please let me know the issue, the surprise thing is i am not able to reproduce in the sample project but it was reproducible in the working project.

Please let me know the issue.

Attachment: SyncfusionEjGrid_228ee961.zip

[Rakhesh Rao]

Hi Madhu,

i got the problem area , the issue is with bootstrap.css ,if i use our existing bootstrap its creating problem ,its working fine if i use

 <link rel='nofollow' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

but i can not use this my menu items are not displayed  properly. is the ej grid depends on above css file.

Give me the solution for this.

[Madhu Sudhanan P]

Hi Rakhesh,

 

We have analyzed the provided information and we are unable to reproduce the issue. Please tell us which bootstrap version you are referring in your application. And also you have mentioned that while using Bootstrap version 3.1.1, you are getting the menu alignment issue. Could you please confirm us whether you are using our ejMenu control?. We can only proceed further with the above requested information and provide you the response as early as possible.

 

Please let us know if you have any concern.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi Madhu,

1) my bootstrap version 2.3 , we had ported to bootstrap 3.1 ,now its working fine , i am going to add button or some icon in the tool bar , how to identify like that is clicked by respective button like ,for add button in the tool bar, i can check like args.requestType == "add" , same thing i need to check for custom tool bar items, in my case i added links like custom1 and custom2 , can you send me sample for this.

for more details i attached my sample application.

2) we had used create:'gridcreate' ,what is create in this databind.

Attachment: Index_f556040a.zip

[Madhu Sudhanan P]

Hi Rakhesh,

 

Please find the response.

 

Query #1: “i need to check for custom tool bar items, in my case i added links like custom1 and custom2"

 

We can place the links ,buttons and icons in toolbar using the CustomToolBarItem, and we can perform any action by clicking the toolbar items using the toolBarClick event as follow.

 

 

<div id="grid" data-bind="ejGrid: {. . .  toolBarClick:'clicked',actionBegin:'fnonActionBegin',actionComplete:'fnonActionComplete' }"></div>

 

The clicked function will be as follow.

 

function clicked(sender) {

            $target = $(sender.target);

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

            var rowIndex = gridObj.model.selectedRow;

            var tr = gridObj.getGridRows()[rowIndex];

            if ($target.hasClass("Bold")) { //Icon click

                if ($(tr).hasClass("bolded"))

                    $(tr).css("font-weight", "normal").removeClass("bolded");

                else

                    $(tr).css("font-weight", "bold").addClass("bolded");

 

            }

            else if ($target.hasClass("edit")) { //Edit link click

                gridObj.sendEditingRequest();

            }

            else if ($target.hasClass("delete")) { //Delete link click

                rowIndex != -1 ? gridObj.sendDeleteRequest($(tr)) : alert("No record selected to perform delete operation");

            }

            else if ($target.hasClass("details")) {  //Details Button click

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

                rowIndex != -1 && $(temp.render(data)).ejDialog({ title: "Details" });

            }

        }

 

 

 

For your convenience we have also created a simple ejGrid sample and the same can be downloaded from the below location.

 

Sample Location: KOSample.zip

 

In the above sample, we have placed a button, link, and icon in the toolbar and perform the custom action in the toolBarClick event.

 

Query #2: “what is create in this databind?”

 

The “create” is the client side event that will be triggered when the grid control is created initially. The create event will have the following arguments.

 

 

$("#Grid").ejGrid({create: function (args) {

 

// args.cancel   - Returns the cancel option value.

// args.model    - Returns the grid model.

// args.type     - Returns the name of the event.

 

}});

 

 

For more information on events, please refer our online demo for Event.

 

http://js.syncfusion.com/demos/web/#!/azure/grid/Events

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi Madhu,

1)i kept all the JavaScript code in js file and binded to the html page , but while loading its throwing error as invalid datasource ,so i changed to $root.datasource after that it was resolved ,i followed same steps for columns property but it was throwing error as 

0x800a139e - JavaScript runtime error: setModel - Invalid input for property :columns - Expected type - array

2) for menu filters if i type some text it was not auto populate the text like if i type a it should populate all the text matches with a ,is it required to set any property to the grid binding,same thing is reproducible in example which you had given

For more details i attached the my sample example.

can you rectify and send me sample.

Attachment: Index_9acfa1af.zip

[Madhu Sudhanan P]

Hi Rakhesh,

 

Please find the response.

 

Query #1: “JavaScript runtime error: setModel - Invalid input for property :columns - Expected type - array”

 

We have anlayzed the provided code and suspect that the values provided to the dataSource and  columns properties are incorrect. We have modified the viewmodel that you have used the attached sample to make the grid work. The modified ViewModel will be as follow.

 

[ViewModel]

var dm = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/"), data;

var query = ej.Query().from("Orders").select("OrderID", "CustomerID", "ShipCountry").page(1, 100);

var promise = dm.executeQuery(query);

promise.done(function (e) {

    data = e.result;

    ko.applyBindings(new LicenseListViewModel()); //Binding the viewmodel after the data is obtained from the server.

});

 

var LicenseListViewModel = function () {

    self = this;  

    this.col = [{ field: "OrderID", key: true }, { field: "CustomerID" }, { field: "ShipCountry" }, { headerText: "Action", columnTemplate: true, templateId: "#linktemplate" }]

    this.employeeView = { //model for grid

        dataSource:ko.observableArray(data),

        selectedRow: ko.observable(1),

        currentPage: ko.observable(2),

        columns: this.col

    }  

}

 

[html]

<div id="grid" data-bind="ejGrid: {dataSource:employeeView.dataSource,columns:employeeView.columns,allowGrouping:true,allowFiltering: true,allowPaging:true,pageSettings:{currentPage:employeeView.currentPage,pageSize:4},create:'gridcreate',filterSettings: { filterType: 'menu' },toolBar: { allowToolBar: true, customToolbarItems: [{ templateId: '#Customtemplate' }] } }"></div>

 

 

Query #2: “for menu filters if i type some text it was not auto populate the text”

 

We are able to reproduce the reported issue and confirmed the “Knockout - Grid Filtering menu is not showing suggestion” as a defect. We have logged defect report and the fix for this issue will be available in the Upcoming Volume 2, 2014 Service Pack release.

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Rakhesh Rao]

Hi Madhu,

1) assume 1000 records are their to display in the grid  and my pagesize 10,i want to fetch only 0-100 records at first service call ,when user clicks on 11th page it should fetch 110-200 (second call) , i will bind 100 records to json data , and i want to show in the grid footer total record counts,i follow the steps of the forum link 

http://www.syncfusion.com/support/forums/javascript/ejgrid/116426

but on every page click calling is going to server . ideally the call should made to server only when user clicks on 11th page

this helpful to to load the page faster if data is more else it will take time.

can send me the sample for this.

[Mohammed Farook J]

HI Rakhesh,

Based on your requirement we have created sample in grid using Knockout and the same can be downloaded from the below location.

Please find the code snippet to retrieve records after certain page using actionComplete event. Also please modify this current as per your requirements

 

[Script]

  function fnActionComplete(args) {

            if (args.requestType == "paging") {

                  var proxy = this;

                if (args.model.pageSettings.currentPage % 10==0) {

                    var promise = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders", offline: true });

                    proxy.element.ejWaitingPopup("show");

                    promise.ready.done(function (args) {

                        proxy.element.ejWaitingPopup("hide");

                        proxy._commonQuery = proxy.model.query = new ej.Query();

                        proxy.model.query.take(proxy.model.pageSettings.currentPage * proxy.model.pageSettings.pageSize);

                        proxy._gridRecordsCount = null;

                        proxy.dataSource(args.result);

                        proxy.getPager().ejPager("model.totalRecordsCount",823);

                    });

                }

            }

        }

please download sample :  ko_sample.zip

      

Please let us know if you have any queries.

Regards,

J.Mohammed Farook

[Rakhesh Rao]

Hi Farook,

i want to implement same like http://www.syncfusion.com/support/forums/javascript/ejgrid/116426 for my sample application , i mean for each clicks on on next button of grid the request should be made to service, i applied same example to my code using view model binding ,but it was not displaying the data , i tried same like above example like <div id="Grid"></div> and written  $("#Grid").ejGrid({ my code }); but i dont like this i need to bind using view model and in this case i got issue like when i applies grouping and drag and drop any column on grid header i getting error as length is invalid.

Can you send me the sample for this in c# mvc .

for more details i attached my sample code

Attachment: Index_1e5a5f5.zip

[Mohammed Farook J]

Hi Rakesh Reo,

 

We have created a sample based on your requirement. In this sample, we have used DataManager to retrieve data from server after reached lastpage because next pager button is only visible if pager count is more than currentpage count. Please find the example for your requirement.

 

Please find the code snippet

[script]

function fnActionComplete(args) {

    if (args.requestType == "paging") {

        var proxy = this;

      

        if (this.model.pageSettings.currentPage == this.getGridPager().ejPager("model.totalPages")) {

            var promise = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders?$skip=" + this.model.pageSettings.currentPage * this.model.pageSettings.pageSize + "&$top=100", offline: true });

            proxy.element.ejWaitingPopup("show");

            promise.ready.done(function (args) {

                proxy.element.ejWaitingPopup("hide");

                proxy._commonQuery = proxy.model.query = new ej.Query();

                proxy._gridRecordsCount = null;

                proxy.dataSource($.merge(proxy._dataSource(), args.result));

                proxy.getPager().ejPager("model.totalRecordsCount", "totalRecordsCount");

            });

        }

    }

}

 

please download sample :  SampleApp.zip

      

Please let us know if you have any queries.

Regards,

J.Mohammed Farook

[Rakhesh Rao]

Hi Farook,

1)it was throwing error as Object doesn't support property or method 'getPager' ,in your sample code.

2)i am going to use the sample example which you people had given in the link http://www.syncfusion.com/downloads/support/directtrac/125403/MVCUsingSQLConnection241749759.zip, in this i am getting error when i drag drop any column into grouping header length is invalid. in this example you people directly binding to grid in document load $("#Grid").ejGrid(...,is it possible to implement with view model , i mean binding the source(js files) to cshtml.

if possible modify the above link code using bindings and send me .

for more details i attached error screen shot.

3)how to change the grid header and mouse over colour by default it showing orange colour , i mean which css file to modified.

4)when i clicks on the filter symbol it was showing filter menu in the correct place , it was showing some where else.you can check that in the screen shot

Attachment: Index_3cc8d2a7.zip

[Mohammed Farook J]

Hi Rakhesh Rao

 

Thanks for using Syncfusion products,

 

Based on your Requirements, We have created a simple sample of EjMVC Grid .

 

it was throwing error as Object doesn't support property or method 'getPager' ,in your sample code.	getPager is  12.2.36 ( vol 2,2014) Api so please change gridGetPager instead of getPager
2)i am going to use the sample example which you people had given in the link http://www.syncfusion.com/downloads/support/directtrac/125403/MVCUsingSQLConnection241749759.zip, in this i am getting error when i drag drop any column into grouping header length is invalid. in this example you people directly binding to grid in document load $("#Grid").ejGrid(...,is it possible to implement with view model , i mean binding the source(js files) to cshtml. if possible modify the above link code using bindings and send me . for more details i attached error screen shot.	we  will  provide response for this query in one business day (23 july 2014).
how to change the grid header and mouse over colour by default it showing orange colour , i mean which css file to modified.	Please use below CSS to achieve your requirement.   <style>     .e-headercell, .e-grid .e-hover{     background-color:orange !important;     } </style>
4)when i clicks on the filter symbol it was showing filter menu in the correct place , it was showing some where else.you can check that in the screen shot	We are unable to reproduce the issue . we have created sample. Could you please check our sample whether issue is reproducing . if issue is not reproduced please modify our sample as issue reproducible, it will be helpful to filter issue.

Sample:  MVCUsingSQLConnection.zip

 

Regards

J.Mohammed Farook

 

[Rakhesh Rao]

Hi,

Query1#

i changed controller code to catch the user filter values like below

 public JsonResult GetData([Bind(Prefix = "$filter")]string search,[Bind(Prefix = "$top")]int top = 24, [Bind(Prefix = "$skip")]int skip = 0)

search has value startswith(tolower(CustomerID),'v'), 

1)is their any sync-fusion methods to convert it to SQL where clause format.

2)its calling the server side code for each key stroke enters ,is it possible to call that method only when user clicks on filter button of filter menu.

Query2#

i added two properties currentpage and current row and binded using knock-out to grid model,when i changed the values the respective events are not fired ,like if i change the values of current row it was not going to respective row

for more details i attached the screen shot.

if above things are possible ,send along with previous pending query #2

Attachment: Index_ef416a8e.zip

[Rakhesh Rao]

hi madhu,

you people had released 12.2.0.36 version on 10 july 2014 , i had reported few bugs regarding the ejgrid , are they resolved in that version

1)ejgrid filter auto populate is not working 

2)ejgrid filter menu icon is disappears when clicks on next page button.

[Mohammed Farook J]

Hi Rakhesh Rao,

 

Thanks for  using Syncfusion products

 

 

i am going to use the sample example which you people had given in the link http://www.syncfusion.com/downloads/support/directtrac/125403/MVCUsingSQLConnection241749759.zip, in this i am getting error when i drag drop any column into grouping header length is invalid. in this example you people directly binding to grid in document load $("#Grid").ejGrid(...,is it possible to implement with view model , i mean binding the source(js files) to cshtml. if possible modify the above link code using bindings and send me . for more details i attached error screen shot.	We have analyzed your sample and checked the syntax for json conversion is not correct with regarding  to our dataManger. We have changed as below syntax   return Json(new {d = new { results = list, __count= count }}, JsonRequestBehavior.AllowGet); //result - records, count-total records from database   Sample :   MVCUsingSQLConnection.zip
1)is their any sync-fusion methods to convert it to SQL where clause format.	Currently we don’t have method convert querry to sql format.
2)its calling the server side code for each key stroke enters ,is it possible to call that method only when user clicks on filter button of filter menu	This query  belongs to Essential JavaScript Tools Team.  We forward this query to regarding team. They will update you in one business day(24 july 2014)
i added two properties currentpage and current row and binded using knock-out to grid model,when i changed the values the respective events are not fired ,like if i change the values of current row it was not going to respective row for more details i attached the screen shot.	<div id="grid" data-bind="ejGrid: {dataSource: employeeView.dataSource,columns:employeeView.columns,actionComplete:'fnActionComplete',allowFiltering: true,allowGrouping:true, selectedRow:employeeView.selectedRow,allowPaging:true,pageSettings:{currentPage:employeeView.currentPage,pageSize:10,pageCount:2},create:'gridcreate',filterSettings: { filterType: 'menu' }}"></div> please refer the sample:  Sample Location: SampleApp.zip

 

                             

 

Please let us know if have any queries

 

Regards,

J.Mohammed Farook

[Mohammed Farook J]

Hi Rakhesh Rao,

Query: its calling the server side code for each key stroke enters, is it possible to call that method only when user clicks on filter button of filter menu

To achieve this requirement (“Call server side only on clicking the filter button”) we can use the “minCharacter” property. The Autocomplete search operation will be executed based on the value specified in the “minCharacter” property. By default its value will be “1”, so when each time a character is pressed, the request will be passed to the server. If we set higher values for this property (like “30”) the request will not be sent to the server until “30” characters are pressed. Now the request will be passed to the server side only when the user clicks the filter button.

Please refer the below code to set the “minCharacter” property during initialization and in run time.

            

   $("#Grid_acString").ejAutocomplete("model.minCharacter", 30);

             

 Sample Location : MVCUsingSQLConnection.zip                                                      

Please let me know if you have further queries.

Regards,

J.Mohammed Farook

[Rakhesh Rao]

Hi Farook,

1) i want to give the page size selection to user for that i added one numeric drop down and data-bind using knock-out for this i changed sample code which you had given but the data is not displaying 

2)i want to set the max value of page size numeric drop down with total count of grid rows so that if the user changes the page size it will call the server method and fetches those many $top rows

3)when user clicks on edit anchor tag its not calling the grid-create event.

for more details i attached the my sample code , can you rectify it and attach the sample.

thanks in advance.

Attachment: Index_584c690a.zip

[Mohammed Farook J]

Hi Rakhesh Rao,

 

Please find the response.

 

Query 1:  “want to give the page size selection to user for that i added one numeric drop down and data-bind using knock-out for this i changed sample code which you had given but the data is not displaying” and  “want to set the max value of page size numeric drop down with total count of grid rows so that if the user changes the page size it will call the server method and fetches those many $top rows”

 

Sorry for the inconvenience caused. Could you please confirm us whether you are using numeric textbox or dropdownlist?.

 

Please refer the below online demos for knockout support in Dropdownlist and NumericTextBox:

 

http://js.syncfusion.com/demos/web/#!/azure/dropdownlist/KnockoutSupport

 

http://js.syncfusion.com/demos/web/#!/azure/editors/KnockoutSupport

 

Please provide us more information regarding your requirement. The information provided would be more helpful for us to analyze the requirement and provide you the solution as early as possible.

 

Query 2: when user clicks on edit anchor tag its not calling the grid-create event.

 

We are unable to reproduce  the reported issue. Please find the code snippet  of gird create  event and  which the editing is performed clicking the hyperlink in column.

 

Window.location.rel='nofollow' href  mention the controller name and the value return in the querry format.

 

function gridcreate(args){

 $('.e-gridcontent').on("click", "a", function (e) {

        var location = window.location.pathname;

        var urlPath = location.substring(0, location.lastIndexOf('/'));

        var eurl = urlPath + '/CreateEdit/';

        e.preventDefault();

        var $this, $tr, action, gridObj, rowIndex;

        $this = $(this);

        $tr = $this.closest('tr');

        action = $this.data("action");

        gridObj = $("#grid").data("ejGrid");

        index = gridObj.getIndexByRow($tr);

        var rowdata = gridObj.getCurrentViewData()[index];

        window.location.rel='nofollow' href = "Home/CreateEdit/" + "?key=" + rowdata["OrderID"];

}

 

 

Please let us know if have any queries.

 

Regards,

J.Mohammed Farook

 

[Rakhesh Rao]

Hi,

is it possible to change the grid grouping header colour, if yes can you send me sample for that.

[Balaji Marimuthu]

Hi Rakesh Rao,

 

Thanks for  using Syncfusion products.

 

Yes it is possible to change the grid group header color by overriding the groupdrop area css properties. Please refer the following code snippet.

 

 

<style>

        .e-grid .e-groupdroparea {

            background-color: #00FFFF;

        }

 

        .e-grid .e-groupheadercell:hover {

            background: none repeat scroll 0 0 #f6f7f7;

        }

 

        .e-grid .e-groupheadercell:hover {

            color: gray;

        }

 

        .e-grid .e-groupheadercell:hover .e-ascending, .e-grid .e-groupheadercell:hover .e-descending, .e-grid .e-groupheadercell:hover .e-togglegroupbutton, .e-grid .e-groupheadercell:hover .e-ungroupbutton {

            background-color: transparent;

            color: gray;

        }

 </style>

 

 

 

Please let us know if you have any queries.

 

Regards,

Balaji Marimuthu

[Rakhesh Rao]

Hi,

      In knockout syncfusion grid,when i click on add button in the tool bar,new row will be added but existing data in the grid become together,

can you send sample for this. find the screen shots from attachment.

Thanks in advance 

Attachment: SyncfusionEJ_KnockGrid_d6450dcf.zip

[Ragavee U S]

Hi Rakesh,

 

We are glad to announce that our  Essential Studio service pack-2 for Volume 2, 2014 is rolled out and is available for download under the following link.

 

http://www.syncfusion.com/forums/117190/essential-studio-2014-volume-2-service-pack-2-release-v12-2-0-42-available-for-download

 

The fix for the issues “Knockout - Grid Filtering menu is not showing suggestion” and “Filtering menu icon has not showned while set through setmodel” are included in the above provided link.

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards,

Ragavee U S

[Mohammed Farook J]

Hi Rakesh,

 

We have analyzed the provided information and we are unable to reproduce the issue. Please find sample for your convenience.

 

Sample: sample.zip

 

Could you please check our sample whether issue is reproducing . if issue is not reproduced please modify our sample as issue reproducible, it will be helpful to solve the issue.

 

Query:

 

   we have need a clarification about the reported issue . please tell us which you have hidden any columns.

 

Please let us know if have any queries,

 

Regards,

J.Mohammed Farook

[Rakhesh Rao]

Hi Farook,

thank you for reply,

Yes,I am hiding key column,making visible false in the grid. if its possible send me one example.

thanks in advance

[Mohammed Farook J]

Hi Rakesh,

 

we have confirmed that the issue with “misalignment in hidden column with adding a new row in Grid ” is a defect and we have logged a defect report. The fix for this issue is estimated to be available on Volume 3, 2014 which is scheduled to be rolled out at mid of October 2014.

 

Please let us know if have any queries,

 

Regards,

J.Mohammed Farook